suspense 不处理错误状态，仅协调加载中 ui；错误需通过 errorcaptured 钩子或全局 errorhandler 捕获，前者是主要入口，可监听异步组件 rejected promise 并阻止冒泡，配合 errorcomponent 实现上报、重试等动态行为；ssr 下需手动兜底，errorcaptured 不执行；未拦截错误由 app.config.errorhandler 兜底采集与响应。

Suspense 本身不处理错误状态，只负责协调加载中的 UI 切换；加载失败必须靠 errorCaptured 钩子或全局 errorHandler 捕获并响应。

errorCaptured 是主要捕获入口

它能监听 Suspense 内部异步组件（包括 defineAsyncComponent 或含顶层 await 的组件）的 rejected promise。只要错误没被上层阻止，就会逐级向上触发。

• 钩子接收三个参数：错误对象、出错组件实例、错误信息字符串
• 返回 false 可阻止错误继续冒泡，避免触发全局 errorHandler
• 适合在父级 Suspense 容器组件中定义，集中响应加载失败

错误组件 + errorCaptured 协同工作

单纯配置 errorComponent 只能展示静态提示；配合 errorCaptured 才能做动态行为，比如上报、重试、降级。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 在 errorCaptured 中调用 this.$forceUpdate() 或更新局部状态，触发 errorComponent 重新渲染
• 把错误详情（如 err.message 包含 “Loading chunk X failed”）传给 errorComponent 的 props，用于差异化提示
• 若需重试，可在 errorCaptured 中记录错误类型，再由 errorComponent 的按钮触发 import() 再加载一次

SSR 场景要主动降级

服务端渲染时 Suspense 不生效，defineAsyncComponent 会直接同步 fallback 或抛错。必须提前兜底：

• 服务端用 isServer 判断，直接返回占位组件或空节点
• 客户端 hydrate 后再启用 Suspense，避免水合 mismatch
• errorCaptured 在 SSR 下不执行，所有错误需在 setup 或 onMounted 中用 try/catch 手动捕获

全局兜底不能少

未被 errorCaptured 拦截的错误，会落到 app.config.errorHandler —— 这是最后防线：

• 在这里统一采集错误堆栈、URL、用户设备等上下文，发往监控系统
• 对 ChunkError 类错误（如网络中断、CDN 缺失），可触发自动刷新或跳转维护页
• 避免静默失败：至少 console.error，否则开发阶段难以定位问题

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！