错误边界是React class组件特性，需实现getDerivedStateFromError和componentDidCatch方法来捕获子组件渲染错误并降级UI，无法捕获事件、异步或SSR错误。
JavaScript 本身无法直接实现 React 的“错误边界”（Error Boundary），因为错误边界是 React 框架层面的特性，依赖其内部的渲染机制和生命周期。但你可以在 React 应用中用 class 组件 实现错误边界，捕获其子组件树中 JavaScript 运行时错误，并防止整个应用崩溃。
什么是错误边界
错误边界是一个 React class 组件，它定义了以下任一（或两个）生命周期方法：
- static getDerivedStateFromError(error)：在渲染阶段出错后调用，用于更新 state（例如设置 `hasError: true`），触发降级 UI 渲染
- componentDidCatch(error, info)：在提交阶段被调用，适合记录错误日志（如上报 Sentry）、分析堆栈信息
如何写一个基础错误边界组件
下面是一个最小可用的错误边界示例：
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);
// 可在此上报错误：trackError(error, info);
}
render() {
if (this.state.hasError) {
return <div>⚠️ 页面加载失败，请刷新重试</div>;
}
return this.props.children;
}
}
使用方式：
立即学习“Java免费学习笔记（深入）”；
<ErrorBoundary> <MyWidget /> <AnotherComponent /> </ErrorBoundary>
错误边界能捕获什么
✅ 能捕获：
- 子组件渲染期间的 JS 错误（包括构造函数、render、JSX 表达式中的异常）
- 类组件生命周期函数中的错误（如 componentDidMount、shouldComponentUpdate）
- 自定义 Hook 内部抛出的错误（前提是调用方是 class 组件且被错误边界包裹）
❌ 不能捕获：
- 事件处理函数中的错误（如 onClick、onSubmit）——需手动 try/catch
- 异步代码错误（如 setTimeout、Promise.reject、useEffect 中未 await 的 rejected Promise）
- 服务端渲染（SSR）过程中的错误
- React 18+ 的并发模式中某些边界情况（如 useTransition 中的错误）
函数组件中怎么“模拟”错误边界
函数组件本身不能成为错误边界，但你可以：
- 用上面的 class 错误边界组件包裹函数组件（推荐）
- 在关键 hook 或事件中手动加 try/catch，配合状态显示 fallback UI
- 结合
React.Suspense处理异步组件加载错误（需搭配lazy + Suspense）
例如事件中防错：
function Button() {
const handleClick = () => {
try {
riskyOperation();
} catch (err) {
console.error(err);
alert("操作失败");
}
};
return <button onClick={handleClick}>点击</button>;
}
基本上就这些。错误边界不是万能兜底，而是有明确范围的“局部容错”机制。合理设计组件层级、配合日志上报和用户提示，才能真正提升健壮性。
