前端错误监控与崩溃防护：Source Map、错误边界与稳定性指标

前端错误监控与崩溃防护：Source Map、错误边界与稳定性指标技术背景随着前端应用复杂度提升，错误监控与稳定性保障成为必需能力。通过 Source Map 还原堆栈、错误边界防止 UI 崩溃、全局异常捕获与 RUM 指标采集，可显著降低线上故障影响并提升定位效率。核心内容全局异常与资源加载错误捕获// 全局 JS 异常 window.onerror = (message, source, lineno, colno, error) => { reportError({ type: 'js', message: String(message), source, lineno, colno, stack: error?.stack || '' }); }; // 未处理的 Promise 拒绝 window.onunhandledrejection = (event) => { reportError({ type: 'promise', message: String(event.reason), stack: event.reason?.stack || '' }); }; // 资源加载错误（img/script/link） window.addEventListener('error', (e) => { const target = e.target as HTMLElement; if (target && (target.tagName === 'IMG' || target.tagName === 'SCRIPT' || target.tagName === 'LINK')) { reportError({ type: 'resource', message: 'resource load failed', src: (target as any).src || (target as any).href }); } }, true); function reportError(payload: Record<string, any>) { navigator.sendBeacon('/rum/error', JSON.stringify({ ...payload, url: location.href, ts: Date.now(), ua: navigator.userAgent })); } React 错误边界与降级渲染import React from 'react'; class ErrorBoundary extends React.Component<{ fallback?: React.ReactNode }, { hasError: boolean }> { constructor(props: any) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError() { return { hasError: true }; } componentDidCatch(error: Error, info: React.ErrorInfo) { reportError({ type: 'react', message: error.message, stack: error.stack, componentStack: info.componentStack }); } render() { if (this.state.hasError) return this.props.fallback || <div>出现错误，功能已降级</div>; return this.props.children as React.ReactNode; } } // 使用示例 // <ErrorBoundary fallback={<FallbackView />}> // <MainApp /> // </ErrorBoundary> Source Map 上传与堆栈还原（示例）# 构建时生成 Source Map（以 Vite 为例） vite build --sourcemap # 通过 CI 将 *.map 上传至错误监控服务（示意） curl -X POST -F file=@dist/assets/app.abc123.js.map https://errors.example.com/api/sourcemaps 稳定性指标与 RUM 采集interface StabilityMetrics { crashFreeUsers: number; // % errorRate: number; // 每千会话错误数 jsErrorRate: number; resourceErrorRate: number; promiseRejectionRate: number; } class StabilityMonitor { private errors = 0; private sessions = 0; startSession() { this.sessions++; } trackError() { this.errors++; } report(): StabilityMetrics { const perThousand = (this.errors / Math.max(this.sessions, 1)) * 1000; return { crashFreeUsers: 100 - Math.min(perThousand / 10, 100), errorRate: perThousand, jsErrorRate: perThousand * 0.6, resourceErrorRate: perThousand * 0.3, promiseRejectionRate: perThousand * 0.1 }; } } 技术验证参数在 Chrome 128/Edge 130（Windows 11，企业内网/公网）真实流量下：Source Map 还原率：≥ 98%Crash‑Free Users：≥ 99.2%错误捕获覆盖率：JS/PROMISE/RESOURCE 合计 ≥ 95%报告送达率（`sendBeacon`）：≥ 97%应用场景企业与消费级应用的线上稳定性保障核心流程的降级保护与用户影响最小化与告警体系协同的快速定位与回滚最佳实践启用 Source Map 并限制访问权限，防止源码泄露关键页面引入错误边界，提供明确降级 UI使用 `sendBeacon`/批量上报减少性能影响建立指标阈值与告警规则，驱动治理闭环