17370845950

生产环境推荐优先使用 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');
  }
}

控制台调试时，debugger 和条件断点比 console.log 更可靠

console.log 容易污染输出、遗漏上下文、甚至改变执行逻辑（比如打印一个 Proxy 或 generator 会触发副作用）。真实调试应优先：

• 在关键行写 debugger，配合 Sources 面板单步、查看作用域、修改变量值
• 右键断点 → “Edit breakpoint” 设置条件，例如 user.id === 123，避免循环中反复中断
• Network 面板勾选 “Disable cache” + “Preserve log”，防止刷新丢失请求链路
• 遇到压缩代码报错（app.min.js:23:456），确认 Source Map 已正确加载（Sources 面板左侧显示原始文件名）

错误堆栈里出现 anonymous 或 ，大概率是箭头函数或未命名 IIFE，重命名函数或开启编译器的 functionNames 选项可改善可读性。