前端监控体系搭建：错误捕获、性能分析与用户行为追踪

一、为什么你需要前端监控？

1.1 数据说话：线上问题的真实成本

| 问题类型 | 平均发现时间 | 用户流失率 | 修复成本 | | --- | --- | --- | | JS 运行时错误 | 3–7 天 | 32% | $5,000+ | | 首屏加载 > 3s | 实时 | 40% | $12,000+ | | API 超时/失败 | 1–2 天 | 28% | $3,800+ |

📊 案例： 某电商平台接入监控后：JS 错误修复速度从 5 天 → 2 小时，首屏性能优化后转化率提升 18%，通过 Session Replay 发现表单提交按钮被广告遮挡。

1.2 监控 ≠ 日志，而是产品体验的'听诊器'

• 错误监控：知道'哪里坏了'
• 性能监控：知道'为什么慢'
• 行为监控：知道'用户怎么用'

✅ 本文目标：构建三位一体的前端可观测性体系。

---

二、监控体系架构：五层防御模型

🔑 核心原则：无侵入：业务代码零修改；低开销：CPU/内存占用 < 2%；高可靠：断网/崩溃仍能上报。

---

三、第一层：错误捕获 —— 不让任何异常溜走

3.1 全局错误监听（兜底）

// monitor/error.ts
export function initGlobalErrorCapture() {
  // JS 运行时错误
  window.addEventListener('error', (event) => {
    reportError({
      type: 'js',
      message: event.message,
      stack: event.error?.stack,
      url: event.filename,
      line: event.lineno,
      col: event.colno
    });
  });

  // Promise 拒绝未处理
  window.addEventListener('unhandledrejection', (event) => {
    reportError({
      type: 'promise',
      message: event.reason?.message || String(event.reason),
      stack: event.reason?.stack
    });
  });
}

3.2 Vue 3 特定错误捕获

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);

// 全局错误边界
app.config.errorHandler = (err, instance, info) => {
  reportError({
    type: 'vue',
    message: err.message,
    stack: err.stack,
    component: instance?.$options.name,
    lifecycle: info // 如 "render function"
  });
};

3.3 集成 Sentry（推荐）

// plugins/sentry.ts
import * as Sentry from '@sentry/vue';
import { Integrations } from '@sentry/tracing';

export function setupSentry(app: any, router: any) {
  Sentry.init({
    app,
    dsn: import.meta.env.VITE_SENTRY_DSN,
    integrations: [
      new Integrations.BrowserTracing({
        routingInstrumentation: Sentry.vueRouterInstrumentation(router),
        tracingOrigins: ['localhost', 'yourdomain.com']
      })
    ],
    tracesSampleRate: 1.0, // 100% 采样（生产可降为 0.1）
    replaysSessionSampleRate: 0.1, // 会话重放采样
    replaysOnErrorSampleRate: 1.0 // 错误时 100% 重放
  });
}

✅ 优势：自动关联用户、URL、组件；支持 Source Map 解析；提供 Issue 聚合与分配。

---

四、第二层：性能监控 —— 量化用户体验

4.1 Web Vitals 核心指标

指标	含义	目标值
LCP	最大内容渲染	< 2.5s
FID	首次输入延迟	< 100ms
CLS	累积布局偏移	< 0.1

4.2 使用 web-vitals 库自动采集

// monitor/performance.ts
import { getLCP, getFID, getCLS } from 'web-vitals';

export function initWebVitals() {
  getLCP(reportMetric);
  getFID(reportMetric);
  getCLS(reportMetric);
}

function reportMetric(metric: any) {
  // 上报到监控服务
  fetch('/api/monitor/perf', {
    method: 'POST',
    body: JSON.stringify({
      name: metric.name,
      value: metric.value,
      id: metric.id,
      url: location.href,
      userAgent: navigator.userAgent
    })
  });
}

4.3 自定义关键路径性能（如登录流程）

// composables/useLoginPerformance.ts
export function useLoginPerformance() {
  let startTime: number;

  function startTracking() {
    startTime = performance.now();
  }

  async function endTracking() {
    const duration = performance.now() - startTime;
    reportCustomMetric('login_duration', duration);
  }

  return { startTracking, endTracking };
}

在登录组件中使用：

<script setup lang="ts">
import { useLoginPerformance } from '@/composables/useLoginPerformance';

const { startTracking, endTracking } = useLoginPerformance();

async function handleLogin() {
  startTracking();
  try {
    await loginApi(credentials);
    await endTracking(); // 成功才上报
    router.push('/dashboard');
  } catch (err) {
    // 错误已由 Sentry 捕获
  }
}
</script>

📊 价值：识别业务瓶颈（如'支付页加载慢'），关联性能与转化率。

---

五、第三层：用户行为追踪 —— 还原现场

