Browser RUM

Real User Monitoring (RUM) shows what people experience in your web app: how fast pages load, which errors they hit, and how a session unfolded. It uses the upstream OpenTelemetry browser SDK, plus a few reference files you copy into your app; there is no Tracix SDK to install.

Create a RUM application

Create one RUM application, with its own app key, for each web or mobile app and environment.

1. 1

   Open RUM setup

   In your workspace, open Applications › Real User Monitoring, then the Setup tab.

2. 2

   Describe the application

   Under RUM applications, enter the Application name and the Browser origins your app runs on, separated by commas, such as https://shop.example.com. Set the Replay sample % (default 10) and the Replay privacy level, then select Create application.

3. 3

   Note the app key

   The app key starts with rum_. It is public by design, because it ships in your web pages: the origins you listed are what stop other sites from sending data with it.

Creating an application needs permission to manage RUM, which the workspace Admin role has. Applications can't be edited or deleted yet, so create a new one if you need different settings.

Add RUM to your web app

The Setup page shows these steps for the selected application, with your endpoint and app key filled in.

1. 1

   Install the OpenTelemetry packages

   bashCopy

   npm install \
   @opentelemetry/api @opentelemetry/api-logs @opentelemetry/core \
   @opentelemetry/resources @opentelemetry/sdk-trace-web @opentelemetry/sdk-logs \
   @opentelemetry/sdk-metrics @opentelemetry/context-zone \
   @opentelemetry/exporter-trace-otlp-http @opentelemetry/exporter-logs-otlp-http \
   @opentelemetry/exporter-metrics-otlp-http @opentelemetry/instrumentation \
   @opentelemetry/instrumentation-document-load @opentelemetry/instrumentation-fetch \
   @opentelemetry/instrumentation-xml-http-request @opentelemetry/instrumentation-user-interaction \
   web-vitals
   
   # Optional web session replay (lazy-load this bundle):
   npm install rrweb fflate

2. 2

   Copy the reference files

   Open Reference implementation on the Setup page and copy its six files into a tracix-rum folder in your app. They set up sessions, web vitals, errors, tracing and replay with the packages above.

3. 3

   Initialize once, as early as possible

   javascriptCopy

   import { initReferenceTelemetry } from './tracix-rum/setup'
   import { instrumentWebVitals } from './tracix-rum/vitals'
   import { instrumentErrors } from './tracix-rum/errors'
   
   initReferenceTelemetry({
   endpoint: 'https://rum-<workspace>.app.tracix.io',
   appKey: '<app key>',
   serviceName: 'my-web-app',
   serviceVersion: '1.0.0', // must match the uploaded source-map release
   environment: 'production',
   propagateTraceHeaderCorsUrls: [/https:\/\/api\.my-app\.example/],
   })
   
   instrumentWebVitals() // LCP, INP, CLS, TTFB, FCP + attribution
   instrumentErrors()    // onerror, unhandledrejection, failed resources
   
   // Web replay is optional and remains outside the core telemetry bundle.
   import('./tracix-rum/replay').then((replay) => replay.startReplay({
   sampleRate: 0.1,
   privacy: 'mask',
   lookbackMs: 30_000,
   }))

4. 4

   Mark route changes in single-page apps

   With a client-side router, call startView(routeName) from ./tracix-rum/session after every navigation. The setup works with plain JavaScript, React and Next.js, Vue and Nuxt, Angular, and Svelte.

propagateTraceHeaderCorsUrls lists the API origins that should receive the W3C traceparent header, so a click leads into the backend trace in APM. Allow the traceparent header in those APIs' CORS settings.

What RUM captures

Tracix builds sessions, funnels and Apdex scores from this data, with a 2-second Apdex threshold. Sessions appear only for data that carries the session ID the reference files add, so a plain OpenTelemetry setup without them sends traces but no sessions.

Session replay and privacy

Replay records the page with rrweb, compresses it and sends it as OpenTelemetry logs through the same endpoint.

• Replay sample % decides which sessions record from the start. Other sessions keep the last 30 seconds in the browser and start sending when an uncaught error or rejected promise happens, or when your code calls triggerCapture().
• Mask inputs and marked text, the default, masks form inputs and any element marked data-tracix-privacy="mask". Mark an element data-tracix-privacy="hidden" to leave it out of the recording entirely. Strict masking currently behaves the same as the default.
• Allow unmasked text records inputs as typed. Use it only where no personal data can appear.
• Canvas elements aren't recorded.

Replay sampling is the only sampling RUM has: every session sends its page loads, vitals, errors and requests.

Endpoint and app keys

Before storing data, the RUM endpoint:

• masks email addresses and card-number-like values;
• drops requests whose user agent looks like a bot, crawler or headless browser, so automated browser tests don't show up as users;
• turns IDs in URL paths into /:id, so pages group together;
• records the client's IP address to look up its location.

Source maps

To see readable stack traces in Real User Monitoring › Errors, upload your JavaScript source maps for the exact service.version you set in initReferenceTelemetry. The Setup page shows the upload request under Release artifacts and symbolication. There is no upload page or CLI yet: the request must come from a signed-in account that can manage RUM. Errors then show as symbolicated, or raw when no source map matches the release. Stack traces are read in the format Chrome and other V8-based browsers use.

Mobile apps

The Setup page also shows how to send data from the upstream OpenTelemetry Android agent and from OpenTelemetry Swift on iOS, with the same endpoint and an app key. Native apps don't get session replay.

Next steps