自动插桩：错误捕获

欢迎回到第 10 章的学习。在上一节，我们学习了网络请求追踪。现在我们要学习自动插桩：错误捕获，这是前端错误监控的重要组成部分。

本节将学习：JavaScript 错误、Promise 拒绝、资源加载错误、以及错误堆栈追踪。

JavaScript 错误捕获

JavaScript 错误捕获的作用是什么？ 自动捕获 JavaScript 运行时错误，记录错误信息，帮助快速定位和修复问题。

如何捕获 JavaScript 错误？ ErrorsInstrumentation 会自动捕获 JavaScript 错误，无需手动添加代码。

捕获的错误信息包括哪些呢？

第一个：错误类型。 错误的类型（TypeError、ReferenceError、SyntaxError等）。

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

第三个：错误堆栈。 错误的堆栈追踪，显示错误发生的位置。

第四个：错误上下文。 发生错误时的页面URL、用户操作等上下文信息。

配置代码：

import { ErrorsInstrumentation } from '@opentelemetry/instrumentation-errors';

const errorsInstrumentation = new ErrorsInstrumentation({
  enabled: true,
  ignoreUrls: [], // overlooksURLpatterns
  maxStackSize: 50, // Max stack depth
});

Promise 拒绝捕获

Promise 拒绝捕获的作用是什么？ 捕获未处理的 Promise 拒绝，识别异步错误，防止错误被忽略。

如何捕获 Promise 拒绝？ ErrorsInstrumentation 会自动捕获未处理的 Promise 拒绝，无需手动添加代码。

捕获的信息包括哪些呢？

第一个：拒绝原因。 Promise 被拒绝的原因。

第二个：拒绝堆栈。 拒绝发生时的堆栈追踪。

第三个：Promise 上下文。 Promise 创建时的上下文信息。

Promise 拒绝示例：

// unaddressed Promise Rejections are automatically caught
fetch('/api/users')
  .then(response => {
    if (!response.ok) {
      throw new Error('API request failed');
    }
    return response.json();
  });
// If it's not here .catch()，Errors are automatically caught

资源加载错误捕获

资源加载错误捕获的作用是什么？ 捕获资源加载失败的错误，识别资源问题，优化资源加载策略。

如何捕获资源加载错误？ ErrorsInstrumentation 会自动捕获资源加载错误，包括图片、脚本、样式表等资源的加载失败。

捕获的信息包括哪些呢？

第一个：资源类型。 失败的资源类型（图片、脚本、样式表等）。

第二个：资源URL。 失败的资源URL。

第三个：错误原因。 资源加载失败的原因（404、网络错误等）。

资源加载错误示例：

// Resource loading errors are automatically caught
// ranging：
// - Image failed to load（404、network error）
// - Script failed to load
// - Stylesheet failed to load
// - Font failed to load

错误堆栈追踪

错误堆栈追踪的作用是什么？ 提供错误发生的完整路径，帮助开发者快速定位问题源头。

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

第一个：函数调用链。 从错误发生点到调用起点的完整函数调用链。

第二个：文件位置。 每个函数调用所在的文件和行号。

第三个：变量值。 关键变量的值（如果可用）。

错误堆栈追踪示例：

// Error stack trace example
// Error: Cannot read property 'name' of undefined
//     at UserProfile.render (UserProfile.js:25:15)
//     at ReactDOM.render (react-dom.js:12345:67)
//     at App.render (App.js:10:5)

本节小结

在本节中，我们学习了自动插桩：错误捕获：

第一个是 JavaScript 错误捕获。 自动捕获 JavaScript 运行时错误，记录错误信息，帮助快速定位问题。

第二个是 Promise 拒绝捕获。 捕获未处理的 Promise 拒绝，识别异步错误，防止错误被忽略。

第三个是资源加载错误捕获。 捕获资源加载失败的错误，识别资源问题，优化资源加载策略。

第四个是错误堆栈追踪。 提供错误发生的完整路径，帮助开发者快速定位问题源头。

错误捕获流程： 自动插桩启用 → 捕获错误事件 → 收集错误信息 → 发送到 Collector → 在 Grafana 中可视化。

这就是自动插桩：错误捕获。通过错误捕获，我们可以及时发现和修复前端应用的问题。

在下一节，我们将学习手动插桩：自定义业务事件。学习如何创建自定义 Span。