如何设计前端监控与JavaScript错误追踪系统

前端监控与JavaScript错误追踪系统的核心目标是实时感知线上应用的运行状态，当发生JavaScript错误、资源加载失败、接口异常等问题时，能够快速收集错误上下文信息，辅助开发者定位问题根因。完整的系统通常包含前端SDK、上报服务、存储模块、分析平台四个核心部分，下面逐一介绍各模块的设计思路。

核心功能模块设计

1. 错误捕获模块

错误捕获是系统的基础，需要覆盖不同类型的异常场景，常见的错误类型包括JavaScript运行时错误、资源加载错误、Promise未捕获错误、接口请求错误等。

JavaScript运行时错误捕获

可以通过window.onerror全局事件捕获同步执行的JavaScript错误，该事件会在脚本发生错误时触发，能够获取到错误信息、错误文件、行号、列号等关键信息。

// 全局捕获JS运行时错误
window.onerror = function(message, source, lineno, colno, error) {
  // 组装错误信息对象
  const errorInfo = {
    type: 'js_error',
    message: message,
    source: source,
    lineno: lineno,
    colno: colno,
    stack: error && error.stack, // 错误堆栈信息
    time: new Date().getTime(),
    userAgent: navigator.userAgent,
    url: window.location.href
  };
  // 调用上报方法
  reportError(errorInfo);
  return true; // 阻止错误继续向上抛出
};

资源加载错误捕获

资源加载错误（如图片、脚本、样式表加载失败）不会触发window.onerror，需要通过window.addEventListener监听error事件，并且设置事件捕获阶段触发。

// 捕获资源加载错误
window.addEventListener('error', function(event) {
  // 区分资源错误和JS错误，资源错误的target是元素节点
  if (event.target && (event.target.tagName || event.target.src || event.target.href)) {
    const errorInfo = {
      type: 'resource_error',
      tagName: event.target.tagName,
      src: event.target.src || event.target.href,
      time: new Date().getTime(),
      url: window.location.href
    };
    reportError(errorInfo);
  }
}, true); // 使用捕获阶段，确保能拿到资源错误

Promise未捕获错误捕获

未处理的Promise reject错误需要通过unhandledrejection事件捕获，该事件会在Promise被reject且没有对应的catch处理时触发。

// 捕获未处理的Promise错误
window.addEventListener('unhandledrejection', function(event) {
  const errorInfo = {
    type: 'promise_error',
    message: event.reason ? (event.reason.message || event.reason) : '未知Promise错误',
    stack: event.reason && event.reason.stack,
    time: new Date().getTime(),
    url: window.location.href
  };
  reportError(errorInfo);
});

2. 错误上报模块

错误上报需要考虑上报的可靠性、性能损耗以及数据体积，常见的优化策略如下：

• 采用队列缓存错误，避免频繁发送请求，比如积累3条错误或者间隔5秒上报一次
• 优先使用navigator.sendBeacon上报，该方法会在页面卸载时可靠发送数据，不会阻塞页面卸载流程
• 对错误信息进行压缩，减少传输数据量，比如过滤重复的错误堆栈、精简不必要的字段
• 添加采样率配置，对于高流量的应用可以设置采样比例，避免上报数据量过大

// 错误上报队列实现
const errorQueue = [];
let timer = null;
const REPORT_INTERVAL = 5000; // 5秒上报一次
const MAX_QUEUE_SIZE = 3; // 队列最多存3条错误

function reportError(errorInfo) {
  errorQueue.push(errorInfo);
  // 如果队列达到最大长度，立即上报
  if (errorQueue.length >= MAX_QUEUE_SIZE) {
    sendReport();
  } else {
    // 否则设置定时器，间隔上报
    if (!timer) {
      timer = setTimeout(() => {
        sendReport();
        timer = null;
      }, REPORT_INTERVAL);
    }
  }
}

function sendReport() {
  if (errorQueue.length === 0) return;
  const data = JSON.stringify(errorQueue);
  errorQueue.length = 0; // 清空队列
  // 优先使用sendBeacon上报
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/monitor/report', data);
  } else {
    // 降级使用fetch上报
    fetch('/api/monitor/report', {
      method: 'POST',
      body: data,
      keepalive: true // 确保页面卸载时也能发送
    }).catch(() => {});
  }
}

3. 错误堆栈解析与Source Map映射

生产环境的JavaScript代码通常会经过压缩混淆，错误堆栈中的行号列号对应的是压缩后的代码，无法直接定位到源码位置，因此需要结合Source Map进行映射。上报服务收到错误堆栈后，根据错误对应的文件版本找到对应的Source Map文件，解析出源码的文件路径、行号、列号，方便开发者定位问题。

Source Map文件的存储需要注意安全，不要将Source Map文件暴露在公网可访问的路径，避免源码泄露。可以在上报服务中维护版本和Source Map的映射关系，只有内部服务可以访问Source Map文件。

4. 数据存储与分析模块

上报的错误数据可以存储到时序数据库（如InfluxDB）或者日志存储系统（如Elasticsearch）中，方便后续查询和统计。分析模块需要支持以下功能：

• 错误趋势统计：按时间维度统计错误数量、错误率的变化趋势
• 错误聚合：将相同类型的错误聚合在一起，统计出现次数、影响用户数
• 用户维度分析：查看某个用户遇到的所有错误，辅助复现问题
• 告警配置：当错误率超过阈值时，通过邮件、短信等方式通知负责人

系统落地注意事项

在设计前端监控与JavaScript错误追踪系统时，还需要注意以下几点：

• 兼容性：确保SDK能够兼容主流浏览器，对于不支持某些API的环境做降级处理
• 性能影响：SDK的代码体积要尽可能小，错误捕获和上报的逻辑不能影响业务代码的执行性能
• 隐私合规：上报的信息不能包含用户的敏感信息，比如手机号、身份证号、密码等，必要的时候对用户信息做脱敏处理
• 可扩展性：系统设计要预留扩展空间，后续可以新增性能监控、用户行为追踪等功能模块

前端监控与JavaScript错误追踪系统不是一次性搭建完成的，需要根据业务场景不断迭代优化，调整错误捕获的范围、上报策略、告警规则，才能真正发挥系统的价值，保障线上应用的稳定运行。

前端监控JavaScript错误追踪错误上报性能监控source_map修改时间：2026-06-29 21:09:49