当前位置：首页 > news >正文

前端监控：让你的网站问题无处遁形

news 2026/6/12 23:14:52

前端监控：让你的网站问题无处遁形

毒舌时刻

前端监控？这不是后端的事吗？

"我的代码没问题，不需要监控"——结果用户反馈网站崩溃，自己却一无所知，
"我有日志，还需要什么监控"——结果日志太多，根本找不到问题，
"监控太复杂了，我没时间做"——结果问题频发，用户流失。

醒醒吧，前端监控是前端开发的重要组成部分，不是可有可无的！

为什么你需要这个？

问题发现：及时发现和定位前端问题
性能优化：了解网站性能瓶颈
用户体验：了解用户真实使用情况
数据驱动：基于数据做出决策

反面教材

// 反面教材：没有任何监控 function App() { return ( <div> <h1>我的网站</h1> {/* 没有任何错误处理和监控 */} <button onClick={() => { // 可能会出错的代码 const data = fetchData(); processData(data); }}>点击我</button> </div> ); } // 反面教材：简单的console.log function fetchData() { try { const data = // 从API获取数据 return data; } catch (error) { console.log('Error:', error); // 只在控制台打印，没有持久化 return null; } }

正确的做法

// 正确的做法：使用专业的监控工具 // 安装依赖：npm install @sentry/react @sentry/tracing // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import * as Sentry from '@sentry/react'; import { BrowserTracing } from '@sentry/tracing'; // 初始化Sentry Sentry.init({ dsn: 'YOUR_SENTRY_DSN', integrations: [new BrowserTracing()], tracesSampleRate: 1.0, // 环境信息 environment: process.env.NODE_ENV, // 发布版本 release: 'my-app@1.0.0' }); ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <App /> </React.StrictMode> ); // 正确的做法：错误边界 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) { // 更新状态，下次渲染时显示降级UI return { hasError: true }; } componentDidCatch(error, errorInfo) { // 捕获错误并发送到Sentry Sentry.captureException(error, { extra: errorInfo }); } render() { if (this.state.hasError) { // 降级UI return <h1>Something went wrong.</h1>; } return this.props.children; } } // 正确的做法：性能监控 import { usePerformanceObserver } from 'web-vitals'; function PerformanceMonitor() { usePerformanceObserver(({ entries }) => { entries.forEach((entry) => { // 发送性能数据到监控服务 if (entry.name === 'first-contentful-paint') { Sentry.captureMessage('FCP', { level: 'info', extra: { value: entry.startTime } }); } if (entry.name === 'largest-contentful-paint') { Sentry.captureMessage('LCP', { level: 'info', extra: { value: entry.startTime } }); } }); }); return null; } // 正确的做法：用户行为监控 function trackUserAction(action, data) { // 发送用户行为数据到监控服务 Sentry.captureMessage(action, { level: 'info', extra: data }); } // 正确的做法：网络请求监控 function fetchWithMonitoring(url, options = {}) { const start = performance.now(); return fetch(url, options) .then(response => { const end = performance.now(); const duration = end - start; // 发送网络请求数据到监控服务 Sentry.captureMessage('Network Request', { level: 'info', extra: { url, status: response.status, duration } }); return response; }) .catch(error => { // 捕获网络请求错误 Sentry.captureException(error, { extra: { url } }); throw error; }); } // 正确的做法：在组件中使用 function App() { return ( <ErrorBoundary> <PerformanceMonitor /> <div> <h1>我的网站</h1> <button onClick={() => { trackUserAction('Button Click', { button: 'submit' }); fetchWithMonitoring('https://api.example.com/data') .then(res => res.json()) .then(data => processData(data)) .catch(error => { console.error('Error:', error); }); }} > 点击我 </button> </div> </ErrorBoundary> ); }