前端监控与埋点

构建完善的前端监控体系 - 从错误监控到用户行为分析

📚 内容概览

核心概念

• 监控体系概述 - 监控类型、指标体系、架构设计
• 数据采集原理 - SDK 设计、数据上报、采样策略

错误监控

• JavaScript 错误监控 - try-catch、window.onerror、unhandledrejection
• 资源加载错误 - 静态资源、接口请求失败
• 错误上报与聚合 - 错误堆栈、SourceMap 还原

性能监控

• 性能指标采集 - Navigation Timing、Resource Timing
• Core Web Vitals 监控 - LCP、FID、CLS 实时监控
• 接口性能监控 - 请求耗时、成功率、异常监控

用户行为分析

• PV/UV 统计 - 页面访问、用户去重
• 用户行为埋点 - 点击、曝光、停留时长
• 用户路径分析 - 漏斗分析、路径追踪

监控系统实战

• 监控 SDK 设计 - 插件化架构、性能优化、容错处理
• 数据上报策略 - 批量上报、失败重试、离线缓存
• 监控平台搭建 - 数据存储、可视化、告警

🎯 学习路径

初级（基础监控）

1. JavaScript 错误监控
2. 性能指标采集
3. 基础埋点实现

中级（体系建设）

1. 监控 SDK 设计
2. 数据上报策略
3. 错误聚合与分析

高级（平台搭建）

1. 监控平台架构设计
2. 大数据量处理
3. 智能告警与分析

🔥 面试高频

• 如何实现前端错误监控？
• 如何捕获异步错误？
• SourceMap 如何还原错误堆栈？
• 如何监控页面性能指标？
• 什么是 Core Web Vitals？如何监控？
• 如何设计埋点方案？
• 如何优化数据上报性能？
• 如何设计监控 SDK？

📊 监控体系架构

前端监控体系
├── 错误监控
│   ├── JavaScript 错误（运行时错误、Promise 错误）
│   ├── 资源加载错误（JS、CSS、图片）
│   ├── 接口错误（HTTP 状态码、超时）
│   └── 跨域脚本错误
│
├── 性能监控
│   ├── 页面性能（FCP、LCP、FID、CLS、TTI）
│   ├── 资源性能（JS、CSS、图片加载时间）
│   ├── 接口性能（请求耗时、成功率）
│   └── 长任务监控（Long Task API）
│
├── 用户行为
│   ├── PV/UV 统计
│   ├── 点击埋点
│   ├── 曝光埋点
│   ├── 停留时长
│   └── 用户路径
│
└── 数据上报
    ├── 实时上报（错误、关键操作）
    ├── 批量上报（性能、埋点）
    ├── 离线缓存（网络异常时）
    └── 采样上报（降低服务器压力）

🚀 快速开始

最小化错误监控

// 全局错误监控
window.addEventListener('error', (event) => {
  const { message, filename, lineno, colno, error } = event;
  reportError({
    type: 'jsError',
    message,
    filename,
    position: `${lineno}:${colno}`,
    stack: error?.stack,
  });
}, true);

// Promise 错误监控
window.addEventListener('unhandledrejection', (event) => {
  reportError({
    type: 'promiseError',
    message: event.reason?.message || event.reason,
    stack: event.reason?.stack,
  });
});

// 资源加载错误
window.addEventListener('error', (event) => {
  const target = event.target;
  if (target !== window) {
    reportError({
      type: 'resourceError',
      tagName: target.tagName,
      src: target.src || target.href,
    });
  }
}, true);

性能监控示例

// 监控 Core Web Vitals
import { onCLS, onFID, onLCP } from 'web-vitals';

onCLS((metric) => {
  reportMetric({ name: 'CLS', value: metric.value });
});

onFID((metric) => {
  reportMetric({ name: 'FID', value: metric.value });
});

onLCP((metric) => {
  reportMetric({ name: 'LCP', value: metric.value });
});

埋点示例

// 点击埋点
document.addEventListener('click', (event) => {
  const target = event.target;
  const trackId = target.getAttribute('data-track');

  if (trackId) {
    reportEvent({
      type: 'click',
      trackId,
      timestamp: Date.now(),
      path: window.location.pathname,
    });
  }
});

🛠️ 监控工具对比

工具	类型	优势	适用场景
Sentry	开源/商业	错误监控强大、SourceMap 支持好	错误监控
阿里云 ARMS	商业	国内访问快、功能全面	企业级监控
Google Analytics	免费	用户行为分析强	流量分析
神策分析	商业	用户行为分析专业	精细化运营
自研 SDK	自研	定制化强、数据安全	大型企业

📖 核心指标

错误监控指标

• 错误率：错误次数 / 总 PV
• 影响用户数：发生错误的独立用户数
• 错误趋势：错误数量随时间变化

性能监控指标

• FCP（First Contentful Paint）：首次内容绘制
• LCP（Largest Contentful Paint）：最大内容绘制
• FID（First Input Delay）：首次输入延迟
• CLS（Cumulative Layout Shift）：累积布局偏移
• TTI（Time to Interactive）：可交互时间

业务监控指标

• PV（Page View）：页面浏览量
• UV（Unique Visitor）：独立访客数
• 转化率：目标完成数 / 总访问数
• 跳出率：单页访问数 / 总访问数