demo · v151

RUM Aggregator

In production you'd beacon workerMatchedRouterSource / workerFinalRouterSource alongside each PerformanceResourceTiming entry. This page generates a synthetic session, beacons it locally, and renders the dashboard you'd build on the analytics side.

Synthetic data. Entries are generated with realistic latency curves for each source. Swap the generator for a real PerformanceObserver in your app — the rest of this dashboard is a working template.

session shape

120
15%
5%
20%

aggregate

total entries
—
cache hits
—
network served
—
matched ≠ final
—
p50 duration
—
p95 duration
—

sample entries

namematchedfinalduration

code

// Wire it up in your real app:
new PerformanceObserver((list) => {
  for (const e of list.getEntries()) {
    if (!e.workerMatchedRouterSource) continue;  // ignore non-SW
    beacon({
      name: e.name,
      matched: e.workerMatchedRouterSource,
      final:   e.workerFinalRouterSource,
      durationMs: e.duration,
    });
  }
}).observe({ type: "resource", buffered: true });

see also

implementation reference

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