前端监控体系实战：性能指标采集、错误捕获与用户行为追踪

脚本专家

在现代前端工程中，监控是保障用户体验和服务稳定性的基础设施。本文围绕性能监控、错误监控和行为监控三大维度，给出可直接落地的代码实现，涵盖 Web API 的 PerformanceObserver、全局错误钩子、自定义埋点、数据上报以及告警规则设计。

2. /* 以下代码均基于现代浏览器，适用于 Vue/React 项目集成 */
3. // 1. 性能监控：核心指标采集
4. const observer = new PerformanceObserver((list) => {
5.   for (const entry of list.getEntries()) {
6.     if (entry.name === 'first-contentful-paint') {
7.       console.log(`FCP: ${entry.startTime}ms`);
8.       reportMetric('fcp', entry.startTime);
9.     }
10.   }
11. });
12. observer.observe({ entryTypes: ['paint'] });
14. const lcpObserver = new PerformanceObserver((list) => {
15.   const entries = list.getEntries();
16.   const lastEntry = entries[entries.length - 1];
17.   console.log(`LCP: ${lastEntry.startTime}ms`);
18.   reportMetric('lcp', lastEntry.startTime);
19. });
20. lcpObserver.observe({ entryTypes: ['largest-contentful-paint'] });
22. let clsValue = 0;
23. const clsObserver = new PerformanceObserver((list) => {
24.   for (const entry of list.getEntries()) {
25.     if (!entry.hadRecentInput) {
26.       clsValue += entry.value;
27.       console.log(`CLS: ${clsValue}`);
28.       reportMetric('cls', clsValue);
29.     }
30.   }
31. });
32. clsObserver.observe({ entryTypes: ['layout-shift'] });

复制代码

使用 PerformanceObserver 监听首屏渲染（FCP）、最大内容绘制（LCP）和布局偏移（CLS），浏览器会回调最新值。CLS 需要累加 value 属性（未在有用户输入偏移后的事件中记录）。

2. 自定义性能埋点：封装 PerformanceMonitor 类
除了浏览器原生指标，还需要 DNS、TCP连接、DOM解析及页面完全加载耗时。通过 performance.timing 计算：

2. class PerformanceMonitor {
3.   constructor() {
4.     this.metrics = {};
5.   }
6.   recordPageLoad() {
7.     const timing = performance.timing;
8.     const metrics = {
9.       dnsLookup: timing.domainLookupEnd - timing.domainLookupStart,
10.       tcpConnect: timing.connectEnd - timing.connectStart,
11.       domParse: timing.domComplete - timing.domLoading,
12.       fullLoad: timing.loadEventEnd - timing.navigationStart
13.     };
14.     Object.entries(metrics).forEach(([key, value]) => {
15.       this.reportMetric(`page_${key}`, value);
16.     });
17.   }
18.   recordResourceLoad() {
19.     performance.getEntriesByType('resource').forEach(resource => {
20.       if (resource.duration > 1000) {
21.         this.reportMetric('slow_resource', {
22.           name: resource.name,
23.           duration: resource.duration,
24.           type: resource.initiatorType
25.         });
26.       }
27.     });
28.   }
29.   reportMetric(name, value) {
30.     fetch('/api/metrics', {
31.       method: 'POST',
32.       body: JSON.stringify({ name, value, timestamp: Date.now() }),
33.       headers: { 'Content-Type': 'application/json' }
34.     });
35.   }
36. }
37. const perfMonitor = new PerformanceMonitor();
38. perfMonitor.recordPageLoad();
39. perfMonitor.recordResourceLoad();

复制代码

3. 错误监控：全局捕获运行时与 Promise 异常
通过 window.addEventListener('error', ... , true) 捕获未被 try/catch 的 JS 错误；通过 unhandledrejection 监听未处理的 Promise 拒绝。

2. window.addEventListener('error', (event) => {
3.   reportError({
4.     type: 'runtime',
5.     message: event.message,
6.     filename: event.filename,
7.     lineno: event.lineno,
8.     colno: event.colno,
9.     stack: event.error?.stack,
10.     timestamp: Date.now()
11.   });
12. }, true);
14. window.addEventListener('unhandledrejection', (event) => {
15.   reportError({
16.     type: 'promise',
17.     message: event.reason?.message || 'Unhandled Promise Rejection',
18.     stack: event.reason?.stack,
19.     timestamp: Date.now()
20.   });
21. });

