JavaScript 事件机制怎么捕获全局未捕获的异常错误-js教程-PHP中文网

javascript前端异常捕获需配合使用window.onerror、window.addeventlistener('error')和unhandledrejection事件：前者捕获同步错误及部分异步错误，后者补全资源加载失败与promise拒绝，三者协同覆盖大部分场景。

javascript 事件机制怎么捕获全局未捕获的异常错误

JavaScript 中捕获全局未捕获的异常，主要靠两个核心事件：`window.onerror` 和 `window.addEventListener('error')`，再加上 Node.js 环境下的 `process.on('uncaughtException')`（但你问的是前端，所以聚焦浏览器）。它们分工不同，不能互相替代，需配合使用才能真正兜住大部分漏网错误。

用 window.onerror 捕获同步脚本错误和部分异步错误

这是最传统、兼容性最好的方式，能拿到错误消息、脚本 URL、行号、列号和错误对象：

它能捕获全局作用域中抛出的同步错误（比如 throw new Error('boom')）
也能捕获脚本加载失败（如 <script src="404.js"></script>）、图片加载失败等资源错误（但注意：资源错误不会传入 error 对象，只有前四个参数有值）
对 Promise 拒绝（Promise.reject()）默认不触发，除非没被 .catch() 或 try/catch 捕获且未监听 unhandledrejection

示例：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

window.onerror = function(message, source, lineno, colno, error) {
console.error('全局错误:', { message, source, lineno, colno, error });
return true; // 阻止默认错误提示（可选）
};

用 window.addEventListener('error') 补全资源加载类错误

`window.onerror` 对某些资源错误（尤其是跨域 script、img、link）可能拿不到详细信息（如行号为 0，错误对象为 null），这时 `error` 事件更可靠：

监听 `error` 事件可捕获所有未处理的资源加载失败（<img src="broken.jpg">、<script></script> 加载失败等）
事件对象是 ErrorEvent，可通过 event.target 判断出错元素（如 img、script）
注意：它不会触发同步 JS 抛出的错误（那是 `onerror` 的职责），也不包含 JS 错误堆栈

示例：

window.addEventListener('error', function(event) {
  if (event.target && event.target.src) {
    console.warn('资源加载失败:', event.target.tagName, event.target.src);
  }
}, true); // 推荐 useCapture=true，确保最早捕获

必须加上 unhandledrejection 才算真正兜住 Promise 错误

现代 JS 大量使用 Promise 和 async/await，未被 catch 的拒绝 Promise 是最常见的“静默崩溃”来源：

window.addEventListener('unhandledrejection') 专门为此设计
事件对象含 reason（拒绝原因，可能是 Error 实例或任意值）和 promise（被拒绝的 Promise 实例）
务必调用 event.preventDefault()，否则控制台仍会打印黄色警告（不影响执行，但干扰调试）

示例：

window.addEventListener('unhandledrejection', function(event) {
console.error('未处理的 Promise 拒绝:', event.reason, event.promise);
event.preventDefault(); // 关键：阻止控制台警告
});

小提醒：这些机制有局限，别指望 100% 覆盖

以下情况它们通常无能为力：

Web Worker 内部错误（需在 worker 内单独监听 self.onerror 或 self.addEventListener('error')）
iframe 中的脚本错误（受同源策略限制，跨域 iframe 无法捕获）
语法解析阶段错误（如 HTML 中内联 script 有语法错误，可能连事件监听器都注册不上）
某些极端情况下的内存溢出、栈溢出，JS 引擎可能直接终止而无机会派发事件

实际项目中，建议三者同时启用，并把错误上报到监控服务（如 Sentry、自建接口），再配合 source map 解析堆栈，才构成完整的前端异常捕获链。