前后端追踪关联

欢迎回到第 10 章的学习。在上一节，我们学习了自定义业务事件追踪。现在我们要学习前后端追踪关联，这是实现端到端追踪的关键。

本节将学习：Trace ID 传播、W3C Trace Context、HTTP Header 传递、以及端到端追踪。

Trace ID 传播

Trace ID 传播的作用是什么？ 将前端的 Trace ID 传递到后端，实现前后端追踪数据的关联，构建完整的请求链路。

如何传播 Trace ID？ OpenTelemetry 会自动在 HTTP 请求头中添加 Trace Context，包括

traceparent

Header。

traceparent Header 格式：

traceparent: 00-{traceId}-{parentSpanId}-{traceFlags}

。这个 Header 包含了完整的追踪上下文信息。

自动传播： OpenTelemetry 的 Fetch 和 XMLHttpRequest 插桩会自动在请求头中添加追踪上下文，无需手动处理。

配置代码：

// FetchInstrumentation Automatically added traceparent Header
// No additional configuration required, automatic processing
const fetchInstrumentation = new FetchInstrumentation({
  propagateTraceHeaderCorsUrls: [
    /https?:\/\/api\.example\.com/, // Allows cross-domain transmissionTrace
  ],
});

W3C Trace Context

W3C Trace Context 是什么？ W3C 标准定义的追踪上下文传播格式，用于在 HTTP 请求中传播追踪信息。

W3C Trace Context 包括哪些内容呢？

第一个：traceparent Header。 包含 Trace ID、Parent Span ID、Trace Flags。

第二个：tracestate Header（可选）。 包含额外的追踪状态信息。

traceparent Header 格式：

traceparent: 00-{traceId}-{parentSpanId}-{traceFlags}

。

版本（00）： 版本号，当前是 00。
Trace ID： 32 字节的十六进制字符串，唯一标识追踪。
Parent Span ID： 16 字节的十六进制字符串，父 Span 的 ID。
Trace Flags： 1 字节的十六进制，包含采样标志等。

traceparent Header 示例：

traceparent: 00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01

HTTP Header 传递

HTTP Header 传递的作用是什么？ 通过 HTTP 请求头传递追踪上下文，后端接收并提取追踪上下文，创建子 Span，继续追踪。

如何验证传播？ 在浏览器开发者工具的 Network 面板中查看 HTTP 请求头，确认

traceparent

Header 是否存在。

HTTP 请求头示例：

GET /api/products HTTP/1.1
Host: api.example.com
traceparent: 00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01

后端提取 Trace ID：

// Spring Boot Automatic back-end extraction Trace ID
// OpenTelemetry The integration is handled automatically
@RestController
public class ProductController {
    @GetMapping("/api/products")
    public List<Product> getProducts() {
        // OpenTelemetry Automatic extraction traceparent Header
        // Create a child Span，Keep tracking
        return productService.getAllProducts();
    }
}

端到端追踪

端到端追踪的作用是什么？ 追踪从前端到后端的完整请求链路，了解请求在各个服务中的处理情况，识别性能瓶颈。

端到端追踪包括哪些阶段呢？

第一阶段：前端发起请求。 前端应用发起 HTTP 请求，OpenTelemetry 添加 traceparent Header。

第二阶段：后端接收请求。 后端服务接收请求，提取 traceparent Header，创建子 Span。

第三阶段：后端处理请求。 后端服务处理业务逻辑，调用数据库、其他服务等。

第四阶段：后端返回响应。 后端服务返回响应，前端接收响应。

如何查看端到端追踪？ 在 Grafana Tempo 中使用 Trace ID 查询，查看完整的请求链路，包括前端和后端的 Span。

端到端追踪示例：

本节小结

在本节中，我们学习了前后端追踪关联：

第一个是 Trace ID 传播。 将前端的 Trace ID 传递到后端，实现前后端追踪数据的关联。

第二个是 W3C Trace Context。 W3C 标准定义的追踪上下文传播格式，用于在 HTTP 请求中传播追踪信息。

第三个是 HTTP Header 传递。 通过 HTTP 请求头传递追踪上下文，后端接收并提取追踪上下文。

第四个是端到端追踪。 追踪从前端到后端的完整请求链路，了解请求在各个服务中的处理情况。

前后端追踪关联流程： 前端发起请求 → 添加 traceparent Header → 后端接收请求 → 提取追踪上下文 → 创建子 Span → 继续追踪 → 完整的端到端链路。

这就是前后端追踪关联。通过前后端追踪关联，我们可以实现完整的端到端可观察性。

在下一节，我们将学习 Core Web Vitals 监控。学习如何监控前端性能指标。