errorCaptured 是 Vue 3 及 Vue 2.6+ 中用于捕获子组件错误的生命周期钩子，接收 err、instance、info 三个参数，可阻止错误冒泡，适用于局部降级处理，不捕获异步错误或 setup 同步错误。
errorCaptured 是 Vue 3（及 Vue 2.6+）中一个专门用于**捕获子组件错误**的生命周期钩子，它不是用来处理当前组件自身抛出的错误，而是作为“错误拦截器”，在父组件中统一监听子组件渲染、生命周期钩子或事件处理器中发生的未被捕获错误。
errorCaptured 的触发时机与参数含义
该钩子会在子组件发生错误、且该错误尚未被其自身的 try/catch 或 errorCaptured 捕获时，向上冒泡到父组件执行。它接收三个参数：
-
err：JavaScript 错误对象（如
TypeError、SyntaxError等） - instance：发生错误的子组件实例（Vue 3 中为组件上下文，Vue 2 中为 Vue 实例）
-
info：字符串，描述错误来源，例如
"render function"、"v-on handler"、"setup function"、"watcher getter"等
注意：它不会捕获异步错误（如 setTimeout、Promise.reject() 未被 await 或 catch 的情况），这类错误需配合全局错误处理器（app.config.errorHandler）或 unhandledrejection 事件处理。
典型应用场景：封装可容错的子组件容器
当项目中存在第三方组件、动态加载内容或不稳定数据源时，可用 errorCaptured 避免单个子组件崩溃导致整个页面白屏。例如实现一个带 fallback UI 的卡片组件：
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
<template>
<div class="card">
<slot v-if="!hasError" />
<div v-else class="error-fallback">⚠️ 内容加载失败，请稍后重试</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const hasError = ref(false)
function errorCaptured(err, instance, info) {
console.warn('[Card] 子组件错误:', err, info)
hasError.value = true
return false // 阻止错误继续向上冒泡
}
</script>
关键点：返回 false 可阻止错误继续向更外层父组件传播，避免多层重复处理；若返回 undefined 或 true，错误会继续冒泡。
与全局错误处理器的分工协作
errorCaptured 适合做**局部降级处理**（如隐藏异常模块、显示提示），而全局 errorHandler 更适合做**日志上报、监控告警、用户反馈收集**等统一运维动作：
- 在
main.js中设置全局处理器：
app.config.errorHandler = (err, instance, info) => {
// 上报 Sentry / 埋点 / 打印详细上下文
console.error('全局未捕获错误:', err, instance, info)
}
-
errorCaptured在组件内聚焦于用户体验修复，errorHandler负责可观测性建设——两者互补，不替代。
常见误区与注意事项
-
不能捕获 setup() 中同步抛出的错误：Vue 3 中
setup抛错会直接触发errorHandler，不走errorCaptured；需在setup内部用try/catch或在模板中用v-if+ 状态兜底 -
不适用于 Composition API 的逻辑复用函数：
errorCaptured是组件选项，无法在useXXX函数中直接定义；错误捕获逻辑应放在使用该逻辑的组件中 -
慎用
return false：虽然能阻止冒泡，但可能掩盖真正需要全局响应的问题；建议仅在明确知道错误影响范围且已妥善降级时才返回false
它不是万能兜底，而是精准控制错误传播链路的轻量工具。合理使用，能让应用更健壮、调试更清晰、体验更平滑。
