Browser Instrumentation

[DEPRECATED] This page has been deprecated in favor of Frontend  Monitoring﻿
OpsVerse Browser RUM uses OpenTelemetry standards to enable high quality, ubiquitous, and portable telemetry to enable effective observability.
Overview
OpsVerse Browser RUM uses OpenTelemetry standards to enable high quality, ubiquitous, and portable telemetry to enable effective observability.
Currently the library supports only Fetch API for Trace header propagation. Axios has known issues.
Setup
Install the OpsVerse RUM package using the following command:
Shell
npm install --save opsverse-rum
npm install --save opsverse-rum
﻿
Import and Initialize the package by including the following code snippet to your application:
For HTML and Javascript based application:
JS
    import("opsverse-rum").then((res) => {
        if(res){
            res.start({
                authKey: "<B64EncodedBasicAuthToCollectorUrl>",
                serviceName: "example-service",
                collectorUrl: "<OpenTelemetryCollectorUrl>",
                samplingRatio: "1" //min: 0.0 and max: 1.0
            });
        }
    })
    import("opsverse-rum").then((res) => {
        if(res){
            res.start({
                authKey: "<B64EncodedBasicAuthToCollectorUrl>",
                serviceName: "example-service",
                collectorUrl: "<OpenTelemetryCollectorUrl>",
                samplingRatio: "1" //min: 0.0 and max: 1.0
            });
        }
    })
﻿
OR
JS
    import { OpsVerseBrowserRum } from ‘opsverse-rum’
    if (typeof window !== "undefined" && OpsVerseRum) {
        OpsVerseBrowserRum.start({
            authKey: "<B64EncodedBasicAuthToCollectorUrl>",
            serviceName: "example-service",
            collectorUrl: "<OpenTelemetryCollectorUrl>",
            samplingRatio: "1" //min: 0.0 and max: 1.0
        });
    }
    import { OpsVerseBrowserRum } from ‘opsverse-rum’
    if (typeof window !== "undefined" && OpsVerseRum) {
        OpsVerseBrowserRum.start({
            authKey: "<B64EncodedBasicAuthToCollectorUrl>",
            serviceName: "example-service",
            collectorUrl: "<OpenTelemetryCollectorUrl>",
            samplingRatio: "1" //min: 0.0 and max: 1.0
        });
    }
﻿
For NestJS based application add the following snippet to you App.js file:
JS
    import dynamic from "next/dynamic";
    const [libraryLoaded, setLibraryLoaded] = React.useState(false);
    const OpsVerseRumLibrary = dynamic(
        () =>
        import("opsverse-rum").then((res) => {
            if (res) {
                setLibraryLoaded(true);
            }
        }),
        { ssr: false }
    );

    React.useEffect(() => {
    if (!libraryLoaded) return;
        OpsVerseBrowserRum.start({
            authKey: "<B64EncodedBasicAuthToCollectorUrl>",
            serviceName: "example-service",
            collectorUrl: "<OpenTelemetryCollectorUrl>",
            samplingRatio: "1" //min: 0.0 and max: 1.0
        });
    }, [libraryLoaded]);

    return (
        <>
            <Component {...pageProps} />
            <OpsVerseRumLibrary />
        </>
    )
    import dynamic from "next/dynamic";
    const [libraryLoaded, setLibraryLoaded] = React.useState(false);
    const OpsVerseRumLibrary = dynamic(
        () =>
        import("opsverse-rum").then((res) => {
            if (res) {
                setLibraryLoaded(true);
            }
        }),
        { ssr: false }
    );

    React.useEffect(() => {
    if (!libraryLoaded) return;
        OpsVerseBrowserRum.start({
            authKey: "<B64EncodedBasicAuthToCollectorUrl>",
            serviceName: "example-service",
            collectorUrl: "<OpenTelemetryCollectorUrl>",
            samplingRatio: "1" //min: 0.0 and max: 1.0
        });
    }, [libraryLoaded]);

    return (
        <>
            <Component {...pageProps} />
            <OpsVerseRumLibrary />
        </>
    )
﻿
Once you run your application you should see traces being exported to the provided collector URL in the console/network tab of the browsers developer toolbar.
Did this page help you?
Ruby
NodeJS Instrumentation