JavaScript错误监控系统设计与实现

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《JavaScript错误监控与上报系统设计详解》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

通过全局事件捕获JavaScript运行时错误、资源加载失败及未处理的Promise异常；2. 上报数据包含错误详情、设备信息、网络状态等上下文，避免敏感信息；3. 使用navigator.sendBeacon确保上报可靠性，降级使用fetch并支持keepalive；4. 引入采样、去重与节流机制控制上报频率，平衡监控精度与性能开销。

前端错误监控和上报系统的核心目标是捕获运行时异常、收集上下文信息，并将数据可靠地发送到服务端，以便快速定位和修复问题。在JavaScript中，设计一个完整的错误监控体系需要覆盖多种错误类型，并兼顾性能与用户体验。

1. 全局错误捕获

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

关键接口：

• window.onerror：捕获 JavaScript 运行时错误（同步错误、语法错误）。
• window.addEventListener('error')：补充捕获资源加载错误（如 img、script 加载失败）。
• window.addEventListener('unhandledrejection')：捕获未处理的 Promise 异常。

示例代码：

window.onerror = function(message, source, lineno, colno, error) {
  reportError({
    type: 'runtime',
    message,
    stack: error?.stack,
    url: source,
    line: lineno,
    column: colno
  });
  return true; // 阻止默认上报
};

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

2. 错误分类与上下文采集

上报的数据质量决定排查效率。除了错误本身，还需收集环境和行为上下文。

建议采集字段：

• 错误类型、消息、堆栈（error.stack）
• 用户设备信息（UA、屏幕尺寸）
• 当前 URL、页面标题
• 用户行为路径（可结合埋点记录最近操作）
• 网络状态（navigator.onLine、有效类型如 4g/3g）

注意：避免采集敏感信息（如密码、token），遵守隐私政策。

3. 上报策略与可靠性

直接使用 fetch 或 XMLHttpRequest 可能在某些场景下失败（如页面崩溃、CSP 限制）。推荐使用 navigator.sendBeacon。

sendBeacon 的优势：

• 异步发送，不阻塞页面卸载
• 即使页面已关闭也能发送请求
• 兼容性良好（现代浏览器均支持）

实现逻辑：

function reportError(data) {
  const payload = JSON.stringify({...data, timestamp: Date.now()});
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/log-error', payload);
  } else {
    fetch('/log-error', {
      method: 'POST',
      body: payload,
      keepalive: true // 确保请求完成
    }).catch(() => {
      // 可降级为图片打点等方式
    });
  }
}

4. 性能与采样控制

高频错误可能造成大量上报请求，影响性能或服务器压力。需引入控制机制。

常用策略：

• 采样上报：例如只上报 10% 的错误（适用于高流量应用）
• 去重处理：对相同错误（根据 stack 和 message 哈希）短时间内只上报一次
• 节流控制：限制单位时间内的上报频率

示例采样逻辑：

function shouldReport() {
  return Math.random() 

<p>基本上就这些。一个实用的错误监控系统不需要一开始就复杂，可以从基础的 onerror + sendBeacon 开始，逐步加入上下文采集和上报优化。关键是稳定捕获、可靠传输、数据可用。不复杂但容易忽略细节。</p><p>今天关于《JavaScript错误监控系统设计与实现》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！</p>