La medición de un navegador cruza un límite controlado
El navegador nunca recibe una clave de ingesta ni elige una tabla de destino. Su servidor valida la pequeña carga útil antes de reenviar un evento analítico.
- 1
Medida
Recopile un Web Vital incluido en la lista permitida o un resultado de interfaz limitado después del consentimiento.
- 2
Validar
Aplique reglas de origen, tamaño, velocidad, campo, ruta y rango numérico.
- 3
Adelante
Utilice la clave del lado del servidor y un contrato de evento controlado.
- 4
Revisión
Consulta muestras y publica tendencias con volumen junto a cada agregado.
Antes de empezar
Requisitos previos y límites
- Un punto final de servidor del mismo origen que puede mantener privada la clave API Telemetry
- Una lista de permitidos para nombres de eventos, campos, nombres de métricas, plantillas de ruta y rangos numéricos
- Comportamiento documentado de consentimiento, muestreo, retención y eliminación para mediciones del navegador
Configuración de entrega
Instalar e inicializar el lado del servidor
Importe telemetry-sh en código solo de servidor e inicialícelo una vez con Process.env.TELEMETRY_API_KEY. Mantenga las credenciales de ingesta fuera de los paquetes de navegador, las variables de entorno visibles para el cliente, el control de fuente, los registros y los mensajes de excepción.
Instalación npm
npm install telemetry-sh- 1Prepare un cliente de entrega del lado del servidor reutilizable con comportamiento de red limitado.
- 2Agregue el evento de resultado en el límite de éxito, error, reintento o tiempo de espera.
- 3Envíe accesorios controlados e inspeccione las filas almacenadas antes de habilitar una alerta.
Fragmento
Comience con un evento estructurado
Agregue esta forma donde el flujo de trabajo se completa, falla o se vuelve a intentar. Luego cree el panel a partir de campos reales.
Evento Browser JavaScript and Web Vitals Telemetry
// Browser: post only allowlisted measurements to your own origin.
function reportMetric(metric) {
navigator.sendBeacon("/api/browser-telemetry", JSON.stringify({
event_name: "browser_performance_observed",
metric_name: metric.name,
metric_value: metric.value,
metric_id: metric.id,
route_template: routeTemplateFor(location.pathname),
release: window.__APP_RELEASE__,
navigation_type: metric.navigationType,
}));
}
// Server: validate origin, size, rate, names, fields, and numeric ranges first.
await telemetry.log("browser_performance_observed", validatedMetric);Contrato de evento
metric_name, metric_value, metric_id, route_template y versión
navigation_type, device_category, muestreado, consent_state y entorno
Sin URL sin formato, cadena de consulta, texto DOM, valor de formulario, cookie, identificador de referencia ni nombre de tabla proporcionado por el cliente
Puntos de control de implementación
Punto de control 1
Envíe una pequeña carga útil incluida en la lista permitida a su propio origen; valide el origen, el tipo de contenido, el tamaño del cuerpo, la tasa, el nombre del evento, los campos y los rangos antes de reenviar.
Punto de control 2
Utilice plantillas de ruta en lugar de location.href y aplique reglas de consentimiento o exclusión voluntaria antes de que el navegador envíe cualquier medición.
Punto de control 3
sendBeacon y keepalive fetch son el mejor esfuerzo. Mantenga el recuento de muestras junto a los percentiles y nunca trate la entrega del navegador como un libro de contabilidad exacto.
Verificación
Demuestra que el evento llegó
Ejecute esto después de ejercitar casos conocidos de éxito y fracaso. Reemplace el nombre de la tabla alternativa si su contrato de evento final difiere del fragmento.
Consulta de verificación Browser JavaScript and Web Vitals Telemetry
SELECT *
FROM browser_performance_observed
ORDER BY timestamp_utc DESC
LIMIT 20;Referencias de implementación
Revise el contrato del evento, la guía de seguridad de los datos y la documentación primaria previa antes de habilitar una nueva ruta de producción.
Límite de producción
Mantenga el evento de resultado pequeño y recuperable
Este patrón proporciona
- Un resultado limitado y listo para SQL junto al flujo de trabajo ascendente.
- Campos estables para paneles, alertas y correlación entre eventos.
- Una ruta basada en dispositivos para validar el comportamiento de éxito, fracaso, reintento y tiempo de espera.
Este patrón no proporciona
- Un exportador de OTLP, un canal de recopilación automática o un reemplazo para seguimientos detallados y registros de diagnóstico.
- Entrega exactamente una vez simplemente porque la carga útil contiene un ID de evento.
- Permiso para recopilar cargas útiles sin procesar del proveedor, contenido de usuario, credenciales o datos regulados.
Puntos de partida del esquema de eventos
Contratos de eventos para este flujo de trabajo
Revise el detalle de la fila, el límite de emisión, los tipos requeridos, las clases de privacidad, la carga útil de ejemplo y la lista de verificación de validación antes de adaptar una consulta o fragmento a producción.
Función relacionada del producto
Continúe este flujo de trabajo en Alertas
Promueva la consulta de confiabilidad revisada a un umbral propio y un flujo de trabajo de respuesta.
Recetas SQL relacionadas
Responde la siguiente pregunta con SQL
Ejecute la consulta en los campos estructurados de este flujo de trabajo, inspeccione el resultado del ejemplo y convierta una respuesta útil en un panel o alerta.
Compare Core Web Vitals por ruta y lanzamiento
¿Qué ruta y versión tiene el rendimiento frontend más débil?
Receta abiertaClasificar los errores JavaScript por ruta y versión
¿Qué ruta y versión de interfaz produce el mayor impacto del error JavaScript?
Receta abiertaMedir la latencia de navegación SPA por ruta
¿Qué rutas de destino tienen la navegación del lado del cliente más lenta?
Receta abiertaCalcular la tasa de tareas largas del navegador por ruta
¿Qué rutas y versiones pasan más tiempo en tareas largas del navegador?
Receta abiertaEncuentre recursos de interfaz lenta por host
¿Qué hosts y tipos de recursos ralentizan o fallan en la carga de las páginas?
Receta abiertaExplorar por familia de implementación
Comparar patrones de integración relacionados
Plantillas para combinar con esta integración
Más integraciones
Análisis de eventos del servidor Next.js
Envíe eventos listos para SQL desde controladores de ruta Next.js y acciones del servidor sin exponer una clave de ingesta al navegador.
abrir guiaTrabajador de Cloudflare Telemetry
Registre el estado de las solicitudes perimetrales, la latencia, las fallas del proveedor, las ejecuciones de cron y los trabajadores en cola de Cloudflare Workers.
abrir guia