try...catch仅能捕获同步错误，无法捕获异步错误、未处理Promise拒绝、资源加载失败等；需配合window.addEventListener('error')、'unhandledrejection'及元素error事件实现分层兜底。
单纯靠 try...catch 捕获同步代码错误远远不够，它对异步错误、全局未捕获异常、资源加载失败、Promise 拒绝等完全无能为力。
哪些错误 try...catch 根本抓不到
这是最容易被忽略的前提：它只包裹同步执行路径。一旦跳出当前调用栈，就失效了。
-
setTimeout或setInterval中抛出的错误 -
Promise内部reject且未调用.catch()或await的情况 -
fetch请求失败但没检查response.ok，或网络中断触发的TypeError -
加载失败时的error事件 - 跨 iframe 脚本错误（受同源策略限制，通常只能捕获到
Script error.）
必须配合的全局错误监听机制
要真正兜底，得靠浏览器提供的两个全局钩子，它们能捕获 try...catch 完全覆盖不到的场景。
捕获同步/异步未处理错误：
立即学习“Java免费学习笔记（深入）”；
window.addEventListener('error', (event) => {
console.error('全局 JS 错误:', event.error);
// 注意：event.error 可能为 null，此时需从 event.message/event.filename 推断
});
捕获 Promise 拒绝且未处理的情况：
window.addEventListener('unhandledrejection', (event) => {
console.error('未处理的 Promise 拒绝:', event.reason);
event.preventDefault(); // 阻止默认控制台警告（可选）
});
- 两者都必须在应用启动早期注册，越早越好（比如入口 JS 第一行）
-
unhandledrejection的event.reason可能是Error实例，也可能是字符串或任意值 - 不要依赖
event.error.stack—— 在某些拒绝场景下它为空
Promise 错误不能只靠 try...catch 包裹 await
很多人以为 try...catch + await 就万事大吉，但漏掉了两种典型漏网之鱼：
- Promise 构造函数内部抛错（如
new Promise(() => { throw new Error(); })），不会进入catch块 - 多个并行 Promise 中某一个拒绝，但你只
await Promise.all([...])—— 一拒全拒，可能掩盖其他有效错误上下文
更稳妥的做法：
const [res1, res2] = await Promise.allSettled([
fetch('/api/a').then(r => r.json()),
fetch('/api/b').then(r => r.json())
]);
if (res1.status === 'rejected') {
console.error('API A 失败:', res1.reason);
}
if (res2.status === 'rejected') {
console.error('API B 失败:', res2.reason);
}
-
Promise.allSettled不会因单个失败而中断，适合需要独立处理每个请求结果的场景 - 仍需在每个
fetch后检查response.ok，因为 HTTP 4xx/5xx 不会触发reject
资源加载失败要单独监听
try...catch 对 、 加载失败毫无反应。必须用事件监听：
document.addEventListener('error', (event) => {
if (event.target instanceof HTMLImageElement) {
console.warn('图片加载失败:', event.target.src);
}
if (event.target instanceof HTMLScriptElement) {
console.error('脚本加载失败:', event.target.src);
}
}, true); // useCapture=true 才能捕获到目标元素上的 error 事件
- 注意事件委托写法：必须加
true参数启用捕获阶段，否则监听不到目标元素自身的error - 不要监听
window.onerror来代替——它不触发资源加载错误 - 动态插入的元素（如
document.createElement('img')）也要手动绑定onerror
真正的健壮错误处理，不是堆砌 try...catch，而是分层布防：同步逻辑用它，异步流靠 async/await + .catch() 或 Promise.allSettled，全局兜底靠 error 和 unhandledrejection，资源加载靠元素级事件。漏掉任何一层，线上就可能静默失败。
