前端监控实践：错误、性能与行为监控指南

前端监控实践

为什么需要前端监控

在生产环境中，若缺乏有效的监控机制，应用崩溃可能持续数小时而开发团队无从知晓。主动监控是保障用户体验的关键。

反面教材

// 反面教材：没有监控
// components/Checkout.jsx
export default function Checkout() {
  const [loading, setLoading] = useState(false);
  const handleSubmit = async () => {
    setLoading(true);
    try {
      await api.checkout();
    } catch (error) {
      console.error('Checkout failed:', error);
      setError('支付失败');
    } finally {
      setLoading(false);
    }
  };
  return (
    <button onClick={handleSubmit} disabled={loading}>
      {loading ? '支付中...' : '支付'}
    </button>
  );
}

问题：错误仅在控制台打印，开发团队无法感知，用户遇到问题只能截图反馈。

前端监控的正确姿势

1. 错误监控

// 正确姿势：Sentry 错误监控
// src/utils/errorMonitoring.js
import * as Sentry from '@sentry/react';

export function initSentry() {
  Sentry.init({
    dsn: 'YOUR_SENTRY_DSN',
    integrations: [
      new Sentry.BrowserTracing(),
      new Sentry.Replay()
    ],
    tracesSampleRate: 1.0,
    replaysSessionSampleRate: 0.1
  });
}

export function captureError(error) {
  Sentry.captureException(error);
}

export function captureMessage(message) {
  Sentry.captureMessage(message);
}

使用示例：

// components/Checkout.jsx
import { captureError } from '../utils/errorMonitoring';

const handleSubmit = async () => {
  try {
    await api.checkout();
  } catch (error) {
    captureError(error);
    setError('支付失败');
  }
};

2. 性能监控

// 正确姿势：性能监控
// src/utils/performanceMonitoring.js
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

export function initPerformanceMonitoring() {
  getCLS(console.log);
  getFID(console.log);
  getFCP(console.log);
  getLCP(console.log);
  getTTFB(console.log);
}

// 集成到 Sentry
import * as Sentry from '@sentry/react';

export function sendToSentry({ name, delta, id }) {
  Sentry.metrics.distribution(name, delta, { tags: { id } });
}

getCLS(sendToSentry);
getFID(sendToSentry);
getLCP(sendToSentry);

3. 用户行为监控

// 正确姿势：用户行为监控
// src/utils/userMonitoring.js
import * as Sentry from '@sentry/react';

export function trackEvent(eventName, data) {
  Sentry.captureEvent({ message: eventName, extra: data });
}

export function trackClick(element, eventName) {
  element.addEventListener('click', () => {
    trackEvent(eventName, { timestamp: new Date().toISOString() });
  });
}

使用示例：

// components/Button.jsx
import { trackClick } from '../utils/userMonitoring';

export default function Button({ onClick, children }) {
  const buttonRef = useRef(null);
  useEffect(() => {
    if (buttonRef.current) {
      trackClick(buttonRef.current, 'button_clicked');
    }
  }, []);
  return (
    <button ref={buttonRef} onClick={onClick}>
      {children}
    </button>
  );
}