Web

Paste the generated script into the <head> of your site. init runs from the tag’s onload, so the bundle has finished loading before it’s called:

<script async crossorigin="anonymous"
  src="https://cdn.kloudmate.com/rum/js/v2/km-rum.umd.min.js"
  onload="KloudMateRum.init({
    endpoint: 'https://otel.kloudmate.com:4318',
    rumAccessToken: 'YOUR_PUBLIC_API_KEY',
    applicationName: 'my-app',
    deploymentEnvironment: 'production',
    sampleRate: 1.0,
    sessionRecorder: { enabled: true, sampleRate: 0.25 },
  })"></script>

The /v2/ path rolls forward with patches and new features, but never with a breaking major version, so fixes reach your users without you editing this tag.

To bundle it instead, install the package and call init() as early as you can in your entry point. Nothing that happens before that call is captured:

npm install @kloudmate/rum-web

import { init } from '@kloudmate/rum-web';

init({
  endpoint: 'https://otel.kloudmate.com:4318',
  rumAccessToken: 'YOUR_PUBLIC_API_KEY',
  applicationName: 'my-app',
  deploymentEnvironment: 'production',
});

Get your key and the rest of the values from Add application. See Add an application.

Identify the user

Without an ID, sessions are listed as Anonymous. Set the user once they’re known, usually right after sign-in:

KloudMateRum.setUser({ id: 'u_123', email: 'john@example.com' })

id and email become the userId and userEmail attributes that the session list displays and filters on. Any other field is added as an attribute on every span, so plan: 'pro' tags the whole session with the plan. Calling setUser() on every page load to restore a remembered sign-in is fine, and the current session keeps running.

Call endSession() on sign-out. Without it, a sign-out followed by a different sign-in keeps one session across both people:

KloudMateRum.endSession()

Everything setUser() set is cleared, extra fields included. Attributes set with setGlobalAttributes() are kept, so use those for values that aren’t tied to a person, such as an A/B variant. The next session starts at the next instrumented event.

Record sessions for replay

Session recording is off by default, and even once it’s on only a share of sessions are recorded. sessionRecorder.sampleRate sets that share, as a fraction between 0 and 1:

KloudMateRum.init({
  endpoint: 'https://otel.kloudmate.com:4318',
  rumAccessToken: 'YOUR_PUBLIC_API_KEY',
  applicationName: 'my-app',
  sessionRecorder: {
    enabled: true,
    // Of the sessions that send telemetry, the share also recorded for replay.
    sampleRate: 0.1,
    options: { maskAllInputs: true },
  },
});

The two rates multiply. The top-level sampleRate decides whether a session sends anything at all, and sessionRecorder.sampleRate then decides whether a session that is already sending is also recorded. At sampleRate: 0.25 and sessionRecorder.sampleRate: 0.1, one session in forty carries a replay.

Sessions without a recording still show their timeline, network waterfall, console output, and errors. Only the Replay tab is empty.

Inputs are masked by default. Add km-block to an element’s class list to keep it out of the recording entirely, or km-ignore to record the element but not what is typed into it.

Choose what the SDK captures

Console output, navigation, and resource timing are controlled through the events option:

KloudMateRum.init({
  // ...
  events: {
    // Defaults to ['error', 'warn'].
    console: ['error', 'warn', 'info'],
  },
});

Option	Default	What it does
`events.enabled`	`true`	Master switch for automatic event capture.
`events.console`	`['error', 'warn']`	Fills the Console tab. Pass an array of levels from `error`, `warn`, `log`, `info`, and `debug` to capture more, or `false` to capture none.
`events.navigation`	`true`	Route changes in a single-page app, and navigation timing on the initial load.
`events.resourceTiming`	`false`	One event per sub-resource. High volume, so opt in deliberately.

Web vitals are captured as spans whatever you set here, because they feed the p75 charts on Pages. Frustration signals are always detected too.

captureConsoleErrors is a separate option, on by default. It reports console.error(...) as a real error rather than only as a console line. Set it to false if you use console.error for logging that shouldn’t count against your error rate.

Keep the SDK current

Upgrading matters most for replay on long sessions. From @kloudmate/rum-web 2.2.4 the recorder writes a full DOM snapshot every 5,000 events, so seeking rebuilds the page from the nearest snapshot instead of replaying everything before it. Jumping to minute 20 of a session takes about a second on a current SDK, against most of a minute on an older one.

There’s nothing to configure. Loading the current bundle is enough, and the /v2/ CDN path in the generated snippet picks up patches on its own.

Web

Identify the user

Record sessions for replay

Choose what the SDK captures

Keep the SDK current

Related Resources