JavaScript异步错误无法被React错误边界捕获，因其仅处理渲染、构造函数或生命周期中的同步错误；需通过状态驱动渲染时抛错、源头try/catch、全局unhandledrejection监听及细粒度边界包裹实现完整防护。
JavaScript 异步错误本身不能被 React 错误边界捕获，但可以通过分层设计让错误边界专注渲染阶段，再用其他机制兜底异步环节，最终形成完整防护。
错误边界不处理异步错误，这是设计前提
错误边界只响应组件在 渲染过程、构造函数或生命周期方法 中抛出的同步错误。像 setTimeout、fetch 回调、Promise 链中的 .then() 或事件处理器里的异常，它完全感知不到。
- 即使你在组件内写
await apiCall()并抛错，只要没在render或constructor中直接执行，错误边界就收不到 - 函数组件自身也不能作为错误边界——必须是类组件，且只能捕获子树中符合上述时机的错误
把异步操作“收口”到可捕获的位置
想让错误边界起作用，就得把异步失败的结果转化为渲染时的错误状态。常见做法是：在数据加载完成、准备渲染前主动 throw。
- 比如在
useEffect中请求数据，把结果存入 state；若请求失败，可设置error状态，并在return渲染逻辑中if (error) throw error - 这样错误就发生在 render 阶段，能被外层错误边界捕获并展示降级 UI
- 注意避免在事件回调里 throw，那依然逃逸出边界范围
配合 try/catch + Promise.catch 做前置拦截
错误边界是最后防线，不是唯一手段。对明确可能出错的异步流程，应在源头控制：
立即学习“Java免费学习笔记（深入）”；
- API 调用统一用
async/await + try/catch包裹，失败时记录日志、提示用户，或跳转错误页 - 全局监听
unhandledrejection，捕获漏网的 Promise 拒绝，防止静默失败 - 在自定义 Hook 中封装请求逻辑，内置错误处理和重试，不把原始 Promise 直接暴露给 JSX
按模块或路由粒度包裹错误边界
不要只在根组件套一层。把边界放在更细的业务单元上，才能隔离影响：
- 一个仪表盘页面，可为“实时图表”“数据列表”“筛选面板”分别设置边界
- Next.js 中可在
app/xxx/page.tsx外包一层边界组件，保护整个路由视图 - 边界内部的
componentDidCatch应上报错误（如发给 Sentry），并更新本地状态显示友好提示
