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)
});

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

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
Geographic Location: Available location data when permitted
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.
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
Best Practices: Optimize your monitoring setup and analysis workflow

Troubleshooting

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