React 性能監控與錯誤上報

核心問題與技術挑戰

現代 React 應用隨著業務復雜度增加，性能問題和運行時錯誤日益成為影響用戶體驗的關鍵因素。沒有可靠的監控與錯誤上報機制，我們將陷入被動修復而非主動預防的困境。

性能指標體系與錯誤分類

關鍵性能指標定義

// performance-metrics.js
export const PERFORMANCE_METRICS = {// 頁面加載指標FP: 'first-paint',                     // 首次繪制FCP: 'first-contentful-paint',         // 首次內容繪制LCP: 'largest-contentful-paint',       // 最大內容繪制FID: 'first-input-delay',              // 首次輸入延遲TTI: 'time-to-interactive',            // 可交互時間TBT: 'total-blocking-time',            // 總阻塞時間CLS: 'cumulative-layout-shift',        // 累積布局偏移// React 特有指標COMPONENT_RENDER_TIME: 'component-render-time', // 組件渲染時間EFFECT_TIME: 'effect-execution-time',           // Effect執行時間RERENDER_COUNT: 'component-rerender-count',     // 組件重渲染次數CONTEXT_CHANGES: 'context-change-frequency',    // Context變更頻率MEMO_HIT_RATE: 'memo-hit-rate',                 // memo命中率
};

錯誤分類與等級定義

// error-classification.js
export const ERROR_TYPES = {RENDER_ERROR: 'render-error',           // 渲染錯誤EFFECT_ERROR: 'effect-error',           // 副作用錯誤EVENT_HANDLER_ERROR: 'event-error',     // 事件處理錯誤ASYNC_ERROR: 'async-error',             // 異步操作錯誤RESOURCE_LOADING_ERROR: 'resource-error', // 資源加載錯誤API_ERROR: 'api-error',                 // API請求錯誤UNCAUGHT_ERROR: 'uncaught-error',       // 未捕獲的錯誤
};export const ERROR_LEVELS = {FATAL: 'fatal',       // 致命錯誤：導致應用崩潰或核心功能無法使用ERROR: 'error',       // 錯誤：功能無法正常工作，但不影響整體應用WARNING: 'warning',   // 警告：可能存在問題，但功能仍可使用INFO: 'info',         // 信息：值得注意的異常狀況但無功能影響
};

監控工具選型與評估

Ran tool

監控工具對比分析

工具名稱	類型	性能監控能力	錯誤捕獲	集成復雜度	數據所有權	成本結構	適用場景
React Profiler	內置	中（組件級）	無	低	完全自有	免費	開發調試
Performance API	內置	高	無	中	完全自有	免費	核心指標采集
Sentry	第三方	中	強	低	外部存儲	免費起步，按量付費	中小型應用
LogRocket	第三方	高	強	低	外部存儲	付費	用戶體驗分析
自建系統	自研	可定制	可定制	高	完全自有	開發+維護成本	大型復雜應用

自定義監控系統架構設計

// 項目結構
/src/monitoring/performancemetrics-collector.jsrender-tracker.jsinteraction-tracker.js/errorserror-boundary.jserror-handler.jsapi-error-tracker.js/reportingdata-aggregator.jstransport-layer.jsbatch-processor.js/configsampling-rules.jsmetrics-thresholds.jsindex.js

性能監控核心實現

性能數據采集器

