前端监控实战：错误、性能与用户行为实时监测

前端监控的正确姿势

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>
  );
}

技术点评：这才叫现代前端，实时监控，问题早发现早解决。