前端监控实践：主动发现应用崩溃与性能问题

前端监控实践：主动发现应用崩溃与性能问题

引言

以下示例仅供技术演示参考。

在现代 Web 应用中，生产环境的稳定性至关重要。如果等到用户反馈才知道应用崩溃，往往为时已晚。

为什么需要前端监控

最近有项目在生产环境崩溃了 3 小时，开发团队却一无所知。缺乏有效的监控机制会导致问题难以追踪和定位。

错误示范

// components/Checkout.jsx
import { useState } from 'react';

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. 错误监控

// 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';
import * as Sentry from '@sentry/react';

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

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 { useRef, useEffect } from 'react';
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>
  );
}

总结

通过集成 Sentry 和 Web Vitals，可以实现对错误、性能指标和用户行为的实时监控。这有助于团队从被动接收反馈转变为主动发现问题，从而提升线上应用的稳定性和用户体验。