复制代码

4. 框架级错误捕获：Vue 和 React
Vue 3 通过 app.config.errorHandler 全局钩子捕获组件渲染错误；React 16+ 使用 ErrorBoundary 类组件和 getDerivedStateFromError/componentDidCatch。

2. // Vue 3
3. import { createApp } from 'vue';
4. const app = createApp(App);
5. app.config.errorHandler = (err, instance, info) => {
6.   reportError({
7.     type: 'vue',
8.     message: err.message,
9.     stack: err.stack,
10.     component: instance?.name || 'Anonymous',
11.     lifecycleHook: info,
12.     timestamp: Date.now()
13.   });
14. };
16. // React ErrorBoundary
17. import React from 'react';
18. class ErrorBoundary extends React.Component {
19.   constructor(props) {
20.     super(props);
21.     this.state = { hasError: false, error: null };
22.   }
23.   static getDerivedStateFromError(error) {
24.     return { hasError: true, error };
25.   }
26.   componentDidCatch(error, errorInfo) {
27.     reportError({
28.       type: 'react',
29.       message: error.message,
30.       stack: error.stack,
31.       componentStack: errorInfo.componentStack,
32.       timestamp: Date.now()
33.     });
34.   }
35.   render() {
36.     if (this.state.hasError) {
37.       return <div>页面出错了，请稍后刷新</div>;
38.     }
39.     return this.props.children;
40.   }
41. }

复制代码

5. 资源加载与 HTTP 请求错误
通过全局 error 事件检测图片加载失败，通过重写 fetch 方法捕获 HTTP 非 2xx 响应或网络异常。

2. window.addEventListener('error', (event) => {
3.   if (event.target instanceof HTMLImageElement) {
4.     reportError({
5.       type: 'resource',
6.       resourceType: 'image',
7.       url: event.target.src,
8.       timestamp: Date.now()
9.     });
10.   }
11. }, true);
13. const originalFetch = window.fetch;
14. window.fetch = async function(...args) {
15.   try {
16.     const response = await originalFetch(...args);
17.     if (!response.ok) {
18.       reportError({
19.         type: 'http',
20.         url: args[0],
21.         status: response.status,
22.         method: args[1]?.method || 'GET'
23.       });
24.     }
25.     return response;
26.   } catch (error) {
27.     reportError({
28.       type: 'http',
29.       url: args[0],
30.       message: error.message,
31.       method: args[1]?.method || 'GET'
32.     });
33.     throw error;
34.   }
35. };

复制代码

6. 行为监控：用户点击、滚动、页面停留
使用 BehaviorTracker 类记录交互行为：点击元素信息、页面滚动深度（防抖）、页面浏览时长（beforeunload 时上报）。利用 navigator.sendBeacon 保证页面关闭时数据不丢。

