Sentry 异常捕获原理：`onerror`、`unhandledrejection` 与 React Error Boundary 的整合

Sentry 异常捕获原理：onerror、unhandledrejection与 React Error Boundary 的整合

各位开发者朋友，大家好！今天我们来深入探讨一个在现代前端开发中非常关键的话题——异常捕获机制。尤其当我们使用像 Sentry 这样的监控工具时，理解底层原理不仅有助于我们更高效地调试问题，还能帮助我们在架构层面做出更合理的决策。

本文将围绕三个核心知识点展开：

1. 全局错误监听：window.onerror和window.addEventListener('unhandledrejection', ...)
2. React 中的 Error Boundary（错误边界）
3. 如何将 Sentry 与上述两种机制无缝整合

我们将从底层原理讲起，逐步过渡到实际代码示例，并最终给出一套完整的整合方案。全程不堆砌术语，只用清晰逻辑和真实可运行的代码来说明问题。

---

一、为什么需要异常捕获？

在浏览器环境中，JavaScript 是单线程执行的，一旦某个地方抛出未处理的异常（比如语法错误、网络请求失败、Promise 拒绝等），整个页面可能会崩溃或进入不可预测状态。对于用户来说，这可能是“白屏”、“按钮失效”甚至“数据丢失”。

因此，我们需要一套系统化的异常捕获策略：