前端监控：别让你的应用在黑暗中运行
前端监控：别让你的应用在黑暗中运行
毒舌时刻
这应用运行得跟幽灵似的，出了问题都不知道。
各位前端同行，咱们今天聊聊前端监控。别告诉我你还在等用户反馈问题，那感觉就像在没有监控的仓库里放贵重物品——能放，但丢了都不知道。
为什么你需要前端监控
最近看到一个项目，用户反映页面经常崩溃，但开发团队根本不知道问题出在哪里。我就想问：你是在做应用还是在做猜谜游戏？
反面教材
// 反面教材：没有监控 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: 1.0, }); ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); // 3. 错误边界 // src/ErrorBoundary.jsx import React from 'react'; import * as Sentry from '@sentry/react'; class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { Sentry.captureException(error, { extra: errorInfo }); } render() { if (this.state.hasError) { return <h1>Something went wrong.</h1>; } return this.props.children; } } export default ErrorBoundary; // 4. 使用错误边界 // src/App.jsx import React from 'react'; import ErrorBoundary from './ErrorBoundary'; function App() { return ( <ErrorBoundary> <div> {/* 应用内容 */} </div> </ErrorBoundary> ); } export default App; 2. 性能监控
// 正确姿势：性能监控 // 1. 使用 Lighthouse // npm install -g lighthouse // lighthouse https://example.com // 2. 使用 Web Vitals import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals'; function sendToAnalytics({ name, delta, id }) { console.log(name, delta, id); // 发送到分析服务 // navigator.sendBeacon('/analytics', JSON.stringify({ name, delta, id })); } getCLS(sendToAnalytics); getFID(sendToAnalytics); getFCP(sendToAnalytics); getLCP(sendToAnalytics); getTTFB(sendToAnalytics); 3. 用户行为监控
// 正确姿势：用户行为监控 // 1. 使用 Google Analytics // index.html <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GA_MEASUREMENT_ID'); </script> // 2. 自定义事件 function trackEvent(eventName, eventParams) { gtag('event', eventName, eventParams); } // 使用 <button onClick={() => trackEvent('button_click', { button_name: 'submit' })}> 提交 </button> 4. 日志监控
// 正确姿势：日志监控 // 1. 配置日志级别 const LOG_LEVELS = { ERROR: 0, WARN: 1, INFO: 2, DEBUG: 3 }; let currentLevel = LOG_LEVELS.INFO; function log(level, message, data) { if (level <= currentLevel) { const timestamp = new Date().toISOString(); const logMessage = `[${timestamp}] [${Object.keys(LOG_LEVELS)[level]}] ${message}`; switch (level) { case LOG_LEVELS.ERROR: console.error(logMessage, data); // 发送到监控服务 break; case LOG_LEVELS.WARN: console.warn(logMessage, data); break; case LOG_LEVELS.INFO: console.info(logMessage, data); break; case LOG_LEVELS.DEBUG: console.debug(logMessage, data); break; } } } // 使用 log(LOG_LEVELS.ERROR, 'Failed to fetch data', { error: 'Network error' }); log(LOG_LEVELS.INFO, 'User logged in', { userId: 123 }); 毒舌点评：这才叫前端监控，让你的应用在阳光下运行，任何问题都逃不过你的眼睛。