通过分层拦截实现前端容错：1. 使用React错误边界捕获渲染异常，显示降级UI；2. 全局监听onerror和unhandledrejection处理脚本与Promise错误；3. 为资源加载设置fallback机制；4. 统一上报错误至监控系统，提升稳定性和可维护性。
前端项目中，错误边界能防止组件异常导致整个应用崩溃。虽然 JavaScript 错误无法像 React 的 Error Boundary 那样捕获，但可以通过多种手段模拟和实现全局的容错机制。核心思路是拦截渲染错误、异步异常和资源加载问题，保证用户仍可使用部分功能。
1. 利用 React 错误边界处理渲染异常
在 React 应用中，可以创建类组件作为错误边界，捕获子组件在渲染时的同步错误。
- 使用 componentDidCatch(error, info) 捕获错误并记录堆栈信息
- 通过 static getDerivedStateFromError() 控制降级 UI 显示
- 将错误边界包裹关键路由或独立模块，比如页面级组件或复杂小组件
示例：
class ErrorBoundary extends React.Component {
state = { hasError: false };
<p>static getDerivedStateFromError() {
return { hasError: true };
}</p><p>componentDidCatch(error, info) {
console.error("Error caught:", error, info);
// 可以上报到监控系统
}</p><p>render() {
if (this.state.hasError) {
return <div>页面出错了，请刷新重试。</div>;
}
return this.props.children;
}
}
2. 全局监听未捕获的 JavaScript 异常
通过全局事件监听，捕获脚本执行中的运行时错误，包括异步任务中的 reject 未处理问题。
立即学习“前端免费学习笔记（深入）”；
- 监听 window.onerror 捕获同步错误
- 监听 window.addEventListener('unhandledrejection') 处理 Promise 异常
- 收集错误信息（消息、文件、行号、堆栈）并上报日志服务
示例：
window.onerror = function(message, source, lineno, colno, error) {
console.error("Global error:", { message, source, lineno, colno, error });
// 上报逻辑
reportErrorToServer({
type: 'runtime',
message,
stack: error?.stack,
url: window.location.href
});
return true; // 阻止默认处理
};
<p>window.addEventListener('unhandledrejection', event => {
console.warn("Unhandled promise rejection:", event.reason);
reportErrorToServer({
type: 'promise',
reason: event.reason?.toString(),
stack: event.reason?.stack
});
});
3. 资源加载失败的兜底处理
图片、脚本、样式等静态资源加载失败可能影响体验，需设置 fallback 或提示。
- 为 img 标签添加 onerror 回调，替换为默认图
- 动态 import() 失败时提供备用逻辑或提示
- 监控 CDN 资源加载，切换备用源或本地缓存
示例：
// 图片错误处理
<img
src="user-avatar.jpg"
onError={(e) => e.target.src = "/default-avatar.png"}
/>
<p>// 动态加载组件容错
import(<code>./modules/${moduleName}.js</code>)
.then(module => { /<em> 使用模块 </em>/ })
.catch(err => {
console.warn("Module load failed, using fallback");
// 加载备用方案或展示提示
});
4. 统一错误上报与监控
收集所有来源的错误信息，集中处理，便于排查和优化。
- 定义统一的错误上报函数，包含上下文（用户 ID、页面路径、时间）
- 对接 Sentry、Bugsnag 等工具，或自建日志收集接口
- 限制上报频率，避免重复发送相同错误
建议在上报前做简单去重，例如根据错误类型和堆栈摘要生成 key 缓存一段时间。
基本上就这些。关键是分层拦截：组件层用 Error Boundary，逻辑层监听异常，资源层设 fallback，最后统一上报。机制不复杂，但容易忽略细节。做好了，线上问题能快速定位，用户体验也更稳定。
