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

性能监控

利用 web-vitals 库采集核心网页指标并上报至 Sentry。

// src/utils/performanceMonitoring.js
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';
import * as Sentry from '@sentry/react';

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

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

用户行为监控

记录关键用户操作事件，便于分析转化漏斗与异常路径。

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

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