js如何全面监听同步与异步错误，并实现上报？

在复杂的Web应用开发中，健壮的错误处理机制是保证用户体验和系统稳定性的关键，JavaScript作为前端核心语言，提供了多种方式来监听和捕获运行时产生的错误，通过合理运用这些方法，开发者可以及时发现并定位问题，甚至将错误信息上报至服务器，从而持续优化产品,本文将系统性地介绍几种主流的JS错误监听技术。

全局错误捕获：window.onerror

window.onerror 是最传统也是最直接的全局错误监听器，它会在JavaScript运行时发生错误（如语法错误、类型错误等）时触发，通过给 window.onerror 赋值一个函数,我们可以捕获到大部分同步执行的脚本错误。

其基本用法如下：

window.onerror = function(message, source, lineno, colno, error) {
  // message: 错误信息字符串
  // source: 发生错误的脚本URL
  // lineno: 错误发生的行号
  // colno: 错误发生的列号
  // error: Error对象实例，包含更详细的错误堆栈
  console.log('捕获到错误:', {
    message,
    source,
    lineno,
    colno,
    stack: error ? error.stack : 'N/A'
  });
  // 返回 true 可以阻止浏览器默认的错误处理行为（如在控制台打印错误）
  return true;
};

尽管 window.onerror 很强大，但它存在一些局限性，例如无法捕获网络请求失败（如图片、脚本加载失败）和未处理的Promise rejection。

更全面的监听：window.addEventListener('error')

为了弥补 window.onerror 的不足，现代浏览器推荐使用 window.addEventListener('error', ...)，这个事件监听器不仅能捕获脚本运行时错误，还能捕获资源加载失败（如 <img>, <script>, <link> 等标签加载失败）。

window.addEventListener('error', function(event) {
  // event.message: 错误信息
  // event.filename: 错误源文件
  // event.lineno, event.colno: 错误行列号
  // event.error: Error对象
  // event.target: 触发错误的元素（对于资源加载错误非常有用）
  if (event.target) {
    // 这是一个资源加载错误
    console.error('资源加载失败:', event.target.src || event.target.href);
  } else {
    // 这是一个脚本运行时错误
    console.error('脚本运行时错误:', event.message);
  }
}, true); // 使用捕获阶段，确保能监听到所有子元素的错误

通过判断 event.target 是否存在，我们可以精准地区分是脚本错误还是资源加载错误,从而进行分类处理。

捕获未处理的Promise：unhandledrejection

随着Promise和async/await的普及，未处理的Promise rejection成为了一个常见的错误来源，这类错误不会被 window.onerror 或 error 事件捕获，为此，浏览器提供了 unhandledrejection 事件。

window.addEventListener('unhandledrejection', function(event) {
  // event.reason: Promise被reject的原因，通常是一个Error对象
  console.error('捕获到未处理的Promise rejection:', event.reason);
  // 可以在这里阻止错误在控制台显示
  // event.preventDefault();
});
// 示例：一个未被catch的Promise
Promise.reject('这是一个未处理的错误');

监听 unhandledrejection 事件是完善异步错误处理闭环的关键一步。

局部错误处理：try...catch

除了全局监听，try...catch 是JavaScript中最基础、最常用的局部错误处理结构，它允许我们包裹一段可能出错的代码，并在错误发生时执行特定的逻辑,而不会中断整个程序的运行。

try {
  // 可能出错的代码
  const result = JSON.parse(invalidJSONString);
} catch (error) {
  console.error('JSON解析失败:', error);
  // 可以在这里进行错误恢复或提示用户
} finally {
  // 无论是否出错，finally块中的代码总会执行
  console.log('清理工作完成');
}

try...catch 的主要优点是精确和可控，但它无法捕获异步代码（如 setTimeout、事件回调）中抛出的错误，除非这些异步代码本身被包裹在 try...catch 中。

为了更清晰地理解各种方法的适用场景,下表对它们进行了小编总结：

在实际应用中，最佳实践是组合使用这些方法，在业务逻辑的关键节点使用 try...catch 进行精细化控制，同时通过全局的 error 和 unhandledrejection 事件监听器作为兜底，捕获所有意料之外的错误，并将它们上报到日志系统,从而构建一个立体化的前端错误监控体系。

相关问答FAQs

Q1: try...catch 能捕获异步代码（如 setTimeout）中的错误吗？

A: 不能直接捕获。try...catch 只能捕获同步执行代码块中的错误，对于 setTimeout 或其他异步回调中抛出的错误，try...catch 块在异步代码执行时早已结束，要捕获这类错误，需要在异步回调函数内部再次使用 try...catch，或者依赖全局的 window.onerror 或 error 事件监听器。

Q2: 在生产环境中，监听到错误后应该做什么？

A: 应避免直接将错误详情暴露给普通用户，以免造成困惑或安全隐患，最佳实践是：1）在控制台记录详细的错误信息，方便开发者调试，2）通过一个统一的接口将错误信息（包括错误类型、消息、堆栈、用户浏览器信息、页面URL等）上报到后端日志服务器，3）可以给用户一个友好的提示，如“页面出现异常，请刷新重试”,以提升用户体验。