自动插桩：网络请求追踪

欢迎回到第 10 章的学习。在上一节，我们学习了用户交互追踪。现在我们要学习自动插桩：网络请求追踪，这是追踪 API 调用的重要方式。

本节将学习：Fetch API 追踪、XMLHttpRequest 追踪、API 调用追踪、以及错误追踪。

Fetch API 追踪

Fetch API 追踪的作用是什么？ 追踪使用 Fetch API 发送的 HTTP 请求，了解 API 调用情况，识别慢请求，优化 API 性能。

如何追踪 Fetch API？ FetchInstrumentation 会自动追踪 Fetch API 调用，无需手动添加代码。

追踪的信息包括哪些呢？

第一个：请求URL。 请求的完整 URL。

第二个：请求方法。 HTTP 方法（GET、POST、PUT、DELETE等）。

第三个：请求头。 请求头信息（注意隐私保护）。

第四个：响应状态。 HTTP 状态码。

第五个：响应时间。 请求的响应时间。

配置代码：

import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';

const fetchInstrumentation = new FetchInstrumentation({
  enabled: true,
  ignoreUrls: [
    /\/static\//, // Ignore static resources
    /\/assets\//,
  ],
  propagateTraceHeaderCorsUrls: [
    /https?:\/\/api\.example\.com/, // Allows cross-domain transmissionTrace
  ],
  clearTimingResources: true,
});

XMLHttpRequest 追踪

XMLHttpRequest 追踪的作用是什么？ 追踪使用 XMLHttpRequest 发送的 HTTP 请求，兼容旧代码，提供完整的网络请求追踪。

如何追踪 XMLHttpRequest？ XMLHttpRequestInstrumentation 会自动追踪 XMLHttpRequest 调用，无需手动添加代码。

追踪的信息与 Fetch API 类似，包括请求URL、方法、状态码、响应时间等。

配置代码：

import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';

const xhrInstrumentation = new XMLHttpRequestInstrumentation({
  enabled: true,
  ignoreUrls: [
    /\/static\//,
    /\/assets\//,
  ],
  propagateTraceHeaderCorsUrls: [
    /https?:\/\/api\.example\.com/,
  ],
});

API 调用追踪

API 调用追踪的作用是什么？ 追踪前端应用的所有 API 调用，了解 API 使用情况，识别性能问题，优化 API 设计。

如何查看 API 调用追踪？ 在 Grafana Tempo 中查看 API 调用 Trace，分析 API 性能，识别慢 API 和错误 API。

API 调用追踪示例：

// FetchInstrumentation with XMLHttpRequestInstrumentation Auto tracking
// Tracking information includes：
// - solicitedURLand methods
// - Request headers and response status
// - Response times and error messages
// - Trace ID（Used to connect front and back ends）

错误追踪

错误追踪的作用是什么？ 追踪网络请求的错误，识别 API 错误模式，快速定位问题。

追踪的错误信息包括哪些呢？

第一个：错误类型。 网络错误、HTTP 错误、超时错误等。

第二个：错误消息。 错误的详细信息。

第三个：错误堆栈。 错误的堆栈追踪（如果有）。

第四个：请求上下文。 发生错误时的请求上下文。

错误追踪示例：

// Automatically track network request errors
// ranging：
// - 4xx/5xx HTTPwrongs
// - Network connection errors
// - Timeout error
// - CORSwrongs

本节小结

在本节中，我们学习了自动插桩：网络请求追踪：

第一个是 Fetch API 追踪。 追踪使用 Fetch API 发送的 HTTP 请求，了解 API 调用情况。

第二个是 XMLHttpRequest 追踪。 追踪使用 XMLHttpRequest 发送的 HTTP 请求，兼容旧代码。

第三个是 API 调用追踪。 追踪前端应用的所有 API 调用，了解 API 使用情况，优化 API 设计。

第四个是错误追踪。 追踪网络请求的错误，识别 API 错误模式，快速定位问题。

网络请求追踪流程： 自动插桩启用 → 追踪网络请求 → 收集请求数据 → 发送到 Collector → 在 Grafana 中可视化。

这就是自动插桩：网络请求追踪。通过网络请求追踪，我们可以全面了解前端应用的 API 调用情况。

在下一节，我们将学习自动插桩：错误捕获。学习如何捕获前端错误。