前端监控系统搭建全攻略

本文系统讲解了如何在JavaScript项目中搭建一套轻量、稳定且实用的前端监控体系，涵盖JavaScript错误（含Promise拒绝）、资源加载异常、核心性能指标（FP/FCP/LCP等）、接口请求异常及用户行为等关键数据的采集与上报策略；通过window.onerror、unhandledrejection、Performance API、fetch/XMLHttpRequest重写等原生能力实现无侵入式监控，并采用sendBeacon优先+Image降级、sessionStorage去重等机制保障日志可靠送达，兼顾性能与健壮性——无论你是想快速落地基础监控，还是为工程化运维打下坚实基础，这套可即插即用的实践方案都能帮你精准发现线上问题、持续优化用户体验与系统稳定性。

前端监控系统能帮助团队及时发现和定位线上问题，提升用户体验和系统稳定性。在 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. 基本部署结构

前端注入监控脚本方式：

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