Skip to content
Site Qwality Site Qwality Site Qwality Docs

RUM quickstart

1. Create a RUM application

Section titled “1. Create a RUM application”

  1. Go to Observe → RUM. Without an application yet, the setup wizard opens; otherwise click Add application.

  2. Name it Web app, set Domain (optional) to app.example.com and click Create application.

  3. Copy the application ID and the client token shown with the install snippet. Both are public and ship in your bundle.

2. Install the SDK

Section titled “2. Install the SDK”

If your site sets a Content Security Policy, allow the SDK’s hosts first; see CSP and intake endpoints.

Terminal window
npm install @siteqwality/rum
// In your app's entry point, before any user code
import { SiteQwalityRUM } from '@siteqwality/rum';


SiteQwalityRUM.init({
  applicationId: 'abc123',
  clientToken: 'pub_def456',
  // version: '1.4.2', // your release; enables source-mapped stack traces
});

For React/Vue/Svelte, init in the entry file (main.ts/main.js) before mounting the root component.

init() starts collection inside the call. Do not await the Promise it returns: it settles only once the remote config is applied or fails to load, so awaiting it delays your app.

With the npm package, calls made before init() (setUser, addError and the rest) are ignored, so call init() first. The CDN snippet queues them instead.

If your site needs consent before tracking, pass trackingConsent: 'pending' and call SiteQwalityRUM.setTrackingConsent('granted') once the visitor agrees. Nothing is sent until then. See consent and browser signals.

3. Open the app

Section titled “3. Open the app”

Load your app in a fresh browser. The SDK starts a session immediately and posts the first batch within ~10 seconds.

4. See it in the dashboard

Section titled “4. See it in the dashboard”

In RUM → Sessions, your session appears at the top. In the setup wizard, Verify data shows Receiving data once the first page view lands.

If nothing shows up after a minute, check that:

  • The CDN snippet sits in the page’s <head>, or init() runs in your app’s entry point.
  • Your Content Security Policy allows https://cdn.siteqwality.com in script-src and connect-src, and https://in.siteqwality.com and https://in-replay.siteqwality.com in connect-src.
  • Consent is granted, if you passed trackingConsent: 'pending'. SiteQwalityRUM.getStatus() in the browser console shows the consent state and what the SDK dropped.
  • No ad blocker is blocking those hosts in your test browser.
  • The client token belongs to this application.

5. Identify users and track custom events

Section titled “5. Identify users and track custom events”

After login, identify the user:

SiteQwalityRUM.setUser({
  id: 'usr_abc123',
  email: 'alice@example.com',
  name: 'Alice',
});

Session search then finds the session by any part of the ID or email.

For business events:

// Track a custom event
SiteQwalityRUM.addAction('checkout_completed', { variant: 'A' });


// Track a manual error (in addition to auto-captured ones)
try {
  await chargeCard();
} catch (err) {
  SiteQwalityRUM.addError(err, { feature: 'checkout', step: '3' });
  throw err;
}

6. Set up source maps (production)

Section titled “6. Set up source maps (production)”

Upload source maps so minified stacks resolve to original source. See the Source maps how-to.

Set version in init() and change it on every deploy: errors carry it, and errors without a Debug ID match source maps by it, so keep it identical to the release you upload them to.

What’s next

Section titled “What’s next”
Recording rules Capture detailed sessions only when something interesting happens.
Session Replay Watch what users actually did.

Privacy Cookie preferences