JavaScript错误处理分四类机制：window.onerror捕获未拦截的同步错误和脚本加载失败（需crossorigin支持）；error事件监听资源加载失败；try-catch处理可控同步代码异常；unhandledrejection捕获未处理的Promise拒绝，需结合业务兜底与上报。
JavaScript处理浏览器错误主要靠监听和捕获两类机制：全局错误监听用于兜底，try-catch用于可控代码块的精确捕获。关键不是“抓到所有错”，而是分清哪些该捕获、哪些该上报、哪些该忽略。
用 window.onerror 捕获全局运行时错误
它能捕获未被 try-catch 拦截的同步错误（如引用 undefined 变量、语法正确但执行出错），以及 script 标签加载失败（需配合 crossorigin 属性）。
注意：默认无法获取跨域脚本的详细错误信息（会显示 "Script error."）。解决方法是在 script 标签中添加 crossorigin="anonymous"，且服务端响应头包含 Access-Control-Allow-Origin。
基本用法示例：
立即学习“Java免费学习笔记（深入）”；
window.onerror = function(message, source, lineno, colno, error) {
console.log('错误信息:', message);
console.log('脚本来源:', source);
console.log('行号:', lineno);
console.log('列号:', colno);
console.log('Error 对象:', error); // 可能为 null
// 这里可发送错误日志到监控服务
return true; // 阻止触发 window.onunhandledrejection 或默认错误提示
};
用 window.addEventListener('error') 捕获资源加载错误
专门监听图片、CSS、script 等资源加载失败（比如 404、网络中断），不捕获 JS 执行错误。
常见场景：图片加载失败后显示默认占位图；JS 文件加载失败时提示用户刷新。
示例：
window.addEventListener('error', function(e) {
if (e.target && e.target.src && e.target.src.includes('.js')) {
console.warn('JS 资源加载失败:', e.target.src);
}
if (e.target && e.target instanceof HTMLImageElement) {
e.target.src = '/fallback-avatar.png';
}
}, true); // useCapture 设为 true 更可靠
用 try-catch 包裹可能出错的同步代码
适合已知风险操作，比如 JSON.parse、DOM 操作、第三方 API 调用结果处理等。它不会捕获异步回调里的错误（如 setTimeout 内部抛错）。
- 避免空 catch —— 至少记录 error.message 或打点上报
- 不要在 catch 里吞掉错误又不处理，容易掩盖问题
- 可结合 finally 做清理（如关闭 loading 状态）
示例：
try {
const data = JSON.parse(localStorage.getItem('config'));
renderConfig(data);
} catch (err) {
console.error('解析配置失败:', err.message);
showDefaultConfig();
}
用 window.addEventListener('unhandledrejection') 捕获 Promise 错误
捕获未被 .catch() 或 await/try-catch 处理的 Promise 拒绝（reject）。这是现代前端最常漏掉的错误入口。
注意：即使你写了 .catch()，只要没真正处理（比如只 console.log 但没恢复状态），仍可能影响用户体验。
建议做法：
- 对业务关键请求，必须显式 catch 并给出用户提示
- 全局监听作为兜底，记录日志并上报，避免白屏或卡顿无响应
- 区分网络错误、服务端业务错误、客户端解析错误，便于归因
window.addEventListener('unhandledrejection', function(e) {
console.warn('未处理的 Promise 拒绝:', e.reason);
// e.reason 可能是 Error 实例、字符串或任意值
reportError({
type: 'unhandledrejection',
reason: e.reason?.message || String(e.reason),
stack: e.reason?.stack
});
});
基本上就这些。不需要堆砌所有钩子，关键是根据错误类型选对机制：同步执行错用 try-catch，资源加载错用 error 事件，异步任务错盯住 unhandledrejection，兜底用 onerror。不复杂但容易忽略细节。
