Correlación de trazas del frontend y el backend

El objetivo último de la observabilidad del frontend es obtener una única traza que conecte el clic de un usuario en React con la red, los controladores de API, las llamadas entre servicios y, finalmente, la consulta a la base de datos que causó una respuesta lenta. Esta traza de extremo a extremo hace que el análisis de la causa raíz sea inmediato.

La especificación W3C TraceContext define el formato del encabezado traceparent: version-traceId-parentSpanId-flags. Un valor de ejemplo es: 00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01. El ID de traza se comparte en toda la traza distribuida; el ID del span principal cambia en cada salto.

La instrumentación de fetch de OTel inyecta automáticamente el encabezado traceparent en cada solicitud fetch saliente. El encabezado contiene el ID de traza actual y el ID del span de fetch del frontend como principal, lo que permite al backend crear un span secundario vinculado al span del frontend.

En el servidor, la instrumentación HTTP de OTel para Node.js/Express lee el encabezado traceparent entrante y crea spans que son secundarios del span de fetch del frontend. El ID de traza se conserva, por lo que Jaeger o Grafana Tempo muestran toda la cadena —span del navegador → span de Express → span de la base de datos— en una única vista de cascada.

Con el frontend y el backend instrumentados, abra Jaeger o Grafana Tempo y busque un ID de traza. Verá la cascada completa: el span del componente React en la parte superior, el span de fetch debajo, después el span del controlador de rutas de Express y, por último, el span de la consulta a la base de datos, todos con sus duraciones y atributos.

Establezca user.id como atributo en todos los spans de su aplicación de React mediante span.setAttribute('user.id', userId). Haga lo mismo en el backend. Ahora puede filtrar su backend de observabilidad para mostrar todas las trazas correspondientes a un ID de usuario específico, lo que le permite diagnosticar problemas informados por un cliente concreto.

Genere un ID de sesión único al cargar la página y establézcalo como session.id en todos los spans del frontend. Inclúyalo en los encabezados de las solicitudes para que el backend también lo adjunte a sus spans. La correlación por sesión permite reconstruir la secuencia completa de acciones que realizó un usuario durante una sesión.

Las herramientas comerciales como Datadog integran de forma nativa las sesiones de RUM con las trazas de APM. El SDK de RUM de Datadog inyecta un encabezado específico (X-Datadog-Trace-Id) en las solicitudes fetch, y el SDK de APM de Datadog en el backend lo lee para vincular la reproducción de la sesión de RUM con la traza distribuida; puede ver la reproducción de la sesión y la traza simultáneamente.

Considere el caso de un usuario que se queja de que el proceso de pago es lento. Con las trazas correlacionadas, busca por user.id en su backend de observabilidad, encuentra la traza del proceso de pago y ve inmediatamente que la ralentización se debió a una consulta de 900 ms a la base de datos que unía dos tablas grandes, algo invisible para las métricas del frontend por sí solas.

Los navegadores no pueden enviar trazas directamente a Jaeger u otros backends debido a las restricciones de CORS y a la exposición de credenciales. En su lugar, ejecute un OTel Collector como proxy: configure OTLPTraceExporter para que envíe los datos a su endpoint del Collector, que después los distribuirá a Jaeger, Grafana Tempo o cualquier otro backend.

Las trazas del frontend pueden capturar datos sensibles de forma involuntaria: valores de campos de formularios en las URL, PII en los atributos de los spans o tokens de sesión en los encabezados. Revise su instrumentación para asegurarse de que no se incluyan datos sensibles en los atributos de los spans. Use span.setAttribute con moderación y sanee los parámetros de consulta de las URL antes de registrarlos.

¿Cuál es el formato del encabezado traceparent de W3C TraceContext?

Correlacionar las trazas del frontend y del backend proporciona visibilidad de extremo a extremo en todo el recorrido de una solicitud del usuario. Los encabezados traceparent de W3C TraceContext conectan automáticamente los spans de fetch del navegador con los spans del backend mediante la instrumentación de OTel. Enriquezca todos los spans con user.id y session.id para realizar una depuración específica. Use un OTel Collector como proxy entre el navegador y el backend para evitar problemas de CORS y la exposición de credenciales.