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

实施建议

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，可以实现对错误、性能指标和用户行为的实时监控。这有助于团队从被动接收反馈转变为主动发现问题，从而提升线上应用的稳定性和用户体验。