前端监控实践：错误、性能与行为监控指南

前端监控实践

为什么需要前端监控

在生产环境中，若缺乏有效的监控机制，应用崩溃可能持续数小时而开发团队无从知晓。主动监控是保障用户体验的关键。

反面教材

// 反面教材：没有监控
// components/Checkout.jsx
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. 错误监控

// 正确姿势：Sentry 错误监控
// src/utils/errorMonitoring.js
import * as Sentry  ;

  () {
  .({
    : ,
    : [
       .(),
       .()
    ],
    : ,
    : 
  });
}

  () {
  .(error);
}

  () {
  .(message);
}