生产环境推荐优先使用 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() 等明确可能同步抛异常的操作。
立即学习“Java免费学习笔记(深入)”;
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 选项可改善可读性。











