JavaScript 异常捕获：Sentry 深度解析（三）

2024-02-20 22:42:40

在深入剖析了 fetch 和 XHR 异常捕获机制之后，我们继续将目光投向 JavaScript 异常是如何在 Sentry 中得到捕捉的。

细致解读 JavaScript 异常捕获

我们首先来看两段代码，理解 JavaScript 异常捕获的实现方式：

window.onerror = function (message, source, lineno, colno, error) {
  // 错误信息处理
};

addEventListener("error", function (event) {
  // 错误事件处理
});

当 JavaScript 引擎捕获到错误时，它会触发 window.onerror 全局函数。这个函数可以自定义，用于处理错误信息。此外，addEventListener("error") 事件监听器也可以用来捕获错误事件。

Sentry 的异常处理流程

Sentry 主要通过以下步骤捕获 JavaScript 异常：

初始化 Sentry： 在应用程序中初始化 Sentry SDK，指定项目和配置选项。
事件侦听： Sentry 会监听 window.onerror 和 addEventListener("error") 事件。
错误捕获： 当上述事件触发时，Sentry 会捕获错误信息，包括错误消息、堆栈跟踪和上下文数据。
数据处理： Sentry 会对错误数据进行处理，包括格式化、添加附加信息和发送到 Sentry 服务器。
错误上报： 错误数据会被发送到 Sentry 服务器，供进一步分析和处理。

理解不同的异常事件

根据不同的错误情况，JavaScript 异常捕获会触发以下事件：

window.onerror： 捕获 JavaScript 解析错误、运行时错误和未捕获的异步任务错误。
error 事件： 捕获资源加载错误、脚本加载错误和图像加载错误。
unhandledrejection 事件： 捕获未处理的 Promise 拒绝错误。

总结

JavaScript 异常捕获是 Sentry 监控的关键部分，它能够全面捕捉各种错误类型。通过对 window.onerror 和 addEventListener("error") 事件的监听，Sentry 可以有效地捕获错误信息，并将其上报到 Sentry 服务器进行进一步处理和分析。