5.1 什么是 Session Replay？

• 记录用户点击、滚动、输入、导航等操作
• 生成可交互的录像，用于复现问题

5.2 Sentry Replay 配置（开箱即用）

// plugins/sentry.ts（续）
Sentry.init({
  // ... 其他配置
  integrations: [
    new Sentry.Replay({
      maskAllText: true, // 默认脱敏文本
      blockAllMedia: true, // 屏蔽图片/视频
      maskAllInputs: true // 输入框脱敏
    })
  ]
});

5.3 自定义行为埋点（关键事件）

// monitor/event.ts
type UserEvent =
  | { type: 'click'; element: string; text?: string }
  | { type: 'navigate'; from: string; to: string }
  | { type: 'form_submit'; formId: string };

const eventQueue: UserEvent[] = [];

export function trackEvent(event: UserEvent) {
  eventQueue.push(event); // 批量上报（每 10 条或 30s）
  if (eventQueue.length >= 10) {
    flushEvents();
  }
}

function flushEvents() {
  if (eventQueue.length === 0) return;
  fetch('/api/monitor/events', {
    method: 'POST',
    body: JSON.stringify(eventQueue)
  }).then(() => {
    eventQueue.length = 0; // 清空
  });
}

// 自动监听页面点击
document.addEventListener('click', (e) => {
  const target = e.target as HTMLElement;
  trackEvent({
    type: 'click',
    element: target.tagName,
    text: target.innerText?.substring(0, 50) // 截断防泄露
  });
});

🔒 隐私合规：敏感字段自动脱敏（密码、身份证）；提供用户'退出监控'开关；符合 GDPR/CCPA。

---

六、第四层：数据上报 —— 可靠、高效、安全

6.1 上报策略设计

场景	策略
错误/关键事件	立即上报（Beacon API）
性能指标	延迟上报（避免阻塞）
行为日志	批量上报（节省带宽）

// utils/reporter.ts
export function safeReport(data: any, immediate = false) {
  const payload = JSON.stringify(data);
  if (immediate && 'sendBeacon' in navigator) {
    // 优先使用 Beacon（页面卸载时仍可靠）
    navigator.sendBeacon('/api/monitor', payload);
  } else {
    // 降级为 fetch + keepalive
    fetch('/api/monitor', {
      method: 'POST',
      body: payload,
      keepalive: true
    }).catch(console.warn);
  }
}

6.2 采样策略（控制成本）

// config/monitor.ts
export const MONITOR_CONFIG = {
  errorSampleRate: 1.0, // 错误 100% 上报
  perfSampleRate: 0.3, // 性能 30% 采样
  replaySampleRate: 0.05 // 录像 5% 采样
};

// 上报前判断
if (Math.random() < MONITOR_CONFIG.perfSampleRate) {
  safeReport(perfData);
}

💡 建议：高流量站点降低采样率，关键业务页强制 100% 采样。

---

七、第五层：告警与响应 —— 从数据到行动

7.1 告警规则示例（Sentry）

• JS 错误率突增：5 分钟内错误数 > 100
• LCP 恶化：P95 LCP > 4s 持续 10 分钟
• API 失败率：/api/order 失败率 > 5%

7.2 自定义告警（通过 Webhook）

// 后端告警服务（伪代码）
if (errorCount.last5min > 100) {
  sendSlackAlert(`🚨 JS 错误激增！${errorCount} errors in 5min`);
  sendEmailToTeam('[email protected]');
}

7.3 问题闭环：关联 Git 提交

在 Sentry 中配置：

• 自动关联 Release 版本
• 显示最近提交记录
• 一键创建 Jira 工单

✅ 效果：开发收到告警 → 查看录像 → 定位代码 → 修复上线全流程 < 1 小时。

---

八、实战：构建自己的轻量监控 SDK

8.1 目标：替代商业方案（低成本场景）

// sdk/MonitorSDK.ts
class MonitorSDK {
  private config: MonitorConfig;

  constructor(config: MonitorConfig) {
    this.config = config;
    this.init();
  }

  private init() {
    this.captureErrors();
    this.capturePerformance();
    this.captureEvents();
  }

  private captureErrors() { /* ... */ }
  private capturePerformance() { /* ... */ }
  private captureEvents() { /* ... */ }

  public setUser(user: { id: string; email?: string }) {
    // 关联用户身份（脱敏后）
    this.user = {
      id: user.id,
      email: anonymize(user.email)
    };
  }
}

// 使用
const monitor = new MonitorSDK({
  endpoint: '/api/monitor',
  sampleRates: { error: 1.0, perf: 0.2 }
});
monitor.setUser({ id: 'user123', email: 'a***@example.com' });

8.2 存储设计（后端）

