React

Use the Last9 Web RUM SDK to monitor your React application. The SDK is built on OpenTelemetry and captures page loads, Core Web Vitals, network requests, JavaScript errors, and user interactions directly from your users’ browsers.

Prerequisites

• Client Token: A Client — Web Browser token from Ingestion Tokens. Create separate tokens for development (restricted to localhost origins) and production (restricted to your production domains).
• Applications Base URL: Your base URL from the Applications integration page.

Setup

1. Add the SDK script

   Add the RUM SDK script to the <head> section of your index.html (public/index.html for Create React App, index.html for Vite):

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

2. Initialize the SDK

   Initialize the SDK once in your root component:

   • JavaScript
   • TypeScript

   import { useEffect } from "react";
   
   function App() {
     useEffect(() => {
       L9RUM.init({
         baseUrl: "https://your-base-url",
         headers: {
           clientToken: "your-client-token",
         },
         resourceAttributes: {
           serviceName: "your-app-name",
           deploymentEnvironment: "production",
           appVersion: "1.0.0",
         },
       });
     }, []);
   
     return <>{/* Your app components */}</>;
   }
   
   export default App;

   The SDK ignores repeated init calls, so React Strict Mode running effects twice in development is safe.

3. Identify users (optional)

   L9RUM.identify({ id, email, name, fullName, roles }); // on login
   L9RUM.clearUser(); // on logout

Configuration

To configure sampling, error filtering, network tracking, backend trace correlation, and user interaction tracking, see the Web RUM SDK reference.

Verification

Run your application and load a few pages, then navigate to Discover > Applications and confirm data appears within 2-3 minutes.

The SDK samples 40% of sessions by default. While testing, set sampleRate: 100 in L9RUM.init so every session is captured.

If no data appears, set debug: true in L9RUM.init and check the browser console and the network tab for failed requests to your base URL. See Troubleshooting for common causes.