如何捕获和处理javascript错误_有哪些调试技巧【教程】_技术教程

生产环境推荐优先使用 window.onerror，它更稳定、信息更全；Promise 拒绝必须单独监听 unhandledrejection；try/catch 仅适用于同步错误和 await 后立即抛出的错误。

全局错误捕获要用 `window.onerror` 还是 `window.addEventListener('error')`

两者都能捕获未处理的 JS 错误，但行为差异明显：window.onerror 能拿到 message、filename、lineno、colno 和 error 对象，而 addEventListener('error') 只能拿到事件对象，event.error 在某些浏览器（如旧版 Safari）中为 null。生产环境推荐优先使用 window.onerror，它更稳定、信息更全。

window.onerror 不会捕获 Promise 拒绝（需配合 unhandledrejection）
若同时注册两者，window.onerror 仍会触发，但 addEventListener('error') 对脚本加载失败（如 404 的 script）更敏感
注意：在 iframe 中，父页面无法直接捕获子页面的 JS 错误，除非子页面主动上报或同源且显式暴露 handler

Promise 错误必须监听 `unhandledrejection` 事件

未 catch 的 Promise 拒绝

不会触发 window.onerror，会被静默吞掉（Chrome 控制台会警告，但不会抛异常）。必须单独监听：

window.addEventListener('unhandledrejection', event => {
  console.error('Unhandled Promise rejection:', event.reason);
  // 上报逻辑：sendToMonitor({ type: 'unhandledrejection', reason: event.reason });
  event.preventDefault(); // 阻止默认控制台警告（谨慎使用）
});

event.reason 可能是 Error 实例，也可能是字符串或任意值（如 throw 'oops'）
不能靠 try/catch 包裹异步代码来捕获它——try/catch 对 Promise 内部拒绝无效
Vite / Webpack 开发环境下，HMR 可能触发假的 unhandledrejection，建议加简单过滤：if (event.reason && event.reason.constructor === Error)

`try/catch` 适合哪些场景？别在哪儿都硬套

try/catch 仅对同步代码和 await 后立即抛出的错误有效。它无法捕获：

定时器回调中的错误（setTimeout(() => { throw new Error() })）
事件处理器中未包裹的错误（btn.addEventListener('click', () => { riskyFn() })）
第三方库内部异步流程（如 Axios 请求失败默认不抛错，而是进 .catch）

真正该用 try/catch 的地方是：JSON 解析、localStorage 读写、正则构造、new Function() 等明确可能同步抛异常的操作。

try {
  const data = JSON.parse(localStorage.getItem('config'));
  render(data);
} catch (err) {
  if (err instanceof SyntaxError) {
    console.warn('Corrupted config in localStorage');
    localStorage.removeItem('config');
  }
}