Monitor single page applications

Overview

Previously, the Splunk RUM browser agent only captured page load times for the initial document load or refresh. When the URL changed without a full page reload—common in single-page applications (SPAs)—the agent emitted spans with zero duration for these route changes (also called virtual pages). This limited visibility into SPA performance.

With the enhancements in version 2.2.0, the Splunk RUM browser agent now:

• Automatically detects route changes in SPAs and captures route change load times (if enabled in your Splunk RUM browser agent configuration).
• Consistently surfaces route change durations across features, including Tag Spotlight, dashboards, alerts, MMS metrics, and the new Pages List View.
• Emits a new Page Complete Time (PCT) metric that measures the load time of a route change based on defined heuristics.

Enabling PCT metric collection ensures every route-change span has a non-zero duration representing how long the page took to load.

Configuration

To enable this feature, update your Splunk RUM browser agent configuration as follows:

Option 1: Enable with defaults

JAVASCRIPTCopy

import SplunkRum from '@splunk/otel-web' SplunkRum.init({ realm: 'your-splunk-realm', rumAccessToken: 'your-splunk-rum-token', applicationName: 'your-application-name', spaMetrics: true, })

import SplunkRum from '@splunk/otel-web'

SplunkRum.init({
  realm: 'your-splunk-realm',
  rumAccessToken: 'your-splunk-rum-token',
  applicationName: 'your-application-name',
  spaMetrics: true,
})

Option 2: Enable with custom configuration

For parameter descriptions, see spaMetrics settings.

JAVASCRIPTCopy

import SplunkRum from '@splunk/otel-web' SplunkRum.init({ realm: 'your-splunk-realm', rumAccessToken: 'your-splunk-rum-token', applicationName: 'your-application-name', spaMetrics: { quietTime: 3000, maxResourcesToWatch: 50, ignoreUrls: [/analytics/], }, })

import SplunkRum from '@splunk/otel-web'

SplunkRum.init({
  realm: 'your-splunk-realm',
  rumAccessToken: 'your-splunk-rum-token',
  applicationName: 'your-application-name',
  spaMetrics: {
    quietTime: 3000,            
    maxResourcesToWatch: 50, 
    ignoreUrls: [/analytics/], 
  },
})

How Splunk RUM calculates PCT

PCT measures the total time from the start of a page navigation or route change until all visible content has fully rendered and all associated network requests complete, regardless of viewport visibility.

The calculation follows these steps:

1. Detect page navigation or route change and record a start timestamp.
2. Observe media elements (images, videos) added to the DOM, attaching load event listeners to record their load times relative to the start timestamp.
3. Monitor network requests (XHR, fetch, resources) and record their load times relative to the start timestamp.
4. Wait for a quiet period (default 5000 ms) with no new media or network activity to ensure all significant content has loaded.
5. Calculate PCT as the maximum load time among all observed media and network requests.

Troubleshooting

• Ensure you're using Splunk RUM browser agent version 2.2.0 or later.
• Confirm that spaMetrics is enabled in your Splunk RUM browser agent configuration.
• Monitor for any network or media resources that may stall loading, as this can delay PCT calculation.