前端错误监控与异常捕获详解

一、问题描述

前端错误监控是保障应用稳定性的关键环节，其核心目标是捕获并上报运行时错误（如JavaScript执行错误、资源加载失败、接口请求异常等），帮助开发者快速定位问题。需解决的核心问题包括：

1. 如何捕获不同类型的错误？
2. 如何避免监控代码本身引发错误？
3. 如何将错误信息高效上报至服务端？

二、错误类型与捕获方法

1. JavaScript执行错误

• 同步错误：通过try-catch捕获。

  try {
    undefinedFunction(); // 故意调用未定义函数
  } catch (error) {
    console.error("捕获到错误：", error.message);
  }
  

• 异步错误：try-catch无法直接捕获异步任务中的错误（如setTimeout），需在异步回调内部单独处理。

  setTimeout(() => {
    try {
      undefinedFunction();
    } catch (error) {
      console.error("异步错误：", error.message);
    }
  }, 1000);
  

2. 全局错误监听

通过window.addEventListener('error')捕获大多数全局错误（包括同步错误、异步错误），但无法捕获Promise拒绝（unhandledrejection事件专用于此）。

window.addEventListener('error', (event) => {
  // 注意：event.error可能为null，需优先使用event.message
  console.log("错误类型：", event.type); // 如"error"
  console.log("错误信息：", event.message);
  console.log("错误文件：", event.filename);
  console.log("行列号：", event.lineno, event.colno);
});

3. Promise拒绝错误

使用unhandledrejection事件捕获未被处理的Promise拒绝：

window.addEventListener('unhandledrejection', (event) => {
  console.log("Promise拒绝原因：", event.reason); // 通常是Error对象或拒绝值
});

4. 资源加载错误

图片、脚本等资源加载失败会触发全局error事件，但需注意：

• 事件冒泡到window，但部分浏览器可能不包含详细错误信息。
• 可通过事件对象的target属性判断资源类型：

  window.addEventListener('error', (event) => {
    if (event.target && event.target.src) {
      console.log("图片加载失败：", event.target.src);
    }
  }, true); // 使用捕获阶段确保事件被处理
  

三、错误信息结构化

捕获的错误需包含关键字段以便分析：

const errorLog = {
  type: event.type, // 错误类型（如"error"、"unhandledrejection"）
  message: event.message || event.reason?.message,
  filename: event.filename || event.target?.src,
  position: `${event.lineno}:${event.colno}`, // 代码行列号
  stack: event.error?.stack, // 错误调用栈
  timestamp: Date.now(),
  userAgent: navigator.userAgent,
  url: window.location.href
};

四、安全上报策略

1. 避免监控代码自身报错

• 使用try-catch包裹上报逻辑。
• 对参数进行安全校验（如避免JSON.stringify因循环引用失败）。

2. 上报方式

• 首选navigator.sendBeacon()：异步发送，不阻塞页面卸载，适合页面关闭前的错误上报。

  const data = new Blob([JSON.stringify(errorLog)], { type: 'application/json' });
  navigator.sendBeacon('/api/error-log', data);
  

• 备选XMLHttpRequest或fetch：需注意网络超时与重试机制。

3. 降级方案

当上报接口异常时，可将错误暂存至localStorage，待下次页面加载时重发。

五、实战注意事项

1. 采样率控制：高流量场景下按比例上报，避免日志爆炸。
2. SourceMap映射：生产环境通过SourceMap将压缩后的错误位置映射回源码。
3. 性能影响：避免在错误监控中执行复杂逻辑，优先使用异步上报。

六、总结

前端错误监控需结合多种捕获方式（全局监听、Promise拒绝、资源加载），通过结构化错误信息与安全上报策略，实现高效稳定的异常追踪。实际项目中可结合Sentry、Fundebug等开源方案快速搭建。