2. class BehaviorTracker {
3.   constructor() {
4.     this.sessionId = this.generateSessionId();
5.     this.pageViewTime = 0;
6.   }
7.   trackClick(element) {
8.     const eventData = {
9.       type: 'click',
10.       element: element.tagName,
11.       className: element.className,
12.       text: element.textContent?.slice(0, 50),
13.       x: element.getBoundingClientRect().left,
14.       y: element.getBoundingClientRect().top,
15.       pageUrl: window.location.href,
16.       timestamp: Date.now()
17.     };
18.     this.reportBehavior(eventData);
19.   }
20.   trackPageView() {
21.     const startTime = Date.now();
22.     window.addEventListener('beforeunload', () => {
23.       const duration = Date.now() - startTime;
24.       this.reportBehavior({
25.         type: 'pageview',
26.         url: window.location.href,
27.         duration,
28.         sessionId: this.sessionId,
29.         timestamp: Date.now()
30.       });
31.     });
32.   }
33.   trackScroll() {
34.     let scrollTimeout;
35.     window.addEventListener('scroll', () => {
36.       clearTimeout(scrollTimeout);
37.       scrollTimeout = setTimeout(() => {
38.         const scrollDepth = Math.round(
39.           (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100
40.         );
41.         this.reportBehavior({
42.           type: 'scroll',
43.           scrollDepth,
44.           timestamp: Date.now()
45.         });
46.       }, 500);
47.     });
48.   }
49.   reportBehavior(data) {
50.     navigator.sendBeacon('/api/behavior', JSON.stringify(data));
51.   }
52.   generateSessionId() {
53.     return `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
54.   }
55. }
56. const tracker = new BehaviorTracker();
57. tracker.trackPageView();
58. tracker.trackScroll();
59. document.addEventListener('click', (event) => {
60.   tracker.trackClick(event.target);
61. });

复制代码

7. 性能与行为关联分析
通过 Analytics 类将用户操作与性能数据关联，例如统计某类操作后的平均响应时间和错误率。

2. class Analytics {
3.   constructor() {
4.     this.userActions = [];
5.   }
6.   recordAction(action) {
7.     this.userActions.push({
8.       ...action,
9.       sessionId: this.getSessionId(),
10.       userId: this.getUserId()
11.     });
12.   }
13.   getSessionId() {
14.     return localStorage.getItem('session_id') ||
15.       (localStorage.setItem('session_id', `sess_${Date.now()}`),
16.       localStorage.getItem('session_id'));
17.   }
18.   getUserId() {
19.     return localStorage.getItem('user_id') || 'anonymous';
20.   }
21.   analyzePerformanceAfterAction(actionType) {
22.     const actions = this.userActions.filter(a => a.type === actionType);
23.     const recentActions = actions.slice(-10);
24.     return {
25.       avgResponseTime: recentActions.reduce((sum, a) => sum + (a.responseTime || 0), 0) / recentActions.length,
26.       errorRate: recentActions.filter(a => a.error).length / recentActions.length
27.     };
28.   }
29. }

复制代码

8. 统一上报与告警
MonitorService 封装批量上报逻辑，使用 sendBeacon 或 fetch 定时 flush，支持 error 优先即时上报。告警规则按指标阈值触发通知。

2. class MonitorService {
3.   constructor(config) {
4.     this.endpoint = config.endpoint;
5.     this.appId = config.appId;
6.     this.queue = [];
7.     this.flushInterval = 5000;
8.     this.init();
9.   }
10.   init() {
11.     setInterval(() => this.flush(), this.flushInterval);
12.     window.addEventListener('beforeunload', () => this.flush());
13.   }
14.   report(type, data) {
15.     const payload = {
16.       appId: this.appId,
17.       type,
18.       data,
19.       timestamp: Date.now(),
20.       userAgent: navigator.userAgent,
21.       url: window.location.href,
22.       referrer: document.referrer
23.     };
24.     this.queue.push(payload);
25.     if (type === 'error') {
26.       this.flush();
27.     }
28.   }
29.   flush() {
30.     if (this.queue.length === 0) return;
31.     const data = [...this.queue];
32.     this.queue = [];
33.     navigator.sendBeacon(`${this.endpoint}/batch`, JSON.stringify(data));
34.   }
35. }
36. const monitor = new MonitorService({
37.   endpoint: 'https://monitor.example.com',
38.   appId: 'frontend-app-001'
39. });
41. // 告警规则示例
42. const alertRules = {
43.   errorRate: { threshold: 0.05, window: 300 },
44.   fcp: { threshold: 2500 },
45.   lcp: { threshold: 4000 },
46.   cls: { threshold: 0.25 },
47.   apiErrorRate: { threshold: 0.1, window: 60 }
48. };
49. function checkAlerts(metric, value) {
50.   const rule = alertRules[metric];
51.   if (!rule) return;
52.   if (value > rule.threshold) {
53.     sendAlert({
54.       metric,
55.       value,
56.       threshold: rule.threshold,
57.       timestamp: Date.now()
58.     });
59.   }
60. }

复制代码

总结：上述代码覆盖了性能（FCP/LCP/CLS及自定义埋点）、错误（runtime/promise/资源/框架）、行为（点击/滚动/页面停留）的采集与上报。建议在项目中集成 MonitorService 并设置合理的告警阈值，从而主动发现性能劣化与异常。监控的本质是预防问题，而非事后补救。

热心网友4

感谢分享！正好最近在搭监控系统，你这套代码可以直接拿来做参考。CLS 累加时加了 `hadRecentInput` 判断，这个细节很到位，之前踩过坑。另外你提到还有“告警规则设计”，正文里好像没展开？我比较关心聚合告警（比如单页应用下低概率偶发错误怎么收敛），如果方便的话希望能再讲讲策略。还有最后 `unhandledrejection` 那段的 `unha` 后面是不是缺了东西？代码看起来没写完。