RUM Quickstart Guide

Get started with Real User Monitoring in less than 5 minutes.

Step 1: Create an Observability App

Navigate to Dashboard → Observability → Apps
Click "Create App"
Fill in the details:
- Name: My Website
- Type: Frontend (RUM)
- Domains: example.com, www.example.com (comma-separated)
Click "Create"
Copy your API Key (shown once)

Step 2: Install the RUM SDK

Add to your <head>:

<script>
(function(w,d,s,r,k,a){
  w.StatusRadarRUM=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)};
  a=d.createElement(s);a.async=1;a.src='https://cdn.statusradar.dev/rum/v1/rum.min.js';
  d.head.appendChild(a);
})(window,document,'script','rum');

rum('init', {
  apiKey: 'your-api-key-here',
  appId: 'your-app-id-here',
  endpoint: 'https://rum.statusradar.dev/v1/ingest'
});
rum('start');
</script>

Step 3: Verify Data Collection

Open your website in a browser
Navigate to Dashboard → Observability → Apps → [Your App]
You should see:
- Session count increasing
- Events appearing in real-time
- Core Web Vitals metrics

Configuration Options

Basic Configuration

rum('init', {
  apiKey: 'your-api-key-here',     // Required: Your app API key
  appId: 'your-app-id-here',       // Required: Your app ID
  endpoint: 'https://rum.statusradar.dev/v1/ingest', // Required

  // Optional settings
  sampleRate: 1.0,                  // 0.0-1.0 (1.0 = 100% of sessions)
  sessionTimeout: 1800000,          // 30 minutes
  trackInteractions: true,          // Track clicks
  trackConsole: true,               // Capture console logs
  trackErrors: true,                // Capture JS errors
  sessionReplay: false              // Enable session replay (see session-replay.md)
});
rum('start');

What Gets Tracked Automatically?

Page Load Events

DNS lookup time
TCP connection time
DOM parsing time
Resource loading time
Total page load time

Core Web Vitals

LCP (Largest Contentful Paint)
INP (Interaction to Next Paint)
CLS (Cumulative Layout Shift)
FCP (First Contentful Paint)
TTFB (Time to First Byte)

Navigation

Page views
SPA route changes
Back/forward navigation

Errors

JavaScript errors
Unhandled promise rejections
Resource load failures

Framework Integration

For React, Vue.js, Next.js, and other frameworks, add the RUM script to your main HTML template:

React (public/index.html)

<!DOCTYPE html>
<html>
  <head>
    <!-- Add RUM SDK -->
    <script>
    (function(w,d,s,r,k,a){
      w.StatusRadarRUM=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)};
      a=d.createElement(s);a.async=1;a.src='https://cdn.statusradar.dev/rum/v1/rum.min.js';
      d.head.appendChild(a);
    })(window,document,'script','rum');

    rum('init', {
      apiKey: '%REACT_APP_STATUSRADAR_KEY%',
      appId: '%REACT_APP_STATUSRADAR_APP_ID%',
      endpoint: 'https://rum.statusradar.dev/v1/ingest'
    });
    rum('start');
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Vue.js (public/index.html)

<!DOCTYPE html>
<html>
  <head>
    <!-- Add RUM SDK -->
    <script>
    (function(w,d,s,r,k,a){
      w.StatusRadarRUM=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)};
      a=d.createElement(s);a.async=1;a.src='https://cdn.statusradar.dev/rum/v1/rum.min.js';
      d.head.appendChild(a);
    })(window,document,'script','rum');

    rum('init', {
      apiKey: process.env.VUE_APP_STATUSRADAR_KEY,
      appId: process.env.VUE_APP_STATUSRADAR_APP_ID,
      endpoint: 'https://rum.statusradar.dev/v1/ingest'
    });
    rum('start');
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Next.js (pages/_document.js)

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <script dangerouslySetInnerHTML={{
          __html: `
            (function(w,d,s,r,k,a){
              w.StatusRadarRUM=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)};
              a=d.createElement(s);a.async=1;a.src='https://cdn.statusradar.dev/rum/v1/rum.min.js';
              d.head.appendChild(a);
            })(window,document,'script','rum');

            rum('init', {
              apiKey: '${process.env.NEXT_PUBLIC_STATUSRADAR_KEY}',
              appId: '${process.env.NEXT_PUBLIC_STATUSRADAR_APP_ID}',
              endpoint: 'https://rum.statusradar.dev/v1/ingest'
            });
            rum('start');
          `
        }} />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Verifying Installation

Browser Console

Check for RUM initialization:

console.log(window.StatusRadarRUM);
// Should output: { version: "1.0.0", sessionId: "...", ... }

Network Tab

Look for POST requests to rum.statusradar.dev/v1/ingest with:

Status code: 202 (Accepted)
Payload: Compressed event data

Dashboard

Navigate to Dashboard → Observability → Apps and verify:

✅ Sessions count > 0
✅ Events count > 0
✅ Last event timestamp recent

Common Issues

No data appearing in dashboard

Check domain whitelist: Ensure your domain is added to the app
Verify API key: Check browser console for authentication errors
Check CORS: Look for CORS errors in console
Verify endpoint: Ensure https://rum.statusradar.dev/v1/ingest is reachable

High event count

Events include: pageload, vitals, errors, clicks, console logs, network requests.

To reduce:

rum.configure({
  trackInteractions: false,  // Disable click tracking
  trackConsole: false,       // Disable console logs
  trackNetwork: false        // Disable network requests
});

Next Steps

Session Replay - Enable session recording
Custom Events - Track business metrics
Error Tracking - Set up error alerting
Quota Management - Monitor usage

On this page

Step 1: Create an Observability App
Step 2: Install the RUM SDK
Step 3: Verify Data Collection
Configuration Options
Basic Configuration
What Gets Tracked Automatically?
Page Load Events
Core Web Vitals
Navigation
Errors
Framework Integration
React (public/index.html)
Vue.js (public/index.html)
Next.js (pages/_document.js)
Verifying Installation
Browser Console
Network Tab
Dashboard
Common Issues
No data appearing in dashboard
High event count
Next Steps