Getting Started with Discover Applications

Discover Applications tracks how your users experience your web application by collecting Core Web Vitals, performance data, JavaScript errors, and user interactions directly from their browsers. The RUM SDK provides lightweight, non-blocking instrumentation that captures real-world application behavior without impacting performance.

Prerequisites

Before installing the RUM SDK, ensure you have:

Client Token: A Client — Web Browser token from Ingestion Tokens. This token authenticates your application’s data collection.
Applications Base URL: Your base URL from the Applications integration page. This endpoint receives your application’s monitoring data.

Supported Frameworks

The RUM SDK integrates with popular frontend stacks out of the box:

React
Angular
Vue
Next.js, with support for SSR

If you run into framework-specific issues or need guidance for another setup, reach out to the Last9 team and we’ll help you get started quickly.

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

<script src="https://cdn.last9.io/rum-sdk/builds/stable/v2/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({
      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
  );
}

Add user tracking (optional):

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

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/stable/v2/l9.umd.js"></script>

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

Add user tracking (optional):

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

Configuration

Required Configuration

These settings are mandatory for the RUM SDK to function:

L9RUM.init({
  baseUrl: "https://your-base-url", // Your Applications base 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 additional settings:

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

  // Optional settings
  sampleRate: 40, // Percentage of sessions to monitor (1-100, default: 40)
  debug: false, // Enable console logging for troubleshooting (default: false)

  // Control error tracking
  errors: {
    console: true, // Console errors (default: true)
    global: true, // Unhandled exceptions (default: true)
    report: true, // Browser reporting API (default: true)
    network: true, // Failed requests (default: true)
    ignorePatterns: [/ResizeObserver/i], // Regex patterns to ignore
    beforeSend: (event) => {
      // Filter or enrich errors before sending
      if (event.attributes["exception.message"]?.includes("ExpectedNoise")) {
        return null; // Drop this error
      }
      return event;
    },
  },

  // Backend trace correlation
  network: {
    backendCorrelation: {
      enabled: true,
      corsAllowedOrigins: ["https://api.internal.example"],
      customHeaders: { "x-app-name": "web-client" },
      injectToAllRequests: false,
    },
  },

  // Capture user interactions
  interactions: {
    enabled: true, // opt in explicitly
    trackClicks: true,
    trackScroll: true, // throttled; default 500ms
    trackKeyboard: false, // off by default for privacy
    trackForm: true, // focus/input on non-sensitive fields
    trackTouch: false,
    captureElementText: false, // trim to 100 chars when enabled
    selectorDepth: 3, // depth used for simple selectors
    throttleMs: 500,
  },
});

Sample Rate Guidelines

Choose your sample rate based on traffic volume and environment:

Traffic Level	Daily Users	Recommended Rate	Purpose
High Traffic	>10,000	1-10%	Manage data volume while maintaining statistical significance
Medium Traffic	1,000-10,000	10-25%	Balance coverage with data volume
Low Traffic	<1,000	25-50%	Maximize insights with comprehensive data collection
Development/Staging	Any	50-100%	Thorough testing and validation before production

User Interaction Tracking

Instrument real user actions as spans, attached to the active View:

enabled: Master toggle (default: false)
trackClicks, trackScroll, trackKeyboard, trackForm, trackTouch: Turn on specific interaction types (all default to false)
throttleMs: Minimum gap between scroll spans (default: 500ms)
captureElementText: Include element text up to elementTextMaxLength (default: false, 100 chars)
selectorDepth: Depth for building simple CSS selectors (default: 3)

Privacy defaults: keyboard tracking is off unless you opt in, sensitive form fields (password/credit-card/email, etc.) are skipped automatically, and captured element text is trimmed to the configured length.

Backend Trace Correlation

Connect frontend requests to backend services for end-to-end visibility. When enabled, the SDK adds W3C trace headers (traceparent/tracestate) to outbound requests, allowing you to see complete request flows from browser to backend.

network: {
  backendCorrelation: {
    enabled: true,
    corsAllowedOrigins: ["https://api.internal.example"], // Domains to include
    customHeaders: { "x-app-name": "web-client" }, // Additional headers
    injectToAllRequests: false, // Set true only if all APIs support it
  },
}

Start with same-origin APIs, then progressively add cross-origin domains after verifying they accept the headers. Enable debug: true to identify configuration issues.

Adding Custom Context

Global Attributes

Add business context to all monitoring data. Call L9RUM.spanAttributes() whenever context changes:

L9RUM.spanAttributes({
  "app.org_slug": "acme-corp",
  "feature.flag.beta_checkout": true,
});

// Clear attributes (e.g., on logout)
L9RUM.spanAttributes(null);

Note: Each call replaces all previous attributes, so always provide the complete set. These attributes become available as filters in the dashboard.

Custom Events

Track user actions and business events beyond standard page views:

L9RUM.addEvent("checkout_completed", {
  plan: "pro",
  amount: 99,
});

Events inherit session and view context automatically, making them easy to correlate with performance metrics and errors.

Manual Error Capture

Explicitly track handled exceptions to maintain visibility into recoverable failures:

try {
  await searchProducts(query);
} catch (error) {
  L9RUM.captureError(error, {
    handled: true,
    message: "search_query_timeout",
    query,
    page: 3,
  });
}

Manual captures default to handled: true. All errors — automatic and manual, pass through the errors.beforeSend hook for filtering.

Data Collection

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

Core Web Vitals

Largest Contentful Paint (LCP): Loading performance measurement for largest visible content element
First Contentful Paint (FCP): Initial rendering time for first visible content
Cumulative Layout Shift (CLS): Visual stability score measuring unexpected layout shifts
Interaction to Next Paint (INP): Responsiveness metric for user interactions
Time to First Byte (TTFB): Server response time from initial request

User Context

Browser Information: Name, version, and complete user agent string
Device Details: Type (desktop, mobile, tablet) and screen dimensions
Network Conditions: Connection type (4g, WiFi, etc.) and speed indicators
Geolocation: Country, region, city, IP, etc (from GeoJS enrichment when available)
User Identity: Name, email, role, and ID when provided via identify()

Page Information

Navigation Data: Page URL, path, referrer, and query parameters
Route Changes: Single-page application navigation and route transitions
Timing Metrics: Load times, navigation timing, and resource loading performance
Network Activity: API calls, resource loading, and network errors

Verification

Confirm the RUM SDK is working correctly:

Check Browser Console: Look for RUM initialization messages. Enable debug: true in your configuration to see detailed logging.
Verify Network Requests: Open browser DevTools > Network tab and look for requests to your Applications base URL. Successful requests indicate data is being sent.
Inspect API Calls: Confirm trace headers appear on backend requests if correlation is enabled.
View Applications Dashboard: Navigate to Discover > Applications and confirm data appears within 2-3 minutes of page loads.

Next Steps

With Applications monitoring successfully installed, explore the monitoring capabilities:

Performance Monitoring: Track Core Web Vitals, analyze page performance, and identify bottlenecks
Error Tracking: Monitor JavaScript exceptions and failed requests with detailed analysis
Session Analysis: Analyze user journeys and navigation patterns

Troubleshooting

No data showing? Verify your baseUrl and clientToken are correct. Check the browser console for initialization errors.
Trace headers missing? Confirm network.backendCorrelation.enabled is true and target domains are in corsAllowedOrigins.
Errors not appearing? Check that error toggles in the errors configuration are enabled and sampleRate is appropriate for your traffic.

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