addEventListener回调内部错误如何实现顶层统一捕获处理？

为什么原有方案不生效 #

同步try...catch仅能捕获当前执行栈内同步抛出的错误，事件回调、定时器、Promise等异步逻辑的执行时机完全脱离了外层try...catch的同步执行上下文，因此无法被捕获，你提到的点击事件回调错误就属于这类场景。

完整的顶层错误处理结构需要覆盖以下4个维度 #

• 全局同步/异步宏任务错误捕获：使用window.onerror事件，可以覆盖同步执行错误、事件回调错误、setTimeout/setInterval回调错误等绝大多数常规场景，示例代码如下：

// 注意要尽早挂载，最好在入口逻辑执行前就注册
window.onerror = function(message, source, lineno, colno, error) {
  // 此处写统一处理逻辑：比如错误上报、用户提示
  alert(`捕获到错误：${error ? error.message : message}`);
  // 返回true可以阻止浏览器默认的控制台报错打印、页面报错提示
  return true;
};

• 未处理的Promise类错误捕获：Promise的reject、async/await抛出的未被catch处理的错误，不会触发window.onerror，需要单独注册window.onunhandledrejection事件捕获：

window.onunhandledrejection = function(event) {
  // 此处写统一处理逻辑
  alert(`捕获到未处理的异步错误：${event.reason?.message || event.reason}`);
  // 阻止浏览器默认行为
  event.preventDefault();
};

• 框架层错误兜底：如果使用React、Vue等前端框架，框架内部会封装错误处理逻辑，部分框架内抛出的错误不会冒泡到全局，需要使用框架提供的错误捕获接口做兜底：
  • React：使用ErrorBoundary错误边界组件捕获组件渲染阶段抛出的错误
  • Vue：注册app.config.errorHandler钩子捕获Vue组件生命周期、事件回调内抛出的错误
• 入口同步逻辑兜底：你原有的包裹入口的try...catch可以保留，用来捕获window.onerror挂载完成之前，入口初始化阶段抛出的同步错误，避免早期错误漏网。

内容的提问来源于stack exchange，提问作者Toxnyc