Instrument using the NPM package¶

Replace the following options with desired values in the snippets provided below:

Option	Description
`YOUR_ENVIRONMENT`	The environment of your browser application (e.g. `production`).
`YOUR_SERVICE_NAME`	The name of your browser application
`YOUR_CUSTOMER_ID`	Your Observe customer ID
`YOUR_OBSERVE_TOKEN`	The bearer token you created in the prior steps
`distributedTracingOrigins`	List of APM instrumented domains to propagate distributed tracing headers

Add the RUM SDK dependency to your application¶

npm install @elastic/apm-rum --save

Initialize the SDK¶

import { init as initApm } from "@elastic/apm-rum";
initApm({
  environment: "<YOUR_ENVIRONMENT>",
  serviceName: "<YOUR_SERVICE_NAME>",
  serverUrlPrefix:
    "?environment=<YOUR_ENVIRONMENT>&serviceName=<YOUR_SERVICE_NAME>",
  serverUrl: "https://<YOUR_CUSTOMER_ID>.collect.observeinc.com/v1/http/rum",
  breakdownMetrics: true,
  distributedTracingOrigins: ["*"],
  distributedTracingHeaderName: "X-Observe-Rum-Id",
  propagateTracestate: true,
  logLevel: "error",
  session: true,
  apiVersion: 2,
  apmRequest({ xhr }) {
    xhr.setRequestHeader("Authorization", "Bearer <YOUR_OBSERVE_TOKEN>");
    return true;
  },
});

Framework Specific Integrations¶

React, Vue, or Angular¶

If your frontend application uses any of the above frameworks, refer the Elastic RUM agent documentation to account for advanced scenarios.

Next.js¶

For Next.js apps, you must ensure the above snippet is only loaded on the client side. You may achieve this by adding a "use client"; directive at the beginning of the file where you initialize the SDK.