错误边界是React提供的用于捕获子组件错误的类组件，通过getDerivedStateFromError和componentDidCatch方法实现错误拦截、日志记录与降级UI渲染，但无法捕获异步错误、事件处理器异常及服务端错误，需结合window.onerror等原生机制补全错误处理。
JavaScript 本身并不直接支持“错误边界”这一概念，但这个术语在 React 框架中被广泛使用。错误边界是 React 提供的一种机制，用于捕获其子组件树中任意位置的 JavaScript 错误，记录这些错误，并展示降级的 UI，而不是让整个应用崩溃。
错误边界的定义与作用
错误边界是一个 React 组件，它通过定义特殊的生命周期方法来捕获后代组件中的错误。这些错误通常包括渲染过程中、生命周期方法内或构造函数中抛出的异常。
它的主要作用是：
- 防止因单个组件出错导致整个应用白屏或崩溃
- 集中处理错误并上报日志
- 展示友好的错误提示界面（fallback UI）
如何实现一个错误边界
要创建一个错误边界，需要在类组件中定义以下其中一个或两个静态方法：
立即学习“Java免费学习笔记（深入）”；
- static getDerivedStateFromError(error)：在抛出错误后调用，用于更新组件的 state，触发降级 UI 的渲染
- componentDidCatch(error, info)：在错误被捕获后执行，适合记录错误信息，如发送到日志服务
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.error("捕获到错误：", error, errorInfo);
}
render() {
if (this.state.hasError) {
return 页面出现异常，请稍后再试;
}
return this.props.children;
}
}
使用时将其作为父组件包裹可能出错的组件：
错误边界的局限性
错误边界并非万能，它有明确的限制：
- 不能捕获异步代码中的错误（如 setTimeout、Promise.reject）
- 无法处理事件处理器内部的异常（React 不会中断 UI 更新）
- 不适用于函数组件本身（除非配合 Suspense 或高阶组件模式）
- 不能捕获服务端渲染时的错误
- 不会拦截自身抛出的错误
与原生 JavaScript 错误处理的关系
错误边界是 React 层面的机制，并不替代传统的 try/catch 或全局事件监听。对于未被错误边界捕获的错误，仍可使用以下方式兜底：
- window.onerror：监听全局运行时错误
- window.addEventListener('unhandledrejection')：捕获未处理的 Promise 拒绝
这些可以作为补充手段，确保关键错误不被遗漏。
基本上就这些。错误边界不是 JavaScript 原生能力，而是 React 为提升应用健壮性设计的声明式容错方案，合理使用能让用户体验更稳定。
