Vue.js 无内置ErrorBoundary组件，但通过errorCaptured钩子（捕获子孙组件同步错误并可阻止冒泡）、全局errorHandler兜底、配合自定义封装，可实现与React错误边界等效的功能，包括错误隔离、降级UI展示和应用稳定性保障。
Vue.js 本身没有叫 ErrorBoundary 的内置组件（这是 React 的术语），但提供了功能等效的机制——主要是通过 errorCaptured 钩子和 全局 errorHandler，配合自定义封装，就能实现和 React 错误边界完全一致的效果：捕获子组件错误、阻止冒泡、展示降级 UI、保障主应用不崩溃。
errorCaptured：组件级错误拦截的核心
这是 Vue 实现“错误边界”最关键的生命周期钩子，仅在父组件中声明时，才能捕获其直接子组件（及更深层）在渲染、setup、生命周期中抛出的同步错误。
- 它接收三个参数：err（错误对象）、vm（出错的子组件实例）、info（错误来源描述，如 "render function" 或 "v-on handler"）
- 必须显式 return false，否则错误会继续向上冒泡到父级或全局处理器
- 它不捕获异步错误（如 Promise reject、setTimeout 内抛错）、事件回调中的错误（需额外 try/catch）、或父组件自身的错误
- 常用于封装一个通用 ErrorBoundary 组件，在其内部用
v-if="hasError"切换 fallback UI
全局 errorHandler：兜底的最后一道防线
当错误未被任何 errorCaptured 拦截时，会落到全局配置的 app.config.errorHandler（Vue 3）或 Vue.config.errorHandler（Vue 2）中。
- 可统一记录错误日志、上报监控服务（如 Sentry）、触发用户提示（如 Message/Notification）
- 适合做兜底跳转，例如检测到 500 类错误时，
router.push('/error/500') - 注意：它无法阻止错误导致的组件卸载，也不能提供局部降级 UI —— 它只负责“收尾”，不负责“隔离”
补充关键错误源：Promise 和全局运行时
真正健壮的错误捕获不能只依赖组件机制。以下两类错误必须单独监听：
立即学习“前端免费学习笔记（深入）”；
-
未处理的 Promise 拒绝：监听
unhandledrejection事件，避免静默失败；可结合rejectionhandled做对比分析 -
全局 JS 运行时错误：使用
window.onerror捕获脚本加载、语法错误等底层异常；搭配window.addEventListener('error', ...)监控图片、CSS、字体等资源加载失败
实战建议：封装一个真正可用的 ErrorBoundary 组件
不要只写个空壳。一个生产级的错误边界应包含：
- 状态管理（
hasError、error、errorInfo） - 可选 fallback 插槽或 props（支持传入自定义错误页）
- 重试按钮逻辑（
resetError方法 +key强制子组件重建） - 错误上报（调用日志服务或发送 API）
- 与 UI 库集成（如 iView 的
$Message、Buefy 的<b-message>）提升提示体验
