前端监控实战：构建可观测的 Web 应用

除了错误捕获，性能监控同样关键。利用 web-vitals 和 Performance Observer，我们可以追踪 FCP、LCP 等核心指标，确保页面加载流畅。

import { usePerformanceObserver } from 'web-vitals';

function PerformanceMonitor() {
  usePerformanceObserver(({ entries }) => {
    entries.forEach((entry) => {
      if (entry.name === 'largest-contentful-paint') {
        Sentry.captureMessage('LCP', {
          level: 'info',
          extra: { value: entry.startTime }
        });
      }
    });
  });
  return null;
}

对于网络请求和用户交互，建议封装统一的监控函数。这样既能记录耗时，又能捕捉请求失败的原因，避免重复造轮子。

function fetchWithMonitoring(url, options = {}) {
  const start = performance.now();
  return fetch(url, options)
    .then(response => {
      const end = performance.now();
      Sentry.captureMessage('Network Request', {
        level: 'info',
        extra: { url, status: response.status, duration: end - start }
      });
      return response;
    })
    .catch(error => {
      Sentry.captureException(error, { extra: { url } });
      throw error;
    });
}

核心总结

完善的前端监控体系应包含以下几个维度：

1. 错误监控：使用专业工具捕获并分析异常堆栈。
2. 性能监控：关注 Core Web Vitals 等关键指标。
3. 用户行为：跟踪点击流与页面浏览路径。
4. 网络监控：统计 API 请求成功率与响应时间。
5. 容错机制：利用错误边界隔离组件故障。
6. 告警联动：设置阈值触发即时通知。

监控不是为了制造焦虑，而是为了保障质量。建立可观测性，让问题在影响用户前被解决。