错误边界是React中用于捕获子组件树JavaScript错误并渲染降级UI的类组件，通过static getDerivedStateFromError和componentDidCatch实现，不捕获事件处理、异步代码、服务端渲染及自身错误。
错误边界（Error Boundary）是 React 中一种特殊的组件，用于捕获其子组件树中 JavaScript 运行时错误，防止整个应用崩溃，并提供降级 UI。它不能捕获事件处理函数、异步代码（如 setTimeout 或 Promise）、服务端渲染中的错误，也不能捕获自身抛出的错误。
错误边界的工作原理
错误边界通过两个生命周期方法实现：
- static getDerivedStateFromError(error)：在渲染阶段被调用，用于更新 state，触发备用 UI 渲染（如显示“加载失败”提示）
- componentDidCatch(error, info)：在提交阶段被调用，适合记录错误日志（如上报到 Sentry 或自建监控平台）
如何定义一个错误边界组件
必须是类组件（React 18+ 仍不支持函数组件原生作为错误边界），且需包含上述至少一个方法：
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, info) {
console.error("捕获到错误:", error, info.componentStack);
// 可发送错误日志到监控系统
}
render() {
if (this.state.hasError) {
return <div>哎呀，出错了，请刷新重试</div>;
}
return this.props.children;
}
}
使用时包裹可能出错的子组件：
立即学习“Java免费学习笔记（深入）”；
<ErrorBoundary> <MyWidget /> </ErrorBoundary>
优雅处理运行时错误的补充方式
错误边界覆盖不到的场景，需配合其他机制：
-
Promise 错误统一捕获：全局监听
unhandledrejection事件，避免未处理 Promise 拒绝静默失败 -
全局异常监听：用
window.addEventListener('error', handler)捕获未被捕获的同步错误（注意它不会捕获 Promise 错误） - 异步操作显式 try/catch：在 async 函数或 setTimeout 回调中主动包裹逻辑
-
React 18+ 的 Suspense + Error Boundaries：结合
<Suspense fallback>处理 loading 和 error 状态，提升用户体验
注意事项与常见误区
错误边界不是万能的，实际使用中要注意：
- 只对**子组件树**生效，无法捕获自己、父组件或兄弟组件的错误
- 开发模式下，即使捕获了错误，React 仍会在控制台打印警告（便于调试）
- 服务端渲染（SSR）时，
componentDidCatch不会执行，只能依赖getDerivedStateFromError做状态降级 - 不要滥用——为每个小组件都套一层错误边界，应按功能模块或路由层级合理包裹
