onErrorCaptured 是 Vue 3 中用于捕获子孙组件未处理错误的生命周期钩子，接收 err、instance、info 三个参数，可阻止错误冒泡，但不捕获当前组件自身或异步任务中的错误。
onErrorCaptured 是 Vue 3 中用于在组件树中捕获**子孙组件抛出的未处理错误**的生命周期钩子，它不会捕获当前组件自身的错误（比如 setup 中同步抛错），而是专为“向下传播”的错误设计——类似事件冒泡，但只对错误生效。
作用范围：只捕获子孙组件的错误
它必须定义在**有子孙组件的父组件**中才有效。例如：
- 孙子组件中执行
throw new Error('API failed')且未被try/catch捕获； - 该错误会逐层向上触发所有已注册
onErrorCaptured的祖先组件（从直接父组件开始，到根组件）； - 当前组件自身 setup 或 render 阶段的同步错误（如 ref 读取 undefined 属性）不会触发该钩子，这类错误走全局 errorHandler 或开发者控制台。
基本用法：接收三个参数
函数签名：onErrorCaptured((err, instance, info) => { ... })
python-flask-vue-creator
下载
创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。
- err：实际抛出的错误对象（Error 实例）；
- instance：发生错误的**子孙组件实例**（不是调用钩子的父组件）；
-
info：错误类型字符串，如
"render"、"vnode mount"、"setup"、"watcher"等，标明错误发生阶段。
示例：
立即学习“前端免费学习笔记（深入）”；
父组件中：import { onErrorCaptured } from 'vue'
export default {
setup() {
onErrorCaptured((err, instance, info) => {
console.error('捕获到子孙组件错误:', err.message)
console.log('出错组件:', instance?.type?.name)
console.log('错误阶段:', info)
// 返回 false 可阻止错误继续向上冒泡
return false
})
return () => h('div', [h(ChildComponent)])
}
}
关键细节：错误冒泡与拦截
- 错误默认会逐层向上冒泡，直到被某个
onErrorCaptured显式返回 false 才停止； - 如果所有钩子都返回
undefined或true，最终会落到应用级错误处理器（app.config.errorHandler）； - 不能在钩子内异步操作后返回 false（如 await 后 return），因为返回值必须是同步的；
- 不适用于
async setup()中 await 抛出的错误（Vue 3.4+ 已支持捕获，但低版本仍需 try/catch 包裹 Promise）。
实用建议：怎么用更可靠
- 优先在**布局容器或路由视图组件**中设置，避免每个组件都写；
- 结合错误日志服务（如 Sentry）上报时，带上
instance?.type?.name和info，便于定位； - 若想静默处理某类错误（如网络请求失败的 UI 子组件），可判断
err.name === 'ApiError'后返回 false，并触发局部 fallback UI； - 注意：它无法捕获
setTimeout、Promise.reject等微任务中的未捕获错误（那些属于 JS 运行时错误，需用window.addEventListener('unhandledrejection')单独监听）。
