JavaScript 中事件捕获与冒泡怎么在全局 window 上捕获处理未捕获的错误事件-js教程-PHP中文网

JavaScript 的 error 和 unhandledrejection 事件不参与 DOM 事件流，只能在 window 上监听，无捕获/冒泡行为；useCapture 参数无效，且无法通过 document 或 iframe 父级兜底监听。

javascript 中事件捕获与冒泡怎么在全局 window 上捕获处理未捕获的错误事件

在 JavaScript 中，事件捕获与冒泡是 DOM 事件传播的两个阶段，但它们**不适用于错误事件（如 `error`、`unhandledrejection`）**。全局错误捕获与 DOM 事件流无关，不能通过 `window.addEventListener('error', ..., true)` 这类方式用“捕获阶段”来监听未捕获的运行时错误。

全局错误捕获靠专用事件，不是 DOM 冒泡/捕获

浏览器提供了专门用于捕获未处理错误的全局事件接口，和 DOM 事件传播机制完全独立：

`window.addEventListener('error')`：捕获同步脚本错误（如语法错误、引用错误、资源加载失败等），但仅对未被 try/catch 捕获的错误生效；它默认在冒泡阶段触发，设置 useCapture = true 无效（该事件不参与 DOM 事件流）。
`window.addEventListener('unhandledrejection')`：捕获未被 .catch() 或 try/catch await 处理的 Promise 拒绝。
两者都只能在 window（或 self）上监听，且没有捕获/冒泡行为——它们就是纯通知型事件。

正确监听全局错误的写法

直接绑定到 window，无需关心 useCapture 参数：

Java 接口排错助手

在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载

window.addEventListener('error', (event) => {
  console.error('JS Error:', {
    message: event.message,
    filename: event.filename,
    lineno: event.lineno,
    colno: event.colno,
    error: event.error // 可能为 null（如资源加载错误）
  });
});

window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled Rejection:', {
    reason: event.reason,
    promise: event.promise
  });
  event.preventDefault(); // 阻止默认控制台警告（可选）
});

注意边界情况

静态资源加载错误（如 img、script 404）会触发 error 事件，但 event.error 通常为 null，需依赖 event.target 判断来源。
跨域脚本错误（如 CDN 上的 JS 报错）受同源策略限制，message、lineno 等字段会被屏蔽为 "Script error."，需配置 crossorigin 属性并确保服务端返回 Access-Control-Allow-Origin。
iframe 内错误不会自动冒泡到父页面 window，需在 iframe 的 contentWindow 上单独监听（且受同源限制）。