Saltar al contenido
Telemetry
Fiabilidad frontal receta SQL

Medir la latencia de navegación SPA por ruta

Compare el tiempo de navegación típico y final del lado del cliente por ruta de destino y versión de interfaz.

Intermediofrontend_navigation_eventsRevisado 2026-07-28Probado con Apache DataFusion 45.2.0

Revisado por el equipo de producto Telemetry en . Compatibilidad con SQL, contrato de eventos, resultados sintéticos y advertencias operativas. Revisar los estándares y la propiedad

Pregunta respondida

¿Qué rutas de destino tienen la navegación del lado del cliente más lenta?

La latencia del servidor por sí sola impide el trabajo de enrutamiento, carga de datos, hidratación y renderizado en una aplicación de una sola página. Los eventos de navegación completa conservan la duración visible para el usuario.

Contrato de evento

Campos que espera la consulta

CampoTipoPor que existe
timestamp_utcTimestampHora de finalización de la navegación.
destination_routeUtf8Plantilla de ruta de destino estable.
releaseUtf8Identificador de versión de interfaz.
duration_msFloat64Tiempo desde el inicio de la navegación hasta el estado listo.
statusUtf8éxito, fracaso o abandono.
DataFusionSQL

Copiar la consulta

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;

Esta consulta de solo lectura se planifica y ejecuta en una tabla escrita vacía con Apache DataFusion 45.2.0. El resultado de la muestra determinista es sintético y se revisa por separado; valide tipos de campos, umbrales y definiciones comerciales con sus propios datos. Lea la metodología de prueba.

Resultado de la consulta

Latencia de navegación del cliente p95.

La navegación de informes tiene una cola mucho más amplia y una mayor proporción de errores.

destination_routereleasenavigationsp50_msp95_msunsuccessful_pct
/reports/:idweb-10364078032103,13
/projects/:idweb-103182041014801,21

Salida de ejemplo sintético. Ejecute la consulta con su propio esquema de eventos y umbrales antes de utilizarla para decisiones operativas.

p95 client navigation latency: gráfico estático de valores sintéticos de p95_ms del resultado del ejemplo Measure SPA Navigation Latency by Route
SVG indexable de la salida del ejemplo determinista. Descárguelo para ver un artículo, un runbook o una revisión de diseño con atribución.

Reproducir el ejemplo

Descargar el accesorio público

El paquete JSON incluye el contrato de evento escrito, illustrative filas de entrada, SQL exacto, resultado esperado, notas de revisión y versión del motor. El CSV contiene el resultado mostrado.

Cómo funciona el SQL

  1. 1El límite de finalización debe representar un estado listo específico de la ruta en lugar de solo un cambio de URL.
  2. 2p50 y p95 distinguen una ruta generalmente lenta de una cola larga intermitente.
  3. 3La navegación fallida y abandonada permanece junto a la latencia, por lo que las fallas rápidas no pueden hacer que el rendimiento parezca saludable.

Casos extremos para decidir

  • La captación previa cambia el trabajo incluido en la duración.
  • Las pestañas en segundo plano distorsionan la sincronización del navegador y deben clasificarse.
  • Utilice plantillas de ruta en lugar de identificadores o cadenas de consulta.

Panel recomendado

  • Barras agrupadas: p50_ms y p95_ms por ruta
  • Tendencia: p95_ms por lanzamiento
  • Tabla: ejemplos de navegación segura más lenta

Guía de alerta

Alerta cuando una ruta de gran volumen excede su objetivo p95 revisado para segmentos completos.

Leer configuración de alerta

Pon la receta a trabajar

Instrumentación y guías relacionadas.

Continuar el análisis

Ejecútelo en eventos reales.

Crea una tabla, adapta los campos y guarda el resultado.

Comience gratis, envíe eventos estructurados y utilice el resultado de la consulta como un gráfico, un widget de panel compartido o una entrada de alerta.

Obtén una clave API