RUM quickstart

By the end of this guide you’ll have the RUM SDK installed in a web app, a session showing up in the dashboard, and you’ll know how to identify users and track custom actions.

1. Create a RUM application

Dashboard
API

RUM → Applications → New application.
Name: Web app (or whatever’s descriptive). Domain: https://app.example.com. Save.
The next screen shows the application_id and client_token — copy both. The client_token is public and ships in your bundle; the application_id is also public.

curl -X POST https://api.siteqwality.com/rum \
  -H "Authorization: Bearer $SITEQWALITY_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Web app",
    "domain": "https://app.example.com"
  }'

The response includes id (the application_id) and client_token.

2. Install the SDK

npm install @siteqwality/rum

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

await SiteQwalityRUM.init({
  applicationId: 'abc123',
  clientToken: 'pub_def456',
  service: 'web',
  version: '1.4.2',
  env: 'prod',
});

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

<script type="module" src="https://cdn.siteqwality.com/rum/v1/sdk.min.js"></script>
<script type="module">
  await SiteQwalityRUM.init({
    applicationId: 'abc123',
    clientToken: 'pub_def456',
    service: 'web',
    env: 'prod',
  });
</script>

For non-blocking install, use the async snippet pattern (queued calls before SDK load):

<script>
  window.SiteQwalityRUM = window.SiteQwalityRUM || { _q: [] };
  ['init', 'setUser', 'addError', 'addAction'].forEach(m => {
    window.SiteQwalityRUM[m] = (...args) => window.SiteQwalityRUM._q.push([m, args]);
  });
  window.SiteQwalityRUM.init({ applicationId: 'abc123', clientToken: 'pub_def456', env: 'prod' });
</script>
<script type="module" async src="https://cdn.siteqwality.com/rum/v1/sdk.min.js"></script>

This buffers init/setUser/etc. calls until the SDK loads, then replays them.

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.

RUM → Sessions — your session appears at the top with web vitals, page count, and error count.

curl https://api.siteqwality.com/rum/$APP_ID/sessions \
  -H "Authorization: Bearer $SITEQWALITY_API_KEY"

5. Identify users and track custom events

After login, identify the user:

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

For business events:

// Track a user action
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)

Minified JS errors aren’t very useful. Upload source maps so stacks resolve to original source — see Source maps how-to.

What’s next

Source maps Symbolicate stack traces in the dashboard.

Session filters Capture detailed sessions only when something interesting happens.

Session Replay Watch what users actually did.