组件生命周期异常需分层拦截、分级响应、统一出口：接口请求类用Promise.race设8秒超时并注入轻量错误HTML；属性解析类在attributeChangedCallback中try/catch容错并设默认值；渲染类用错误边界或errorCaptured捕获同步错误；状态调度类须监听销毁信号并守卫上下文有效性。
组件生命周期异常不能靠“出了再修”，得在设计阶段就埋好防护层。核心思路是分层拦截、分级响应、统一出口——不是每个环节都做同样处理，而是按错误发生位置和影响范围，配不同的兜底动作。
接口请求类异常：在 connectedCallback 或 onMounted 里加超时与降级
组件挂载后常立刻发起请求，但网络不可靠、接口不稳定是常态。不设防会导致白屏或无限 loading。
- 用 Promis.e.race 包裹 fetch，强制设置 8 秒超时，避免 pending 卡死渲染流程
- 超时或失败后，直接注入轻量 HTML 字符串（如
<div class="error">加载失败，请重试</div>），不依赖未就绪的模板或状态管理 - 对第三方 API，提前检查
customElements.get('x-api')是否已注册，避免实例化时报错中断
属性解析类异常：在 attributeChangedCallback 中静默容错
用户传入非法属性值（比如 data="invalid-json"）很常见，这类错误不会冒泡，但会让组件卡在初始化阶段。
- 所有 JSON.parse、Number()、new Date() 等解析操作必须包裹 try/catch，捕获后设默认值（如
this._data = []） - 布尔属性不用字符串比对（
attr === 'true'），改用this.hasAttribute('disabled') - 禁止在该钩子里调用
dispatchEvent或触发重渲染，防止循环更新
渲染与生命周期类异常：用错误边界 + errorCaptured 双覆盖
组件 render 报错、子组件崩溃、构造函数异常等，会直接中断整个子树渲染。错误边界是第一道防线。
- React 中用 ErrorBoundary 类组件包裹业务模块，捕获子组件树内同步渲染、生命周期中的 JS 错误
- Vue 中在父组件定义 errorCaptured 钩子，捕获子组件抛出的错误，配合
v-if="hasError"切换备用 UI - 注意：错误边界不捕获异步错误（如 setTimeout、Promise reject）、事件处理器错误，这些需单独 try/catch
状态调度类异常：绑定生命周期信号，避免 StateHasChanged 失效
在 Blazor、React Native 或自定义渲染器中，组件卸载后仍执行 StateHasChanged 或 setState 是常见冻结原因——调用静默丢弃，无报错无日志。
- 所有异步任务必须监听组件销毁信号（如
this.CancellationToken或this.isUnmounted） - 刷新 UI 必须走框架推荐通道：Blazor 用
InvokeAsync(StateHasChanged)，React 用setState并检查 mounted 状态 - 在调用前加守卫：
if (this.isConnected && !this.isDisposed)，确保上下文有效
