前端监控体系搭建：错误捕获、性能与行为分析（Vue 3 + Sentry）

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 核心指标

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 上报策略设计

// 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 → 自研）。

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

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

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

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