Skip to content
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 . We checked the SQL syntax, required event fields, sample results, and limits on using the query. Who reviews this page

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 schema

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. We review the synthetic sample output separately. Check field types, thresholds, and counting rules 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
Download this SVG chart of the sample results for an article, runbook, or design review. Please credit Telemetry.

Reproduce the example

Download the sample data

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

How the SQL works

  1. 1Record completion when the route is ready to use. A URL change alone does not mean the page has finished loading.
  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 check

  • 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

Set up the events this query needs

Related instrumentation and guides

Continue the analysis

Run it on your 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