关联前端与后端追踪

前端可观测性的最终目标，是生成一条单独的追踪链，将用户在 React 中的点击通过网络、API 处理器和服务调用，一直连接到导致响应缓慢的数据库查询。这种端到端追踪可以即时完成根因分析。

W3C TraceContext 规范定义了 traceparent 标头的格式：version-traceId-parentSpanId-flags。示例值如下：00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01。追踪 ID 会在整个分布式追踪中共享；父跨度 ID 会在每一跳发生变化。

OpenTelemetry fetch 插桩会自动将 traceparent 标头注入每个传出的 fetch 请求。该标头携带当前追踪 ID，以及作为父跨度的前端 fetch 跨度 ID，使后端能够创建与前端跨度关联的子跨度。

在服务器端，Node.js/Express 的 OpenTelemetry HTTP 插桩会读取传入的 traceparent 标头，并创建作为前端 fetch 跨度子跨度的跨度。追踪 ID 会得到保留，因此 Jaeger 或 Grafana Tempo 可以在一个瀑布视图中显示完整链路——浏览器跨度 → Express 跨度 → 数据库跨度。

在前端和后端都完成插桩后，请打开 Jaeger 或 Grafana Tempo 并搜索追踪 ID。您将看到完整的瀑布链路：顶部是 React 组件跨度，下方是 fetch 跨度，然后是 Express 路由处理器跨度，最后是数据库查询跨度——每个跨度都显示其持续时间和属性。

在 React 应用的所有跨度上使用 span.setAttribute('user.id', userId) 将 user.id 设置为属性。后端也执行相同操作。现在，您可以在可观测性后端中筛选特定用户 ID 的所有追踪，从而诊断某位客户报告的问题。

在页面加载时生成唯一的会话 ID，并将其设置为所有前端跨度上的 session.id。将它包含在请求标头中，以便后端也将其附加到后端跨度上。会话关联可以让您重建用户在单个会话中执行的完整操作序列。

Datadog 等商业工具可以原生地将 RUM 会话与 APM 追踪集成。Datadog RUM SDK 会将特定标头（X-Datadog-Trace-Id）注入 fetch 请求，后端的 Datadog APM SDK 会读取该标头，将 RUM 会话回放与分布式追踪关联起来——您可以同时观看会话回放并查看追踪。

假设某位用户投诉结账过程很慢。借助关联后的追踪，您可以在可观测性后端中按 user.id 搜索，找到结账追踪，并立即看到变慢的原因是一个耗时 900 毫秒、连接两个大表的数据库查询——仅靠前端指标无法发现这一点。

浏览器无法直接向 Jaeger 或其他后端发送追踪数据，因为存在 CORS 限制和凭据暴露风险。相反，请将 OpenTelemetry Collector 作为代理运行：配置 OTLPTraceExporter 将数据发送到您的 Collector 端点，再由 Collector 将数据分发到 Jaeger、Grafana Tempo 或其他后端。

前端追踪可能会无意中捕获敏感数据：URL 中的表单字段值、跨度属性中的 PII，以及标头中的会话令牌。请检查您的插桩，确保跨度属性中不包含敏感数据。谨慎使用 span.setAttribute，并在记录 URL 查询参数之前对其进行清理。

W3C TraceContext traceparent 标头的格式是什么？

关联前端和后端追踪可以让您端到端地了解完整的用户请求过程。W3C TraceContext traceparent 标头通过 OpenTelemetry 插桩，自动将浏览器 fetch 跨度与后端跨度连接起来。请使用 user.id 和 session.id 丰富所有跨度，以便进行有针对性的调试。使用 OpenTelemetry Collector 作为浏览器到后端的代理，避免 CORS 问题和凭据暴露。