错误边界是 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>; }
基本上就这些。错误边界不是万能兜底，而是有明确范围的“局部容错”机制。合理设计组件层级、配合日志上报和用户提示，才能真正提升健壮性。
以上就是
