Real User Monitoring (RUM)

Oodle RUM gives you end-to-end visibility into how real users experience your web application — page load performance, JavaScript errors, user interactions, and full session replay.

Installation

npm install @oodle-ai/rum

Quick Start

Add the following to your application entry point (e.g. main.ts, App.tsx, or a layout component):

import { OodleRum } from '@oodle-ai/rum';

OodleRum.init({
  instanceId: '<YOUR_INSTANCE_ID>',
  apiKey: '<YOUR_RUM_API_KEY>',
  endpoint: 'https://<YOUR_COLLECTOR>.oodle.ai',
  service: 'my-frontend',
  env: 'production',
  version: '1.0.0',
  sessionReplay: true,
  sessionSampleRate: 100,
  replaySampleRate: 100,
  privacyLevel: 'mask-user-input',
  allowedTracingUrls: [
    'https://api.yourapp.com',
  ],
});

API Key

RUM uses a dedicated API key with the RUM role. This key is embedded in client-side JavaScript and is visible to end users. It is restricted to writing RUM events and replay segments only — no read access to any other data.

Create a RUM API key from Settings → API Keys → Create API Key and select the RUM role.

Configuration Options

Option	Type	Default	Description
instanceId	string	required	Your Oodle instance ID
apiKey	string	required	RUM API key
endpoint	string	required	Collector URL (*.oodle.ai)
service	string	required	Application name
env	string	—	Environment (production, staging)
version	string	—	Application version
sessionReplay	boolean	true	Enable session recording
sessionSampleRate	number	100	% of sessions to capture
replaySampleRate	number	100	% of sessions to record replay
privacyLevel	string	'mask-user-input'	Privacy masking level
allowedTracingUrls	array	—	URLs to inject traceparent
openTelemetry	boolean | object	—	Enable OTel browser tracing

OpenTelemetry Browser Tracing

The SDK supports full OpenTelemetry auto-instrumentation, linking browser requests to backend traces end-to-end.

Install peer dependencies

npm install @opentelemetry/api \
  @opentelemetry/auto-instrumentations-web \
  @opentelemetry/sdk-trace-web \
  @opentelemetry/exporter-trace-otlp-http \
  @opentelemetry/context-zone \
  @opentelemetry/resources \
  zone.js

Enable in config

OodleRum.init({
  // ... base config ...
  allowedTracingUrls: [
    'https://api.yourapp.com',
  ],
  openTelemetry: { enabled: true },
});

How it works

1. The SDK initializes an OpenTelemetry WebTracerProvider with a BatchSpanProcessor that exports spans to your Oodle collector via OTLP HTTP (/v1/traces).
2. @opentelemetry/auto-instrumentations-web automatically creates spans for page loads, fetch/XHR requests, and user interactions.
3. For URLs matching allowedTracingUrls, the traceparent header is injected into outgoing requests — your backend picks up the same trace_id and the full trace appears in Oodle's Traces UI.

Advanced options

openTelemetry: {
  enabled: true,
  tracesEndpoint: 'https://custom-collector/v1/traces',
  customAttributes: {
    'team.name': 'frontend',
  },
}

Session Replay

Session replay records a pixel-perfect reproduction of the user's browser session using rrweb.

Privacy levels

Level	Behavior
allow	No masking
mask-user-input	Mask input fields, textareas
mask	Mask all text content

Sampling

Use replaySampleRate to control costs. For example, set replaySampleRate: 10 to record 10% of sessions.

User Identification

OodleRum.identify({
  id: 'user-123',
  name: 'Jane Doe',
  email: '[email protected]',
});

Custom Events

OodleRum.trackEvent('purchase_completed', {
  orderId: 'ORD-456',
  amount: 99.99,
  currency: 'USD',
});

Feature Flags

OodleRum.addFeatureFlag('new-checkout', 'enabled');

Content Security Policy

If your app uses CSP, add the collector domain to connect-src:

connect-src 'self' https://<YOUR_COLLECTOR>.oodle.ai;

Troubleshooting

CORS errors on traced requests

If you see CORS errors after enabling allowedTracingUrls, your backend must allow the traceparent header:

Access-Control-Allow-Headers: traceparent

OTel peer deps not installed

If you enable openTelemetry without installing peer dependencies, the SDK logs a warning and continues without tracing — RUM data is unaffected.

No data appearing

1. Check the browser console for SDK errors
2. Verify the API key has the RUM role
3. Confirm endpoint points to your collector
4. Allow 2–5 minutes for data to propagate