Real User Monitoring
Browser Instrumentation
Overview
OpsVerse Browser RUM uses OpenTelemetry standards to enable high quality, ubiquitous, and portable telemetry to enable effective observability. OpsVerse browser RUM package can be used to instrument, generate, collect, and export telemetry data (metrics, logs, and traces) to help you analyze your software’s performance and behavior.
Note: Currently the library supports only Fetch Api for Trace header propagation. Axios has issues
Setup
This guide uses the NPM, but the steps to instrument your own application should be broadly the same.
Execute the following command
npm instal --save opsverse-rum
Import and initialize the package
For HTML and Javascript based application
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
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 NextJS
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 />
</>
)
Start your application
Now, build your application and run your code in the browser. In the console/network tab of the browsers developer toolbar you should see some traces being exported to the collector url.
See OpsVerse support docs for reference.
Opentelemetry Packages used
@opentelemetry/sdk-trace-web @opentelemetry/instrumentation-document-load @opentelemetry/context-zone @opentelemetry/instrumentation @opentelemetry/instrumentation-fetch @opentelemetry/propagator-b3 @opentelemetry/core @opentelemetry/exporter-zipkin @opentelemetry/sdk-trace-base @opentelemetry/resources @opentelemetry/semantic-conventions
NodeJS Instrumentation
Overview
In order to visualize and analyze your traces, you will need to export them to a tracing server. Follow these instructions for setting up a backend and exporter.
You may also want to use the BatchSpanProcessor to export spans in batches in order to more efficiently use resources and B3 Propagation headers which are used for trace context propagation across service boundaries.
Setup
Please npm install or yarn add the following packages
@opentelemetry/sdk-node @opentelemetry/auto-instrumentations-node @opentelemetry/resources @opentelemetry/semantic-conventions @opentelemetry/exporter-zipkin @opentelemetry/core @opentelemetry/propagator-b3 @opentelemetry/api
Create a file tracing.js which will contain your tracing setup code.
/* tracing.js */
// Require dependencies
const opentelemetry = require("@opentelemetry/sdk-node");
const {
getNodeAutoInstrumentations,
} = require("@opentelemetry/auto-instrumentations-node");
const { Resource } = require("@opentelemetry/resources");
const {
SemanticResourceAttributes,
} = require("@opentelemetry/semantic-conventions");
const { ZipkinExporter } = require("@opentelemetry/exporter-zipkin");
const { CompositePropagator } = require("@opentelemetry/core");
const {
B3Propagator,
B3InjectEncoding,
} = require("@opentelemetry/propagator-b3");
const api = require("@opentelemetry/api");
const options = {
headers: {
Authorization: "Basic <base64 encoded clientId:secret>",
},
url: "<OpsVerse collector url>",
};
const exporter = new ZipkinExporter(options);
const sdk = new opentelemetry.NodeSDK({
traceExporter: exporter,
instrumentations: [getNodeAutoInstrumentations()],
resource: new Resource({
[SemanticResourceAttributes.SERVICE_NAME]: "<tracking-name>",
}),
});
api.propagation.setGlobalPropagator(
new CompositePropagator({
propagators: [
new B3Propagator(),
new B3Propagator({ injectEncoding: B3InjectEncoding.MULTI_HEADER }),
],
})
);
sdk.start();
The tracing setup and configuration should be run before your application code. One tool commonly used for this task is the -r, --require module flag.
node --require './tracing.js' app.js
You are now good to send traces to any OpenTelemetry Collector. This library was specifically crafted so that you may additionally get Real User Monitoring metrics if by sending to the OpenTelemetry Collector you launched via Opsverse