Getting Started with RUM

Real User Monitoring (RUM) tracks how your actual users experience your web application by collecting Core Web Vitals and performance data directly from their browsers. Get started by installing the RUM SDK in your application.

Prerequisites

Before installing the RUM SDK, you’ll need:

Client Token: A Client — Web Browser token from Ingestion Tokens. See our ingestion tokens documentation for setup details.
RUM Endpoint: Your endpoint URL from the RUM integration page.

Installation

React
Vanilla JavaScript

Add the RUM SDK script to your index.html file in the <head> section:

<script src="https://cdn.last9.io/rum-sdk/builds/1.3.7/l9.umd.js"></script>

Initialize RUM in your application’s main component (typically App.js or index.js):

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    L9RUM.init({
      endpoint: "https://your-rum-endpoint",
      headers: {
        clientToken: "your-client-token",
      },
      resourceAttributes: {
        serviceName: "your-app-name",
        deploymentEnvironment: "production",
        appVersion: "1.0.0",
      },
    });
  }, []);

  return (
    // Your app components
  );
}

Add the SDK script and initialization to your HTML file’s <head> section:

<!DOCTYPE html>
<html>
<head>
  <!-- Load the RUM SDK -->
  <script src="https://cdn.last9.io/rum-sdk/builds/1.3.7/l9.umd.js"></script>

  <script>
    // Initialize RUM SDK
    L9RUM.init({
      endpoint: "https://your-rum-endpoint",
      headers: {
        clientToken: "your-client-token",
      },
      resourceAttributes: {
        serviceName: "your-app-name",
        deploymentEnvironment: "production",
        appVersion: "1.0.0",
      },
    });
  </script>
</head>
<body>
  <!-- Your application content -->
</body>
</html>

Configuration

Required Configuration

These settings are mandatory for the RUM SDK:

L9RUM.init({
  endpoint: "https://your-rum-endpoint", // Your RUM endpoint URL
  headers: {
    clientToken: "your-client-token", // Client authentication token
  },
  resourceAttributes: {
    serviceName: "your-app-name", // Application identifier
    deploymentEnvironment: "production", // Environment (production, staging, development)
    appVersion: "1.0.0", // Version identifier (semver, git hash, etc.)
  },
});

Optional Configuration

Customize the RUM SDK behavior with these optional settings:

L9RUM.init({
  // Required settings...

  // Optional settings
  sampleRate: 40, // Percentage of sessions to monitor (1-100, default: 40)
  flushIntervalMs: 30000, // How often to send data in milliseconds (default: 30000)
  debug: false, // Enable console logging for troubleshooting (default: false)
  name: "View", // Root trace name (default: "View")
});

Sample Rate Guidelines

Choose your sample rate based on traffic volume and environment:

High Traffic (>10k daily users): 1-10% to manage data volume
Medium Traffic (1k-10k daily users): 10-25% for good coverage
Low Traffic (<1k daily users): 25-50% for comprehensive insights
Development/Staging: 50-100% for thorough testing

What Gets Collected

The RUM SDK automatically collects performance and context data without affecting your application’s performance:

Core Web Vitals

Largest Contentful Paint (LCP): Loading performance
First Contentful Paint (FCP): Initial rendering time
Cumulative Layout Shift (CLS): Visual stability
Interaction to Next Paint (INP): Responsiveness
Time to First Byte (TTFB): Server response time

User Context

Browser name, version, and user agent
Device type (desktop, mobile, tablet) and screen dimensions
Network connection type and speed
Geographic location (when available)

Page Information

Page URL, path, and referrer
Route changes in single-page applications
Load times and navigation timing
Resource loading performance

Verification

Confirm the RUM SDK is working correctly:

Check Browser Console: Look for RUM initialization messages (enable debug: true if needed)
Verify Network Requests: Open browser DevTools > Network tab and look for requests to your RUM endpoint
View RUM Dashboard: Visit the RUM Dashboard and confirm data appears within 2-3 minutes

Next Steps

With RUM successfully installed, you can now:

Explore the RUM Dashboard to analyze your performance data

Troubleshooting

No data appearing in dashboard:

Verify your clientToken and endpoint are correct
Check browser console for JavaScript errors
Ensure sample rate isn’t too low (try 100% temporarily)

Missing specific metrics:

Some metrics require user interactions (INP needs clicks/taps)
LCP requires visible content above the fold
Ensure pages have sufficient content to trigger measurements

Too much data:

Reduce sample rate for production environments
Consider implementing user segment filtering

Please get in touch with us on Discord or Email if you have any questions.