v150 · Performance

RUM Dashboard

Real User Monitoring for SPAs. Navigate between routes below. A PerformanceObserver collects every soft-navigation entry and feeds a per-route summary table — the same aggregate view an analytics SDK would compute before beaconing to a server.

Feature detection: checking…

Dashboard

Initial load — not a soft navigation

Per-Route Summary

Navigate above to populate. Green <500 ms · Amber 500–1000 ms · Red >1000 ms

Route Visits Avg duration Last Relative
No soft navigations yet — click a nav item

Analytics Beacon Log

What each soft navigation would send to an analytics endpoint

Waiting for navigations…
// Collect soft navigations with PerformanceObserver
const obs = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType !== 'soft-navigation') continue;

    const payload = {
      url:      entry.name,          // the URL after pushState
      startTime: entry.startTime,    // navigation start (ms from page load)
      duration:  entry.duration,     // ms to first contentful change
    };

    // Beacon to analytics endpoint (e.g. sendBeacon or fetch)
    navigator.sendBeacon('/analytics/soft-nav', JSON.stringify(payload));
  }
});
obs.observe({ type: 'soft-navigation', buffered: true });

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