17370845950

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。

基本用法示例：

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。不复杂但容易忽略细节。