前端监控实战：别让生产事故等你反馈

在实际组件中使用起来也很简单，把原来的 console.error 替换掉即可：

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

const handleSubmit = async () => {
  try {
    await api.checkout();
  } catch (error) {
    captureError(error); // 自动上报到监控平台
    setError('支付失败');
  }
};

这样一旦出错，后台立刻收到通知，附带堆栈信息和上下文，排查效率会高很多。

性能监控

除了报错，页面加载慢也是大问题。利用 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() {
  // 将指标发送到 Sentry 进行聚合
  const sendToSentry = ({ name, delta, id }) => {
    Sentry.metrics.distribution(name, delta, { tags: { id } });
  };

  getCLS(sendToSentry);
  getFID(sendToSentry);
  getLCP(sendToSentry);
  getFCP(console.log); // 基础指标保留本地日志
  getTTFB(console.log);
}

这里要注意，不要把所有指标都只丢给 console.log，那样数据分散难以统计。统一接入监控平台才能看到趋势。

用户行为监控

有时候用户没报错，但操作路径有问题。我们需要埋点记录关键交互。

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

配合 React 组件使用时，结合 useRef 和 useEffect 监听按钮点击：

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

这才叫现代前端开发思路：实时监控，问题早发现早解决。与其被动等待投诉，不如主动掌握线上状态。