Skip to content
Last9 Last9
Book a Demo

Getting Started

Set up Last9's RUM SDK in your React or vanilla JavaScript application to start monitoring real user performance.

Before you can view performance data in the RUM dashboard, you need to integrate the RUM SDK into your web application. The SDK automatically collects Core Web Vitals and user interaction data without impacting your application’s performance.

Prerequisites

  1. Token: A Client — Web Browser token from Ingestion Tokens, read the docs for more details.
  2. Endpoint: A endpoint URL from the RUM integration page

Installation

React Applications

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

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

  2. Initialize RUM in your application’s entry point:

    useEffect(() => {
      // Initialize in your app's entry point
      L9RUM.init({
        headers: {
          clientToken: "your-client-token",
        },
        endpoint: "https://your-rum-endpoint",
        resourceAttributes: {
          serviceName: "your-app-name",
          deploymentEnvironment: "production",
          appVersion: "0.0.1",
        },
        sampleRate: 50,
      });
    }, []);

Vanilla JavaScript

  1. Add the SDK script and initialization to your HTML:

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

    <script>
      // Initialize RUM SDK
      L9RUM.init({
        headers: {
          clientToken: "your-client-token",
        },
        endpoint: "http://your-rum-endpoint",
        resourceAttributes: {
          serviceName: "your-app-name",
          deploymentEnvironment: "production",
          appVersion: "0.0.1",
        },
        sampleRate: 60,
      });
    </script>

Configuration Options

Required Settings

These settings are mandatory for the RUM SDK to function:

  • headers.clientToken: Your client authentication token
  • endpoint: Your RUM endpoint URL
  • resourceAttributes.serviceName: Name of your application or service
  • resourceAttributes.deploymentEnvironment: Environment identifier (e.g., ‘production’, ‘staging’, ‘development’)
  • resourceAttributes.appVersion: Version identifier (e.g., ‘1.2.3’, git commit hash)

Optional Settings

  • sampleRate: Percentage of user sessions to monitor (1-100, default: 40)

    Choose your sample rate based on environment and traffic volume:

    Production Environments

    • High Traffic (>10k daily users): 1-10% to manage data volume and costs
    • Medium Traffic (1k-10k daily users): 10-25% for good coverage
    • Low Traffic (<1k daily users): 25-50% for comprehensive insights

    Non-Production Environments

    • Staging: 50-100% for thorough testing before releases
    • Development: 100% for debugging and optimization

  • name: Root trace name (default: “View”)

Automatic Data Collection

Once initialized, the RUM SDK automatically collects:

Browser and Device Information

  • User agent, browser name and version
  • Device type (desktop, mobile, tablet)
  • Screen dimensions and viewport size
  • Touch screen capability
  • Browser language and platform

Network Information

  • Connection type (4g, 3g, etc.)
  • Effective connection speed

Page Context

  • Entry page URL, path, and referrer
  • Page hostname and search parameters
  • Hash fragments and route information

Core Web Vitals

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

Each metric includes detailed attribution data to help you understand performance bottlenecks.

Verification

After implementing the SDK, verify it’s working correctly:

  1. Check Browser Console: Look for any RUM SDK initialization errors
  2. Network Tab: Verify traces are being sent to your Last9 RUM endpoint
  3. RUM Dashboard: Visit https://app.last9.io/rum and confirm data appears within a few minutes

Next Steps

With the RUM SDK installed and configured, you’re ready to start analyzing your application’s performance. Head over to the Using RUM doc to learn how to navigate the dashboard and interpret your performance data.

Troubleshooting

No Data Appearing:

  • Verify your clientToken and endpoint are correct
  • Check browser console for JavaScript errors
  • Ensure your sample rate isn’t too low

Missing Web Vitals:

  • Some metrics only appear after user interactions (like INP)
  • LCP requires visible content elements
  • Check that your pages have sufficient content to trigger measurements

High Data Volume:

  • Reduce your sample rate in production environments
  • Consider filtering specific pages or user segments

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