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

2. 组件级错误边界

React 组件树中的错误如果未被捕获，会导致整个应用崩溃。使用 ErrorBoundary 可以隔离故障。

import React from 'react';
import * as Sentry from '@sentry/react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 将错误详情上报到 Sentry
    Sentry.captureException(error, { extra: errorInfo });
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

3. 性能与网络监控

除了错误，性能指标同样重要。我们可以利用 web-vitals 和 PerformanceObserver 采集 FCP、LCP 等核心指标。

import { usePerformanceObserver } from 'web-vitals';

function PerformanceMonitor() {
  usePerformanceObserver(({ entries }) => {
    entries.forEach((entry) => {
      if (entry.name === 'first-contentful-paint') {
        Sentry.captureMessage('FCP', { level: 'info', extra: { value: entry.startTime } });
      }
      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();
      const duration = end - start;
      Sentry.captureMessage('Network Request', {
        level: 'info',
        extra: { url, status: response.status, duration }
      });
      return response;
    })
    .catch(error => {
      Sentry.captureException(error, { extra: { url } });
      throw error;
    });
}

4. 业务行为追踪

了解用户如何操作你的应用，有助于发现体验断点。

function trackUserAction(action, data) {
  Sentry.captureMessage(action, { level: 'info', extra: data });
}

// 在组件中使用
function App() {
  return (
    <ErrorBoundary>
      <PerformanceMonitor />
      <div>
        <h1>我的网站</h1>
        <button onClick={() => {
          trackUserAction('Button Click', { button: 'submit' });
          fetchWithMonitoring('https://api.example.com/data')
            .then(res => res.json())
            .then(data => processData(data))
            .catch(error => console.error('Error:', error));
        }}>
          点击我
        </button>
      </div>
    </ErrorBoundary>
  );
}

总结

做好前端监控，不仅仅是为了抓 Bug，更是为了建立一套可观测体系。关键点包括：

• 错误监控：利用 Sentry 等工具自动捕获异常堆栈。
• 性能监控：关注 Core Web Vitals 指标，如 FCP、LCP。
• 用户行为：跟踪关键交互事件，分析转化漏斗。
• 网络监控：记录 API 响应时间与成功率。
• 告警机制：设置阈值，出现问题及时通知。

通过数据驱动，你可以从被动救火转向主动预防，真正保障线上服务的质量与用户体验。