前端监控：别等用户告诉你应用崩了
毒舌时刻
这代码写得跟网红滤镜似的——仅供参考。
各位前端同行，咱们今天聊聊前端监控。别告诉我你还在等用户截图告诉你应用崩了，那感觉就像等邻居来告诉你你家着火了——能知道，但已经晚了。
为什么你需要前端监控
最近看到一个项目，生产环境崩溃了 3 小时，开发团队却一无所知。我就想问：你是在做应用还是在做猜谜游戏？
反面教材
// 反面教材：没有监控 // 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 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 { Sentry.captureMessage(message); } // 使用 // components/Checkout.jsx import { captureError } from ; const handleSubmit = async () => { try { await api.checkout(); } catch () { captureError(); setError(); } };
