前端监控系统搭建全攻略

一分耕耘，一分收获！既然都打开这篇《前端监控系统搭建指南》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

前端监控系统需采集JavaScript错误、资源加载异常、性能指标、接口异常及用户行为。1. 通过window.onerror捕获脚本错误，window.onunhandledrejection监听未处理的Promise拒绝。2. 利用Performance API获取FP、FCP、LCP等核心性能数据并在load后上报。3. 重写XMLHttpRequest和fetch实现接口请求监控，记录状态码异常。4. 使用sendBeacon发送日志，降级使用Image上报，并通过sessionStorage防止重复提交。5. 监控脚本可独立引入或构建时注入，服务端接收并分析数据以提升稳定性与体验。

前端监控系统能帮助团队及时发现和定位线上问题，提升用户体验和系统稳定性。在 JavaScript 项目中搭建一套基础的前端监控体系，核心目标是收集错误、性能数据和用户行为，并将这些信息上报到服务端进行分析。

1. 监控哪些内容

一个实用的前端监控系统通常关注以下几类数据：

• JavaScript 错误：包括语法错误、运行时异常、Promise 拒绝未处理等。
• 资源加载错误：如图片、脚本、样式表加载失败。
• 页面性能指标：如 FP（First Paint）、FCP（First Contentful Paint）、LCP、CLS、FID 等 Core Web Vitals。
• 用户行为轨迹：关键操作点击、路由变化等（可选）。
• 接口异常：Ajax 或 Fetch 请求失败、响应码异常。

2. 错误捕获实现

通过全局事件监听，可以捕获大多数前端异常。

使用 window.addEventListener('error') 捕获脚本、资源等运行时错误。

window.addEventListener('error', (event) => {
  const errorData = {
    type: 'error',
    message: event.message,
    filename: event.filename,
    lineno: event.lineno,
    colno: event.colno,
    stack: event.error?.stack || ''
  };
  report(errorData); // 上报函数
});

未处理的 Promise 异常：

监听 unhandledrejection 事件。

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

资源加载失败：

注意这类错误不包含堆栈，需单独判断。

window.addEventListener('error', (event) => {
  const target = event.target;
  if (target !== window && target.src || target.href) {
    const resourceError = {
      type: 'resource',
      tagName: target.tagName,
      src: target.src || target.href
    };
    report(resourceError);
  }
}, true); // 使用捕获阶段

3. 性能数据采集

利用 Performance API 获取关键性能指标。

function collectPerformance() {
  const perfData = performance.getEntriesByType('navigation')[0];
  return {
    fp: performance.getEntriesByName('first-paint')[0]?.startTime,
    fcp: performance.getEntriesByName('first-contentful-paint')[0]?.startTime,
    domReady: perfData.domContentLoadedEventEnd,
    loadTime: perfData.loadEventEnd,
    ttfb: perfData.responseStart - perfData.requestStart
  };
}
// 页面加载完成后上报
window.addEventListener('load', () => {
  setTimeout(() => { // 确保 FP/FCP 已记录
    report({ type: 'performance', data: collectPerformance() });
  }, 1000);
});

4. 接口请求监控

通过重写 fetch 和 XMLHttpRequest 实现请求拦截。

const originalXhrOpen = XMLHttpRequest.prototype.open;
const originalXhrSend = XMLHttpRequest.prototype.send;
<p>XMLHttpRequest.prototype.open = function(method, url) {
this._url = url;
this._method = method;
return originalXhrOpen.apply(this, arguments);
};</p><p>XMLHttpRequest.prototype.send = function(body) {
this.addEventListener('loadend', function() {
if (this.status >= 400) {
report({
type: 'ajax',
method: this._method,
url: this._url,
status: this.status,
response: this.responseText?.slice(0, 200)
});
}
});
return originalXhrSend.apply(this, arguments);
};
</p>

fetch 拦截（建议封装或用代理）：

重写 fetch 并保留原逻辑。

const originalFetch = window.fetch;
window.fetch = function(...args) {
  return originalFetch.apply(this, args)
    .then(res => {
      if (!res.ok) {
        report({
          type: 'fetch',
          url: args[0],
          status: res.status
        });
      }
      return res;
    })
    .catch(err => {
      report({ type: 'fetch', url: args[0], error: err.message });
      throw err;
    });
};

5. 数据上报与去重

使用 navigator.sendBeacon 确保页面关闭时数据仍可发送，否则降级为 Image 上报。

function report(data) {
  const finalData = { ...data, url: location.href, timestamp: Date.now(), uid: getUID() };
<p>// 避免重复上报相同错误（简单去重）
const key = <code>${finalData.message}-${finalData.lineno}</code>;
if (sessionStorage.getItem(key)) return;
sessionStorage.setItem(key, '1');</p><p>if (navigator.sendBeacon) {
navigator.sendBeacon('/log', new Blob([JSON.stringify(finalData)], { type: 'application/json' }));
} else {
new Image().src = '/log?d=' + encodeURIComponent(JSON.stringify(finalData));
}
}
</p>

6. 基本部署结构

前端注入监控脚本方式：

• 打包时引入监控模块。
• 通过