// metrics-collector.js
import { PERFORMANCE_METRICS } from '../config/metrics-definitions';class PerformanceMetricsCollector {metrics = new Map();markTimestamps = new Map();mark(name) {this.markTimestamps.set(name, performance.now());// 兼容 performance.mark APIif (performance.mark) {performance.mark(`${name}-start`);}}measure(name, startMark) {if (!this.markTimestamps.has(startMark)) {console.warn(`Start mark "${startMark}" not found for measure "${name}"`);return;}const startTime = this.markTimestamps.get(startMark);const duration = performance.now() - startTime;// 記錄此次測量值if (!this.metrics.has(name)) {this.metrics.set(name, []);}this.metrics.get(name).push(duration);// 兼容 performance.measure APIif (performance.measure) {try {performance.measure(name, `${startMark}-start`);} catch (e) {// 某些瀏覽器在mark不存在時會拋出異常}}return duration;}getMetrics(name) {if (!this.metrics.has(name)) return null;const values = this.metrics.get(name);return {name,values,min: Math.min(...values),max: Math.max(...values),avg: values.reduce((sum, val) => sum + val, 0) / values.length,median: this.calculateMedian(values),p95: this.calculatePercentile(values, 95),};}getAllMetrics() {const result = {};this.metrics.forEach((values, name) => {result[name] = this.getMetrics(name);});return result;}calculateMedian(values) {if (!values.length) return 0;const sorted = [...values].sort((a, b) => a - b);const middle = Math.floor(sorted.length / 2);return sorted.length % 2 === 0? (sorted[middle - 1] + sorted[middle]) / 2: sorted[middle];}calculatePercentile(values, percentile) {if (!values.length) return 0;const sorted = [...values].sort((a, b) => a - b);const index = Math.ceil((percentile / 100) * sorted.length) - 1;return sorted[index];}// Web Vitals指標采集captureWebVitals() {const { onLCP, onFID, onCLS, onTTFB } = require('web-vitals');onLCP(({ value }) => {if (!this.metrics.has(PERFORMANCE_METRICS.LCP)) {this.metrics.set(PERFORMANCE_METRICS.LCP, []);}this.metrics.get(PERFORMANCE_METRICS.LCP).push(value);this.reportMetric(PERFORMANCE_METRICS.LCP, value);});onFID(({ value }) => {if (!this.metrics.has(PERFORMANCE_METRICS.FID)) {this.metrics.set(PERFORMANCE_METRICS.FID, []);}this.metrics.get(PERFORMANCE_METRICS.FID).push(value);this.reportMetric(PERFORMANCE_METRICS.FID, value);});onCLS(({ value }) => {if (!this.metrics.has(PERFORMANCE_METRICS.CLS)) {this.metrics.set(PERFORMANCE_METRICS.CLS, []);}this.metrics.get(PERFORMANCE_METRICS.CLS).push(value);this.reportMetric(PERFORMANCE_METRICS.CLS, value);});onTTFB(({ value }) => {if (!this.metrics.has('TTFB')) {this.metrics.set('TTFB', []);}this.metrics.get('TTFB').push(value);this.reportMetric('TTFB', value);});}reportMetric(name, value) {// 將指標發送到上報系統if (this.reporter) {this.reporter.sendMetric({name,value,timestamp: Date.now()});}}setReporter(reporter) {this.reporter = reporter;}
}export const metricsCollector = new PerformanceMetricsCollector();
export default metricsCollector;

React 組件性能追蹤 HOC

// render-tracker.js
import React, { Component } from 'react';
import metricsCollector from './metrics-collector';
import { PERFORMANCE_METRICS } from '../config/metrics-definitions';// 追蹤組件渲染性能的高階組件
export function withRenderTracking(WrappedComponent, options = {}) {const {trackProps = false,trackState = false,componentName = WrappedComponent.displayName || WrappedComponent.name || 'Component',threshold = 16, // 默認閾值16ms (60fps)} = options;return class RenderTracker extends Component {static displayName = `RenderTracker(${componentName})`;// 記錄重渲染次數rerenderCount = 0;// 用于記錄渲染前props和stateprevProps = null;prevState = null;componentDidMount() {this.recordMounting();}shouldComponentUpdate(nextProps, nextState) {this.prevProps = this.props;this.prevState = this.state;return true;}componentDidUpdate() {this.rerenderCount++;this.recordRerender();if (trackProps && this.prevProps) {const changedProps = this.getChangedProps(this.prevProps, this.props);if (Object.keys(changedProps).length > 0) {this.recordPropChanges(changedProps);}}if (trackState && this.prevState) {const changedState = this.getChangedProps(this.prevState, this.state);if (Object.keys(changedState).length > 0) {this.recordStateChanges(changedState);}}}getChangedProps(prev, current) {const changes = {};Object.keys(current).forEach(key => {if (prev[key] !== current[key]) {changes[key] = {from: prev[key],to: current[key]};}});return changes;}recordMounting() {const renderTime = metricsCollector.measure(`${componentName}-mount`,`${componentName}-render-start`);if (renderTime > threshold) {console.warn(`[Performance] Component ${componentName} took ${renderTime.toFixed(2)}ms to mount, ` +`which exceeds the threshold of ${threshold}ms.`);}metricsCollector.reportMetric(PERFORMANCE_METRICS.COMPONENT_RENDER_TIME,{ componentName, phase: 'mount', duration: renderTime });}recordRerender() {const renderTime = metricsCollector.measure(`${componentName}-rerender-${this.rerenderCount}`,`${componentName}-render-start`);if (renderTime > threshold) {console.warn(`[Performance] Component ${componentName} took ${renderTime.toFixed(2)}ms to rerender, ` +`which exceeds the threshold of ${threshold}ms. (Rerender #${this.rerenderCount})`);}metricsCollector.reportMetric(PERFORMANCE_METRICS.COMPONENT_RENDER_TIME,{ componentName, phase: 'update', count: this.rerenderCount, duration: renderTime });metricsCollector.reportMetric(PERFORMANCE_METRICS.RERENDER_COUNT,{ componentName, count: this.rerenderCount });}recordPropChanges(changedProps) {metricsCollector.reportMetric('prop-changes',{ componentName, changes: changedProps });}recordStateChanges(changedState) {metricsCollector.reportMetric('state-changes',{ componentName, changes: changedState });}render() {metricsCollector.mark(`${componentName}-render-start`);return <WrappedComponent {...this.props} />;}};
}// 針對函數組件的性能追蹤Hook
export function useRenderTracking(componentName, options = {}) {const {threshold = 16} = options;const renderCount = React.useRef(0);React.useEffect(() => {const renderTime = metricsCollector.measure(`${componentName}-render-${renderCount.current}`,`${componentName}-render-start`);if (renderTime > threshold) {console.warn(`[Performance] Component ${componentName} took ${renderTime.toFixed(2)}ms to render, ` +`which exceeds the threshold of ${threshold}ms. (Render #${renderCount.current})`);}metricsCollector.reportMetric(PERFORMANCE_METRICS.COMPONENT_RENDER_TIME,{ componentName, count: renderCount.current, duration: renderTime });renderCount.current++;});// 在組件渲染之前標記React.useLayoutEffect(() => {metricsCollector.mark(`${componentName}-render-start`);}, [componentName]);return renderCount.current;
}

錯誤監控與上報系統

全局錯誤邊界組件

// error-boundary.js
import React, { Component } from 'react';
import { ERROR_TYPES, ERROR_LEVELS } from '../config/error-classification';
import errorReporter from './error-reporter';export class ErrorBoundary extends Component {static defaultProps = {fallback: null,onError: null,errorLevel: ERROR_LEVELS.ERROR,componentName: 'Unknown',};state = {hasError: false,error: null,errorInfo: null};componentDidCatch(error, errorInfo) {const { componentName, errorLevel, onError } = this.props;// 更新組件狀態this.setState({hasError: true,error,errorInfo});// 獲取組件樹結構const componentStack = errorInfo?.componentStack || '';// 構造錯誤信息const errorData = {type: ERROR_TYPES.RENDER_ERROR,level: errorLevel,message: error.message,stack: error.stack,componentStack,componentName,time: Date.now(),url: window.location.href,userAgent: navigator.userAgent,// 錯誤的額外上下文context: {route: window.location.pathname,...this.props.errorContext}};// 上報錯誤errorReporter.reportError(errorData);// 調用父組件錯誤處理函數if (typeof onError === 'function') {onError(error, errorInfo);}// 記錄到控制臺console.error('[ErrorBoundary]', error, errorInfo);}resetError = () => {this.setState({hasError: false,error: null,errorInfo: null});};render() {const { fallback, children } = this.props;const { hasError, error, errorInfo } = this.state;if (hasError) {// 提供重置錯誤的方法給fallback組件const resetHandler = {resetError: this.resetError};// 如果提供了fallback組件if (fallback) {if (React.isValidElement(fallback)) {return React.cloneElement(fallback, {error,errorInfo,...resetHandler});} else if (typeof fallback === 'function') {return fallback({error,errorInfo,...resetHandler});}}// 默認錯誤UIreturn (<div className="error-boundary-fallback"><h2>組件渲染出錯</h2><p>抱歉，組件渲染出現了問題。請嘗試刷新頁面或聯系技術支持。</p><button onClick={this.resetError}>重試</button></div>);}return children;}
}// 高階組件封裝
export function withErrorBoundary(Component, options = {}) {const {fallback,onError,errorLevel = ERROR_LEVELS.ERROR,errorContext = {}} = options;const componentName = Component.displayName || Component.name || 'Unknown';const WrappedComponent = (props) => (<ErrorBoundaryfallback={fallback}onError={onError}errorLevel={errorLevel}componentName={componentName}errorContext={{...errorContext,props: Object.keys(props)}}><Component {...props} /></ErrorBoundary>);WrappedComponent.displayName = `withErrorBoundary(${componentName})`;return WrappedComponent;
}

全局錯誤捕獲服務

// error-handler.js
import { ERROR_TYPES, ERROR_LEVELS } from '../config/error-classification';class ErrorHandler {constructor(reporter) {this.reporter = reporter;this.initialized = false;this.ignorePatterns = [// 忽略一些非關鍵或第三方錯誤/Script error\./i,/ResizeObserver loop limit exceeded/i,];}initialize() {if (this.initialized) return;// 捕獲未處理的Promise異常window.addEventListener('unhandledrejection', this.handlePromiseRejection);// 捕獲全局JavaScript錯誤window.addEventListener('error', this.handleWindowError, true);// 攔截console.error (可選)if (this.options?.interceptConsoleError) {this.originalConsoleError = console.error;console.error = (...args) => {this.handleConsoleError(...args);this.originalConsoleError.apply(console, args);};}this.initialized = true;console.log('[ErrorHandler] Global error handler initialized');}setOptions(options = {}) {this.options = {captureUnhandledRejections: true,captureGlobalErrors: true,interceptConsoleError: false,samplingRate: 1.0, // 1.0 = 捕獲所有錯誤maxErrorsPerMinute: 10,...options};}setReporter(reporter) {this.reporter = reporter;}handleWindowError = (event) => {// 阻止瀏覽器默認錯誤處理event.preventDefault();const { message, filename, lineno, colno, error } = event;// 檢查是否應忽略此錯誤if (this.shouldIgnoreError(message)) {return true;}// 構造錯誤信息const errorData = {type: ERROR_TYPES.UNCAUGHT_ERROR,level: ERROR_LEVELS.FATAL,message,stack: error?.stack || '',source: {file: filename,line: lineno,column: colno},time: Date.now(),url: window.location.href,userAgent: navigator.userAgent};// 上報錯誤this.reportError(errorData);return true;};handlePromiseRejection = (event) => {// 組裝有意義的錯誤信息const error = event.reason;const message = error?.message || 'Unhandled Promise Rejection';// 檢查是否應忽略此錯誤if (this.shouldIgnoreError(message)) {return;}const errorData = {type: ERROR_TYPES.ASYNC_ERROR,level: ERROR_LEVELS.ERROR,message,stack: error?.stack || '',time: Date.now(),url: window.location.href,userAgent: navigator.userAgent};// 上報錯誤this.reportError(errorData);};handleConsoleError = (...args) => {// 提取有意義的錯誤信息const errorMessage = args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' ');// 檢查是否應忽略此錯誤if (this.shouldIgnoreError(errorMessage)) {return;}const errorData = {type: ERROR_TYPES.CONSOLE_ERROR,level: ERROR_LEVELS.WARNING,message: errorMessage.slice(0, 500), // 限制長度time: Date.now(),url: window.location.href};// 上報錯誤this.reportError(errorData);};shouldIgnoreError(message) {// 檢查是否匹配忽略模式return this.ignorePatterns.some(pattern => pattern.test(message));}addIgnorePattern(pattern) {if (pattern instanceof RegExp) {this.ignorePatterns.push(pattern);} else if (typeof pattern === 'string') {this.ignorePatterns.push(new RegExp(pattern, 'i'));}}reportError(errorData) {// 采樣控制if (Math.random() > this.options?.samplingRate) {return;}// 限流控制if (this.isRateLimited()) {return;}// 使用上報服務發送錯誤if (this.reporter) {this.reporter.sendError(errorData);}}// 實現錯誤上報頻率限制isRateLimited() {const now = Date.now();const maxPerMinute = this.options?.maxErrorsPerMinute || 10;if (!this._errorTimestamps) {this._errorTimestamps = [];}// 清理一分鐘前的錯誤記錄this._errorTimestamps = this._errorTimestamps.filter(timestamp => now - timestamp < 60000);// 檢查是否超出限制if (this._errorTimestamps.length >= maxPerMinute) {return true;}// 記錄當前錯誤時間戳this._errorTimestamps.push(now);return false;}// 清理資源destroy() {if (!this.initialized) return;window.removeEventListener('unhandledrejection', this.handlePromiseRejection);window.removeEventListener('error', this.handleWindowError, true);if (this.originalConsoleError) {console.error = this.originalConsoleError;}this.initialized = false;}
}export const errorHandler = new ErrorHandler();
export default errorHandler;

API 錯誤跟蹤器

// api-error-tracker.js
import { ERROR_TYPES, ERROR_LEVELS } from '../config/error-classification';// 創建攔截器以追蹤API請求錯誤
export function createAPIErrorTracker(reporter) {// Fetch API攔截const originalFetch = window.fetch;window.fetch = async function trackedFetch(url, options = {}) {const startTime = performance.now();const requestId = generateRequestId();// 捕獲請求信息const requestInfo = {url: typeof url === 'string' ? url : url.url,method: options.method || 'GET',requestId,startTime};try {// 記錄請求開始reporter.sendMetric({name: 'api-request-start',value: requestInfo});// 執行原始請求const response = await originalFetch.apply(this, arguments);// 計算請求時間const duration = performance.now() - startTime;// 處理非2xx響應if (!response.ok) {let responseBody = '';try {// 克隆響應以便仍可讀取主體const clonedResponse = response.clone();responseBody = await clonedResponse.text();} catch (e) {// 無法讀取響應體responseBody = 'Unable to read response body';}// 上報API錯誤const errorData = {type: ERROR_TYPES.API_ERROR,level: response.status >= 500 ? ERROR_LEVELS.ERROR : ERROR_LEVELS.WARNING,message: `API Error: ${response.status} ${response.statusText}`,time: Date.now(),url: window.location.href,context: {request: {url: requestInfo.url,method: requestInfo.method,requestId},response: {status: response.status,statusText: response.statusText,body: responseBody.substring(0, 1000) // 限制大小},duration}};reporter.sendError(errorData);}// 記錄請求完成reporter.sendMetric({name: 'api-request-complete',value: {...requestInfo,status: response.status,duration,success: response.ok}});return response;} catch (error) {// 計算請求時間const duration = performance.now() - startTime;// 上報網絡錯誤const errorData = {type: ERROR_TYPES.API_ERROR,level: ERROR_LEVELS.ERROR,message: `Network Error: ${error.message}`,stack: error.stack,time: Date.now(),url: window.location.href,context: {request: {url: requestInfo.url,method: requestInfo.method,requestId},error: error.message,duration}};reporter.sendError(errorData);// 記錄請求失敗reporter.sendMetric({name: 'api-request-failed',value: {...requestInfo,error: error.message,duration,success: false}});// 重新拋出原始錯誤throw error;}};// Axios攔截器(如果項目使用Axios)if (window.axios) {window.axios.interceptors.request.use(config => {config.requestId = generateRequestId();config.startTime = performance.now();// 記錄請求開始reporter.sendMetric({name: 'api-request-start',value: {url: config.url,method: config.method,requestId: config.requestId,startTime: config.startTime}});return config;});window.axios.interceptors.response.use(response => {const { config } = response;const duration = performance.now() - config.startTime;// 記錄請求完成reporter.sendMetric({name: 'api-request-complete',value: {url: config.url,method: config.method,requestId: config.requestId,status: response.status,duration,success: true}});return response;},error => {const { config, response } = error;// 某些情況下請求可能未發出if (!config) {return Promise.reject(error);}const duration = performance.now() - config.startTime;// 上報API錯誤const errorData = {type: ERROR_TYPES.API_ERROR,level: response?.status >= 500 ? ERROR_LEVELS.ERROR : ERROR_LEVELS.WARNING,message: `API Error: ${response?.status || 'Network Error'} ${error.message}`,time: Date.now(),url: window.location.href,context: {request: {url: config.url,method: config.method,requestId: config.requestId},response: response ? {status: response.status,statusText: response.statusText,data: response.data} : null,duration}};reporter.sendError(errorData);// 記錄請求失敗reporter.sendMetric({name: 'api-request-failed',value: {url: config.url,method: config.method,requestId: config.requestId,error: error.message,status: response?.status,duration,success: false}});return Promise.reject(error);});}// 生成請求IDfunction generateRequestId() {return `req_${Date.now()}_${Math.random().toString(36).substring(2, 10)}`;}return {// 恢復原始方法restore: () => {window.fetch = originalFetch;if (window.axios) {window.axios.interceptors.request.eject(0);window.axios.interceptors.response.eject(0);}}};
}

數據上報與聚合系統

上報傳輸層

// transport-layer.js
class DataTransport {constructor(options = {}) {this.options = {endpoint: '/monitoring/collect',batchSize: 10,flushInterval: 5000, // 5秒retryAttempts: 3,retryDelay: 1000,useBeacon: true,...options};this.buffer = [];this.isSending = false;this.flushTimer = null;this.retryQueue = [];// 啟動定期刷新this.startPeriodicFlush();// 頁面卸載時發送所有待處理數據window.addEventListener('beforeunload', this.flushBeforeUnload);}setEndpoint(endpoint) {this.options.endpoint = endpoint;}send(data) {// 添加通用字段const enrichedData = {...data,timestamp: data.timestamp || Date.now(),session: this.getSessionInfo(),user: this.getUserInfo(),app: this.getAppInfo()};// 添加到緩沖區this.buffer.push(enrichedData);// 如果達到批處理大小，立即發送if (this.buffer.length >= this.options.batchSize) {this.flush();}return true;}async flush() {if (this.isSending || this.buffer.length === 0) {return;}this.isSending = true;// 提取當前緩沖區數據const dataToSend = [...this.buffer];this.buffer = [];try {// 嘗試發送數據const success = await this.sendData(dataToSend);if (!success) {// 如果發送失敗，將數據添加到重試隊列this.addToRetryQueue(dataToSend);}} catch (error) {console.error('[Monitoring] Error sending monitoring data:', error);// 發送失敗，添加到重試隊列this.addToRetryQueue(dataToSend);}this.isSending = false;// 處理重試隊列if (this.retryQueue.length > 0) {this.processRetryQueue();}}async sendData(data) {// 檢查頁面是否正在卸載if (this.isUnloading && this.options.useBeacon && navigator.sendBeacon) {// 使用Beacon API發送數據（更可靠地處理頁面卸載場景）const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });return navigator.sendBeacon(this.options.endpoint, blob);} else {// 使用標準fetch APItry {const response = await fetch(this.options.endpoint, {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify(data),// 不跟隨重定向redirect: 'error',// 發送憑據（例如cookies）credentials: 'same-origin',// 設置較短的超時時間signal: AbortSignal.timeout(10000) // 10秒超時});return response.ok;} catch (error) {console.error('[Monitoring] Transport error:', error);return false;}}}addToRetryQueue(data) {// 添加到重試隊列，并記錄重試次數this.retryQueue.push({data,attempts: 0,nextRetry: Date.now() + this.options.retryDelay});}async processRetryQueue() {if (this.isProcessingRetryQueue) {return;}this.isProcessingRetryQueue = true;const now = Date.now();const itemsToRetry = this.retryQueue.filter(item => item.nextRetry <= now);// 更新重試隊列，刪除將要重試的項目this.retryQueue = this.retryQueue.filter(item => item.nextRetry > now);for (const item of itemsToRetry) {// 增加重試次數item.attempts++;try {const success = await this.sendData(item.data);if (!success && item.attempts < this.options.retryAttempts) {// 計算下一次重試時間（使用指數退避）const nextRetryDelay = this.options.retryDelay * Math.pow(2, item.attempts - 1);item.nextRetry = Date.now() + nextRetryDelay;// 重新添加到隊列this.retryQueue.push(item);}} catch (error) {if (item.attempts < this.options.retryAttempts) {// 計算下一次重試時間const nextRetryDelay = this.options.retryDelay * Math.pow(2, item.attempts - 1);item.nextRetry = Date.now() + nextRetryDelay;// 重新添加到隊列this.retryQueue.push(item);}}}this.isProcessingRetryQueue = false;}startPeriodicFlush() {// 定期刷新緩沖區this.flushTimer = setInterval(() => {if (this.buffer.length > 0) {this.flush();}// 處理重試隊列if (this.retryQueue.length > 0) {this.processRetryQueue();}}, this.options.flushInterval);}flushBeforeUnload = () => {// 標記正在卸載，這會使sendData使用navigator.beaconthis.isUnloading = true;// 取消計時器clearInterval(this.flushTimer);// 合并重試隊列和當前緩沖區const allPendingData = [...this.buffer,...this.retryQueue.map(item => item.data).flat()];if (allPendingData.length > 0) {// 使用同步方式發送所有數據const blob = new Blob([JSON.stringify(allPendingData)], { type: 'application/json' });navigator.sendBeacon(this.options.endpoint, blob);}};getSessionInfo() {// 在實際應用中，應該從會話管理系統獲取這些信息return {id: window.sessionStorage.getItem('session_id') || 'unknown',startedAt: parseInt(window.sessionStorage.getItem('session_start') || Date.now()),pageViews: parseInt(window.sessionStorage.getItem('page_views') || '1')};}getUserInfo() {// 在實際應用中，應該從身份驗證系統獲取這些信息// 注意：確保遵守隱私法規和公司政策return {// 使用匿名ID或經過同意的用戶標識符id: window.localStorage.getItem('user_id') || 'anonymous',// 可以添加經過許可的用戶屬性type: window.localStorage.getItem('user_type') || 'visitor'};}getAppInfo() {return {name: window.APP_NAME || document.title,version: window.APP_VERSION || '1.0',environment: window.APP_ENV || process.env.NODE_ENV || 'production',reactVersion: React.version,viewportSize: `${window.innerWidth}x${window.innerHeight}`,language: navigator.language,platform: navigator.platform};}destroy() {// 清理資源clearInterval(this.flushTimer);window.removeEventListener('beforeunload', this.flushBeforeUnload);// 發送所有待處理數據if (this.buffer.length > 0 || this.retryQueue.length > 0) {this.flushBeforeUnload();}}
}export const dataTransport = new DataTransport();
export default dataTransport;

數據聚合與批處理器

// batch-processor.js
import dataTransport from './transport-layer';class MonitoringReporter {constructor(transport) {this.transport = transport;this.metricsBuffer = {};this.errorBuffer = [];this.flushInterval = 10000; // 10秒this.bufferSize = {metrics: 20,errors: 5};// 啟動定期批處理this.startPeriodicFlush();}// 發送性能指標sendMetric(metric) {const { name, value } = metric;// 按指標類型進行分組if (!this.metricsBuffer[name]) {this.metricsBuffer[name] = [];}// 添加時間戳const metricWithTimestamp = {...metric,timestamp: metric.timestamp || Date.now()};// 添加到緩沖區this.metricsBuffer[name].push(metricWithTimestamp);// 如果該類型的指標達到閾值，就發送此類型的所有指標if (this.metricsBuffer[name].length >= this.bufferSize.metrics) {this.flushMetricsByType(name);}return true;}// 發送錯誤sendError(error) {// 添加到錯誤緩沖區this.errorBuffer.push({...error,timestamp: error.timestamp || Date.now()});// 如果錯誤達到閾值，立即發送if (this.errorBuffer.length >= this.bufferSize.errors) {this.flushErrors();}return true;}// 按指標類型刷新緩沖區flushMetricsByType(metricType) {if (!this.metricsBuffer[metricType] || this.metricsBuffer[metricType].length === 0) {return;}// 提取要發送的指標const metricsToSend = [...this.metricsBuffer[metricType]];// 清空緩沖區this.metricsBuffer[metricType] = [];// 構造批量數據包const payload = {type: 'metric',metricType,data: metricsToSend};// 發送到傳輸層this.transport.send(payload);}// 刷新所有錯誤flushErrors() {if (this.errorBuffer.length === 0) {return;}// 提取要發送的錯誤const errorsToSend = [...this.errorBuffer];// 清空緩沖區this.errorBuffer = [];// 構造批量數據包const payload = {type: 'error',data: errorsToSend};// 發送到傳輸層this.transport.send(payload);}// 刷新所有指標flushAllMetrics() {// 遍歷所有指標類型Object.keys(this.metricsBuffer).forEach(metricType => {if (this.metricsBuffer[metricType].length > 0) {this.flushMetricsByType(metricType);}});}// 刷新所有數據flushAll() {this.flushAllMetrics();this.flushErrors();}// 啟動定期刷新startPeriodicFlush() {this.flushTimer = setInterval(() => {this.flushAll();}, this.flushInterval);// 頁面隱藏時刷新數據document.addEventListener('visibilitychange', () => {if (document.visibilityState === 'hidden') {this.flushAll();}});}// 設置緩沖區大小setBufferSize(type, size) {if (type === 'metrics' || type === 'errors') {this.bufferSize[type] = size;}}// 銷毀實例，清理資源destroy() {clearInterval(this.flushTimer);this.flushAll();}
}export const reporter = new MonitoringReporter(dataTransport);
export default reporter;

系統集成與自動化配置

監控系統初始化

// index.js
import React from 'react';
import { PERFORMANCE_METRICS } from './config/metrics-definitions';
import { ERROR_LEVELS } from './config/error-classification';
import metricsCollector from './performance/metrics-collector';
import { withRenderTracking, useRenderTracking } from './performance/render-tracker';
import { ErrorBoundary, withErrorBoundary } from './errors/error-boundary';
import errorHandler from './errors/error-handler';
import { createAPIErrorTracker } from './errors/api-error-tracker';
import reporter from './reporting/batch-processor';
import dataTransport from './reporting/transport-layer';// 默認配置
const defaultConfig = {enablePerformanceMonitoring: true,enableErrorMonitoring: true,errorReportingEndpoint: '/api/error-reporting',metricsReportingEndpoint: '/api/metrics-reporting',samplingRate: 0.1, // 采樣 10% 的用戶logLevel: ERROR_LEVELS.ERROR, // 僅報告錯誤及以上級別maxErrorsPerMinute: 10,captureConsoleErrors: false,enableReactProfiling: false,
};// 監控系統主類
class ReactMonitoring {constructor() {this.initialized = false;this.config = { ...defaultConfig };}init(userConfig = {}) {if (this.initialized) {console.warn('[ReactMonitoring] Already initialized. Call destroy() first if you need to reinitialize.');return this;}// 合并用戶配置this.config = {...defaultConfig,...userConfig,};// 隨機采樣決定是否為這個用戶啟用監控const shouldMonitor = Math.random() < this.config.samplingRate;if (!shouldMonitor) {console.log('[ReactMonitoring] This session was not selected for monitoring (sampling)');return this;}// 配置數據傳輸層dataTransport.setEndpoint(this.config.errorReportingEndpoint);// 初始化錯誤處理if (this.config.enableErrorMonitoring) {this.initErrorMonitoring();}// 初始化性能監控if (this.config.enablePerformanceMonitoring) {this.initPerformanceMonitoring();}this.initialized = true;console.log('[ReactMonitoring] Initialized successfully');return this;}initErrorMonitoring() {// 配置錯誤處理器errorHandler.setOptions({captureUnhandledRejections: true,captureGlobalErrors: true,interceptConsoleError: this.config.captureConsoleErrors,samplingRate: 1.0, // 捕獲所有發生的錯誤maxErrorsPerMinute: this.config.maxErrorsPerMinute,});// 設置錯誤上報服務errorHandler.setReporter(reporter);// 初始化全局錯誤處理errorHandler.initialize();// 創建API錯誤跟蹤器this.apiErrorTracker = createAPIErrorTracker(reporter);console.log('[ReactMonitoring] Error monitoring initialized');}initPerformanceMonitoring() {// 配置指標收集器metricsCollector.setReporter(reporter);// 捕獲Web VitalsmetricsCollector.captureWebVitals();// 捕獲首次加載性能this.captureInitialPerformance();if (this.config.enableReactProfiling && window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {this.setupReactProfiling();}console.log('[ReactMonitoring] Performance monitoring initialized');}captureInitialPerformance() {// 利用Performance Timeline API捕獲關鍵性能指標if (window.performance && performance.timing) {// 等待加載完成if (document.readyState === 'complete') {this.processPerformanceTiming();} else {window.addEventListener('load', () => {// 延遲一下以確保所有指標都已可用setTimeout(() => this.processPerformanceTiming(), 0);});}}}processPerformanceTiming() {const timing = performance.timing;// 計算關鍵性能指標const metrics = {// DNS解析時間dns: timing.domainLookupEnd - timing.domainLookupStart,// TCP連接時間tcp: timing.connectEnd - timing.connectStart,// 請求時間request: timing.responseStart - timing.requestStart,// 響應時間response: timing.responseEnd - timing.responseStart,// DOM解析時間domParse: timing.domInteractive - timing.responseEnd,// DOM內容加載domContentLoaded: timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart,// DOM完全加載domComplete: timing.domComplete - timing.domLoading,// 頁面完全加載時間pageLoad: timing.loadEventEnd - timing.navigationStart,// 首次渲染時間(近似)firstPaint: timing.domLoading - timing.navigationStart,};// 上報指標Object.entries(metrics).forEach(([name, value]) => {reporter.sendMetric({name: `page_${name}`,value,category: 'page-load',});});}setupReactProfiling() {// 這需要React DevTools擴展的鉤子const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;if (hook && hook.supportsFiber) {// 獲取React實例const renderers = hook.getFiberRoots ? hook.getFiberRoots(1) : null;if (renderers) {for (const renderer of renderers) {// 添加分析器if (hook.onCommitFiberRoot) {const originalOnCommitFiberRoot = hook.onCommitFiberRoot.bind(hook);hook.onCommitFiberRoot = (...args) => {const [, root] = args;try {this.processReactCommit(root);} catch (e) {console.error('[ReactMonitoring] Error in React profiling:', e);}// 調用原始方法return originalOnCommitFiberRoot(...args);};}}}}}processReactCommit(root) {// 這是一個簡化版的實現// 實際上，從Fiber樹提取性能數據很復雜，需要深入了解React內部工作原理try {const commitTime = performance.now();reporter.sendMetric({name: PERFORMANCE_METRICS.COMPONENT_RENDER_TIME,value: {commitTime,components: this.extractComponentInfo(root)}});} catch (e) {console.error('[ReactMonitoring] Failed to process React commit:', e);}}extractComponentInfo(root) {// 這是一個簡化的實現// 在實際應用中，需要遍歷Fiber樹來提取組件信息return {timestamp: performance.now(),// 這里應該有更多組件特定的數據};}// 提供React組件和鉤子getReactComponents() {return {ErrorBoundary,withErrorBoundary,withRenderTracking,useRenderTracking,};}// 清理和銷毀監控系統destroy() {if (!this.initialized) {return;}// 清理錯誤處理if (errorHandler) {errorHandler.destroy();}// 清理API錯誤跟蹤if (this.apiErrorTracker) {this.apiErrorTracker.restore();}// 清理數據上報if (reporter) {reporter.destroy();}if (dataTransport) {dataTransport.destroy();}this.initialized = false;console.log('[ReactMonitoring] System destroyed and cleaned up');}
}// 創建單例實例
export const reactMonitoring = new ReactMonitoring();// 導出React組件和鉤子，方便直接使用
export const {ErrorBoundary,withErrorBoundary,withRenderTracking,useRenderTracking,
} = reactMonitoring.getReactComponents();// 默認導出監控系統實例
export default reactMonitoring;

應用實踐

應用集成示例

// 在應用入口 index.js 中初始化
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reactMonitoring from './monitoring';// 初始化監控系統
reactMonitoring.init({enablePerformanceMonitoring: true,enableErrorMonitoring: true,errorReportingEndpoint: 'https://api.example.com/monitoring/errors',metricsReportingEndpoint: 'https://api.example.com/monitoring/metrics',samplingRate: process.env.NODE_ENV === 'production' ? 0.1 : 1.0, // 生產環境采樣10%，開發環境全采樣
});// 使用全局錯誤邊界包裝應用
const MonitoredApp = () => (<reactMonitoring.ErrorBoundaryfallback={<div>應用出現了問題，正在嘗試恢復...</div>}errorLevel="fatal"><App /></reactMonitoring.ErrorBoundary>
);ReactDOM.render(<MonitoredApp />, document.getElementById('root'));

組件級性能監控示例

// 使用HOC監控類組件
import React, { Component } from 'react';
import { withRenderTracking, withErrorBoundary } from './monitoring';class ExpensiveComponent extends Component {render() {return (<div>{/* 復雜組件邏輯 */}{this.props.items.map(item => (<div key={item.id}>{item.name}</div>))}</div>);}
}// 應用監控HOC
export default withErrorBoundary(withRenderTracking(ExpensiveComponent, {componentName: 'ExpensiveComponent',threshold: 8, // 8ms渲染警告閾值trackProps: true}), {fallback: <div>組件加載失敗</div>,errorLevel: 'error'}
);// 使用Hook監控函數組件
import React, { useState } from 'react';
import { useRenderTracking } from './monitoring';function ExpensiveCounter(props) {// 監控組件渲染性能const renderCount = useRenderTracking('ExpensiveCounter', { threshold: 5 });const [count, setCount] = useState(0);// 模擬一個可能導致性能問題的操作const expensiveCalculation = () => {// 假設這是一個昂貴的計算let result = 0;for (let i = 0; i < 1000000; i++) {result += i;}return result;};const result = expensiveCalculation();return (<div><p>Count: {count}</p><p>Calculation: {result}</p><p>Render count: {renderCount}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}export default ExpensiveCounter;

監控數據可視化方案

// 監控儀表板組件
import React, { useState, useEffect } from 'react';
import { LineChart, BarChart, PieChart } from 'some-chart-library';
import { fetchMetricsData, fetchErrorData } from '../api';export function PerformanceDashboard() {const [metrics, setMetrics] = useState(null);const [errors, setErrors] = useState(null);const [timeRange, setTimeRange] = useState('24h');const [loading, setLoading] = useState(true);useEffect(() => {async function loadData() {setLoading(true);try {// 并行加載數據const [metricsData, errorsData] = await Promise.all([fetchMetricsData({ timeRange }),fetchErrorData({ timeRange })]);setMetrics(metricsData);setErrors(errorsData);} catch (err) {console.error('Failed to load monitoring data:', err);} finally {setLoading(false);}}loadData();}, [timeRange]);if (loading) {return <div>Loading dashboard data...</div>;}// 渲染性能指標圖表return (<div className="monitoring-dashboard"><div className="dashboard-header"><h1>React Application Monitoring</h1><div className="time-selector"><button onClick={() => setTimeRange('1h')}>Last Hour</button><button onClick={() => setTimeRange('24h')}>Last 24 Hours</button><button onClick={() => setTimeRange('7d')}>Last 7 Days</button></div></div><div className="dashboard-section"><h2>Core Web Vitals</h2><div className="metrics-grid"><MetricCardtitle="LCP"value={metrics.lcp.median}threshold={2500}unit="ms"description="Largest Contentful Paint"/><MetricCardtitle="FID"value={metrics.fid.median}threshold={100}unit="ms"description="First Input Delay"/><MetricCardtitle="CLS"value={metrics.cls.median}threshold={0.1}unit=""description="Cumulative Layout Shift"/></div><h3>LCP Trend</h3><LineChartdata={metrics.lcp.history}xKey="timestamp"yKey="value"threshold={2500}/></div><div className="dashboard-section"><h2>Component Performance</h2><BarChartdata={metrics.componentRenderTime}xKey="componentName"yKey="avgDuration"sortBy="avgDuration"/></div><div className="dashboard-section"><h2>Error Distribution</h2><PieChartdata={errors.byType}valueKey="count"labelKey="type"/><h3>Recent Errors</h3><ErrorsTable errors={errors.recent} /></div></div>);
}// 單個指標卡片組件
function MetricCard({ title, value, threshold, unit, description }) {// 根據閾值確定狀態const getStatus = () => {if (value <= threshold * 0.75) return 'good';if (value <= threshold) return 'warning';return 'poor';};const status = getStatus();return (<div className={`metric-card ${status}`}><div className="metric-title">{title}</div><div className="metric-value">{value.toFixed(2)}{unit}</div><div className="metric-description">{description}</div><div className="metric-threshold">{status === 'good' && '? Good'}{status === 'warning' && '?? Needs Improvement'}{status === 'poor' && '? Poor'}</div></div>);
}// 錯誤表格組件
function ErrorsTable({ errors }) {return (<table className="errors-table"><thead><tr><th>Time</th><th>Type</th><th>Message</th><th>Component</th><th>Actions</th></tr></thead><tbody>{errors.map(error => (<tr key={error.id}><td>{new Date(error.timestamp).toLocaleString()}</td><td>{error.type}</td><td>{error.message}</td><td>{error.componentName || 'N/A'}</td><td><button onClick={() => viewErrorDetails(error.id)}>Details</button></td></tr>))}</tbody></table>);
}

性能優化建議與實施方案

基于監控收集的數據，我們可以制定針對性的優化策略：

組件懶加載與代碼分割：根據頁面加載性能數據，識別首屏加載瓶頸，將非關鍵組件延遲加載。
狀態管理優化：利用渲染追蹤數據，識別過度渲染的組件，應用 React.memo、useMemo 和 useCallback 降低不必要的重渲染。
虛擬化長列表：對于識別出渲染時間過長的列表組件，應用窗口化技術(react-window)僅渲染可視區域項目。
圖片與資源優化：根據資源加載錯誤和性能數據，優化靜態資源加載策略，應用懶加載與適當的分辨率。
錯誤預防機制：基于收集的錯誤模式構建更健壯的輸入驗證和錯誤恢復機制，提高應用穩定性。