前端监控：别让你的应用在黑暗中运行
毒舌时刻
这应用运行得跟幽灵似的，出了问题都不知道。
各位前端同行，咱们今天聊聊前端监控。别告诉我你还在等用户反馈问题，那感觉就像在没有监控的仓库里放贵重物品——能放，但丢了都不知道。
为什么你需要前端监控
最近看到一个项目，用户反映页面经常崩溃，但开发团队根本不知道问题出在哪里。我就想问：你是在做应用还是在做猜谜游戏？
反面教材
// 反面教材：没有监控 function App() { const [data, setData] = React.useState([]); useEffect(() => { async function fetchData() { try { const response = await fetch('/api/data'); const result = await response.json(); setData(result); } catch (error) { console.error('Error fetching data:', error); } } fetchData(); }, []); return ( <div> {data.map(item => ( <div key={item.id}>{item.name}</div> ))} </div> ); } export default App;
毒舌点评：这代码，就像在黑暗中开车，出了事故都不知道怎么回事。
正确姿势
1. Sentry 监控
// 正确姿势：Sentry 监控 // 1. 安装依赖 // npm install @sentry/react @sentry/tracing // 2. 初始化 // src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import * as Sentry from '@sentry/react'; import { BrowserTracing } from '@sentry/tracing'; Sentry.init({ dsn: 'YOUR_SENTRY_DSN', integrations: [new BrowserTracing()], tracesSampleRate: , }); ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById() ); // 错误边界 // src/ErrorBoundary.jsx React ; * Sentry ; extends React.Component { constructor(props) { (props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { { hasError: true }; } componentDidCatch(error, errorInfo) { Sentry.captureException(error, { extra: errorInfo }); } render() { (this.state.hasError) { <h1>Something went wrong.</h1>; } this.props.children; } } export default ErrorBoundary; // 使用错误边界 // src/App.jsx React ; ErrorBoundary ; function App() { ( <ErrorBoundary> <div> {/* 应用内容 */} </div> </ErrorBoundary> ); } export default App;
