Telemetry
Frontend reliability SQL recipe

Measure SPA Navigation Latency by Route

Compare typical and tail client-side navigation time by destination route and frontend release.

Intermediatefrontend_navigation_eventsReviewed 2026-07-28Tested with Apache DataFusion 45.2.0

Reviewed by the Telemetry product team on . SQL compatibility, event contract, synthetic output, and operational caveats. Editorial ownership

Question answered

Which destination routes have the slowest client-side navigation?

Server latency alone misses routing, data loading, hydration, and rendering work in a single-page application. Navigation-complete events preserve the user-visible duration.

Event contract

Fields the query expects

FieldTypeWhy it exists
timestamp_utcTimestampNavigation completion time.
destination_routeUtf8Stable destination route template.
releaseUtf8Frontend release identifier.
duration_msFloat64Time from navigation start to ready state.
statusUtf8success, failed, or abandoned.
DataFusion SQL

Copy the query

sql
SELECT
  destination_route,
  release,
  COUNT(*) AS navigations,
  approx_percentile_cont(duration_ms, 0.50) AS p50_ms,
  approx_percentile_cont(duration_ms, 0.95) AS p95_ms,
  100.0 * SUM(CASE WHEN status <> 'success' THEN 1 ELSE 0 END)
    / NULLIF(COUNT(*), 0) AS unsuccessful_pct
FROM frontend_navigation_events
WHERE timestamp_utc >= now() - INTERVAL '7 days'
GROUP BY destination_route, release
HAVING COUNT(*) >= 50
ORDER BY p95_ms DESC;

This read-only query is planned and executed against an empty typed table with Apache DataFusion 45.2.0. The deterministic sample output is synthetic and reviewed separately; validate field types, thresholds, and business definitions against your own data. Read the testing methodology.

Query result

p95 client navigation latency

Report navigation has a much wider tail and a higher unsuccessful share.

destination_routereleasenavigationsp50_msp95_msunsuccessful_pct
/reports/:idweb-1036407803,2103.13
/projects/:idweb-1031,8204101,4801.21

Synthetic example output. Run the query against your own event schema and thresholds before using it for operational decisions.

p95 client navigation latency: static chart of synthetic p95_ms values from the Measure SPA Navigation Latency by Route example result
Indexable SVG of the deterministic example output. Download it for an article, runbook, or design review with attribution.

Reproduce the example

Download the public fixture

The JSON bundle includes the typed event contract, illustrative input rows, exact SQL, expected output, review notes, and engine version. The CSV contains the displayed result.

How the SQL works

  1. 1The completion boundary should represent a route-specific ready state rather than only a URL change.
  2. 2p50 and p95 distinguish a generally slow route from an intermittent long tail.
  3. 3Failed and abandoned navigation stays beside latency so fast failures cannot make performance look healthy.

Edge cases to decide

  • Prefetching changes the work included in duration.
  • Background tabs distort browser timing and should be categorized.
  • Use route templates instead of identifiers or query strings.

Recommended dashboard

  • Grouped bars: p50_ms and p95_ms by route
  • Trend: p95_ms by release
  • Table: slowest safe navigation samples

Alert guidance

Alert when a high-volume route exceeds its reviewed p95 objective for complete buckets.

Read alert setup

Put the recipe to work

Related instrumentation and guides

Continue the analysis

Run it on real events

Create a table, adapt the fields, and save the result

Start free, send structured events, and use the query result as a chart, shared dashboard widget, or alert input.

Get an API key