JavaScript_异常监控与错误追踪系统

狼影 2025-11-22 00:00:00 次阅读

答案：构建JavaScript异常监控系统需捕获全局错误与Promise拒绝，收集堆栈及用户上下文信息，通过异步上报或sendBeacon发送至服务端，结合Sentry等工具实现错误追踪与分析。

前端异常监控是保障 Web 应用稳定运行的重要环节，尤其在复杂业务场景中，JavaScript 错误可能导致页面崩溃或功能失效。一个有效的错误追踪系统可以帮助开发团队快速定位问题、分析原因并及时修复。以下是构建 JavaScript 异常监控与错误追踪系统的关键要点。

捕获全局异常

通过监听全局事件，可以捕获未被处理的 JavaScript 错误和资源加载失败。

window.onerror 用于捕获同步脚本错误和语法错误：

window.addEventListener('unhandledrejection') 捕获未处理的 Promise 错误：

window.addEventListener('unhandledrejection', event => {
  const reason = event.reason;
  reportError({
    message: reason?.message || 'Promise rejected',
    stack: reason?.stack,
    type: 'unhandledrejection'
  });
});

收集堆栈信息与上下文

原始错误信息往往不足以定位问题，需要补充上下文数据。

可采集的信息包括：

用户浏览器、操作系统、设备类型
当前 URL 和路由路径
用户行为日志（如最近点击）
网络状态（是否离线、响应延迟）
自定义标记（如用户 ID、版本号）

利用 error.stack 获取调用栈，结合 sourcemap 可还原压缩代码中的原始位置。

错误上报与服务端接收

错误应通过独立接口异步上报，避免阻塞主流程。

使用 fetch 或 Image 方式发送数据：

function reportError(data) {
  // 添加时间戳和唯一标识
  data.timestamp = Date.now();
  data.uuid = generateUUID();

  // 使用 navigator.sendBeacon 在页面卸载时可靠发送
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/log-error', JSON.stringify(data));
  } el

se {
    fetch('/log-error', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: { 'Content-Type': 'application/json' }
    });
  }
}

服务端需提供接收接口，存储错误日志并支持查询、去重和告警。