如何实现前端错误监控和性能监控？

前端错误监控与性能监控的实现方案

一、前端错误监控

1. 错误类型与捕获方法

前端错误主要分为以下类型：

• 代码错误：语法错误、运行时错误（如变量未定义、类型错误等）、异步错误（如setTimeout中的错误）、Promise未捕获异常。
• 资源加载错误：图片、脚本、CSS等资源加载失败。
• 接口请求错误：HTTP请求失败（如4xx/5xx状态码）、超时或跨域问题。
• 框架级错误：如Vue的渲染错误、React的组件错误。

捕获方法：

• 全局捕获：
  • window.onerror：捕获运行时错误，但无法捕获资源加载错误和异步错误。
  • window.addEventListener('error')：可捕获资源加载错误（需通过event.target判断资源类型）。
  • unhandledrejection：捕获未处理的Promise错误。
• 局部捕获：
  • try-catch：适用于同步代码块，但无法捕获异步错误。
  • 框架特定方法：如Vue的errorHandler、React的ErrorBoundary。
• 跨域脚本错误处理：
  • 添加<script crossorigin>属性。
  • 服务端设置Access-Control-Allow-Origin: *，并通过window.onerror捕获详细错误信息。

2. 错误信息解析与上报

• SourceMap解析：在生产环境中，通过SourceMap文件将压缩后的错误代码映射回源码位置，便于调试。
• 上报方式：
  • Image对象：通过new Image().src = URL发送错误信息，简单且兼容性好。
  • AJAX/Fetch：发送JSON格式数据，支持更复杂的错误上下文（如用户行为日志）。
  • 第三方工具：如Sentry、Bugsnag等自动捕获并聚合错误，提供堆栈跟踪和上下文信息。

示例代码：

// 全局错误捕获
window.addEventListener('error', (event) => {
  if (event.target.tagName === 'IMG') {
    reportError({ type: 'resource', url: event.target.src });
  } else {
    reportError({ message: event.message, stack: event.error.stack });
  }
});

// Promise错误捕获
window.addEventListener('unhandledrejection', (event) => {
  reportError({ reason: event.reason });
});

二、前端性能监控

1. 核心性能指标

根据Web Vitals标准，关键指标包括：

• LCP（Largest Contentful Paint） ：最大内容渲染时间（≤2.5秒为优）。
• FID（First Input Delay） ：首次输入延迟（≤100ms为优）。
• CLS（Cumulative Layout Shift） ：累积布局偏移（≤0.1为优）。
• TTI（Time to Interactive） ：页面可交互时间。
• FCP（First Contentful Paint） ：首次内容渲染时间。

2. 数据采集方法

• Performance API：
  • performance.timing：获取页面加载各阶段时间戳（如DNS查询、TCP连接、DOM解析）。
  • performance.getEntriesByType('resource')：统计资源加载耗时。
  • PerformanceObserver：监听FP、FCP、LCP等绘制事件。
• 自定义指标：
  • 首屏时间：通过MutationObserver监听DOM变化，计算首屏内容渲染完成时间。
  • 接口耗时：重写XMLHttpRequest或fetch，记录请求响应时间。

示例代码：

// 使用PerformanceObserver监听LCP
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lcpEntry = entries.find(entry => entry.entryType === 'largest-contentful-paint');
  if (lcpEntry) {
    reportPerformance({ lcp: lcpEntry.startTime });
  }
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });

3. 数据上报优化

• 批量上报：合并多个性能指标，减少请求次数。
• 优先使用sendBeacon：在页面卸载时可靠上报数据，避免请求丢失。
• 采样率控制：根据用户量调整数据采集频率，减少服务器压力。

---

三、工具集成与配置

1. 错误监控工具

Sentry：

• 安装：npm install @sentry/browser。

• 初始化：

Sentry.init({ dsn: 'YOUR_DSN' });
// 自动捕获未处理错误

• 手动上报：Sentry.captureException(error)。

Bugsnag：

配置：

Bugsnag.start('YOUR_API_KEY');
// 自动捕获错误并附加设备信息

• 支持Vue/React插件集成。

2. 性能监控工具

• Lighthouse：生成性能报告，提供优化建议（如压缩资源、减少主线程工作）。
• 腾讯云前端性能监控（RUM） ：一站式监控方案，支持Core Web Vitals和自定义指标。
• 自建系统：结合Prometheus（数据存储）、Grafana（可视化）实现定制化监控。

---

四、数据可视化与告警

• 可视化方案：
  • Grafana：创建Dashboard展示错误率、LCP趋势、资源加载耗时等。
  • ELK Stack：通过Kibana分析日志，关联错误与性能数据。
• 告警策略：
  • 阈值触发：如错误率超过1%、LCP超过3秒时发送邮件/Slack通知。
  • 自动化处理：结合CI/CD，在监控到严重错误时自动回滚版本。

---

五、最佳实践

1. 开发环境：
   • 使用ESLint捕获语法错误。
   • 利用Chrome DevTools的Performance面板分析渲染瓶颈。
2. 生产环境：
   • 启用错误监控工具的SourceMap上传功能。
   • 按用户分层采样（如优先采集付费用户数据）。
3. 持续优化：
   • 定期Review性能报告，优化长任务（Long Tasks）和资源加载策略。
   • 结合A/B测试验证优化效果。

---

通过以上方案，可实现全面的前端错误与性能监控，快速定位问题并提升用户体验。