-- errors 表
CREATE TABLE errors (
  id UUID PRIMARY KEY,
  message TEXT,
  stack TEXT,
  url VARCHAR(500),
  user_id VARCHAR(100),
  created_at TIMESTAMPTZ
);

-- performance 表
CREATE TABLE performance (
  id UUID,
  metric_name VARCHAR(50), -- 'lcp', 'fid'
  value FLOAT,
  url VARCHAR(500),
  created_at TIMESTAMPTZ
);

📈 可视化：使用 Grafana 连接数据库，创建仪表盘：错误趋势图、性能 P95 分位线、用户地域分布。

---

九、高级技巧：监控与业务结合

9.1 监控驱动的产品优化

• 发现：支付页 CLS 高（按钮跳动）
• 分析：图片未设置尺寸 → 加载后撑开布局
• 修复：添加 width/height 属性
• 验证：CLS 从 0.25 → 0.02

9.2 A/B 测试中的性能对比

// 监控不同版本的 FCP
reportCustomMetric('fcp', fcpValue, { abTestGroup: 'v2-button' });

在后台对比：

• v1 组：FCP = 1.8s
• v2 组：FCP = 1.2s → 胜出！

---

十、合规与安全：GDPR 与数据脱敏

10.1 自动脱敏规则

// utils/anonymize.ts
export function anonymize(text: string): string {
  if (!text) return '';
  // 邮箱：a***@b.com
  if (text.includes('@')) {
    const [name, domain] = text.split('@');
    return `${name[0]}***@${domain}`;
  }
  // 手机号：138****1234
  if (/^1[3-9]\d{9}$/.test(text)) {
    return text.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
  }
  return text;
}

10.2 用户授权机制

<!-- 隐私弹窗 -->
<template>
  <div v-if="!consentGiven">
    <p>为提升体验，我们可能记录您的操作。您可随时关闭。</p>
    <button @click="accept">同意</button>
    <button @click="decline">拒绝</button>
  </div>
</template>

<script setup>
import { useMonitorStore } from '@/stores/monitor';

const monitorStore = useMonitorStore();
const consentGiven = computed(() => monitorStore.consent);

function accept() {
  monitorStore.setConsent(true);
  monitorStore.enableMonitoring();
}

function decline() {
  monitorStore.setConsent(false);
  monitorStore.disableMonitoring();
}
</script>

⚖️ 合规要点：明确告知用户，提供退出选项，不收集敏感信息。

---

十一、反模式与避坑指南

❌ 反模式 1：在错误处理中引发新错误

// 危险！reportError 可能抛错
window.onerror = (msg) => {
  reportError(msg); // 若此处失败，无限循环！
};

修复：

window.onerror = (msg) => {
  try {
    reportError(msg);
  } catch (e) {
    console.error('监控上报失败', e);
  }
};

---

❌ 反模式 2：上报阻塞主线程

// 错误：同步上报
fetch('/api/monitor', { body: data }); // 阻塞渲染！

正确：

• 使用 sendBeacon
• 或 fetch + keepalive

---

❌ 反模式 3：忽略移动端特殊性

• 移动网络不稳定 → 上报失败率高
• 低端机性能差 → 监控 SDK 本身成为负担

解决方案：

// 降级策略
if (isLowEndDevice()) {
  config.sampleRates = { error: 0.5, perf: 0.1 };
}

---

❌ 反模式 4：未处理 Source Map

问题：Sentry 收到的是压缩后的错误堆栈，无法定位源码。

修复：

// vite.config.ts
build: {
  sourcemap: true // 生成 .map 文件
}

// 部署时上传 Source Map 到 Sentry
// sentry-cli releases files <release> upload-sourcemaps dist

---

❌ 反模式 5：监控数据孤岛

问题：前端监控、后端日志、基础设施指标分散在不同系统。

解决：

• 使用统一 ID（如 trace_id）串联全链路
• 在 Nginx 层注入请求 ID
• 前端通过 meta 标签获取并上报

---

十二、企业级架构：监控模块化设计

src/monitor/
├── index.ts # 初始化入口
├── error/ # 错误捕获
│   ├── global.ts
│   └── vue.ts
├── performance/ # 性能采集
│   ├── webVitals.ts
│   └── custom.ts
├── behavior/ # 行为追踪
│   ├── click.ts
│   └── navigation.ts
├── reporter/ # 上报逻辑
│   ├── beacon.ts
│   └── batch.ts
└── utils/ # 工具函数
    ├── anonymize.ts
    └── device.ts

✅ 优势：按需启用模块，易于替换底层实现（如 Sentry → 自研）。

---

十三、结语：监控是持续改进的引擎

一个成熟的监控体系应做到：

• 全面：覆盖错误、性能、行为
• 精准：关联用户、设备、版本
• 行动：驱动产品与技术优化
• 合规：尊重用户隐私

记住：你无法改进你无法衡量的东西。