errorCaptured 是 Vue 2.5+ 和 Vue 3 中用于捕获子组件（含孙子）在渲染、生命周期钩子或事件处理中抛出的同步错误的钩子，不捕获自身错误和未桥接的异步错误；需返回 false 阻止错误冒泡。
errorCaptured 是 Vue 2.5+ 和 Vue 3 中提供的一个组件生命周期钩子，专门用于**捕获其子组件（包括孙子组件）在渲染、生命周期钩子或事件处理函数中抛出的 JavaScript 错误**。它不能捕获自身组件内部的错误（比如 setup 或 data 初始化时的同步错误），也不能捕获异步错误（如 setTimeout、Promise.catch 中未处理的错误），除非你在这些异步上下文中主动抛出并被子组件链路触发。
什么时候会触发 errorCaptured？
当子组件树中任意一层发生以下情况时，且该错误未被更内层的 errorCaptured 捕获，就会逐层向上冒泡，直到被父组件的 errorCaptured 拦截：
- 模板渲染过程中报错（如访问
undefined.name） - 子组件的
beforeCreate、created、mounted等生命周期钩子中抛出异常 - 子组件中绑定的事件处理函数执行时报错（如
@click="handleClick"） - 子组件的
watch回调或computedgetter 中抛出错误（Vue 3 的computed同步 getter 会触发）
如何正确声明和使用 errorCaptured？
它是一个函数，接收三个参数：err（错误对象）、vm（出错的子组件实例）、info（错误来源的说明，如 "render function"、"v-on handler"、"watcher getter" 等）。它必须显式返回 false 才能阻止错误继续向上传播（即阻止触发全局的 errorHandler）；不返回或返回其他值（包括 undefined、true）则错误继续冒泡。
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
示例（Vue 2 Options API）：
export default {
name: 'ParentComponent',
errorCaptured(err, vm, info) {
console.error('子组件错误被捕获：', err)
console.log('出错组件：', vm.$options.name)
console.log('错误类型：', info)
<pre class="brush:php;toolbar:false;">// 如果你想自行处理并阻止全局错误提示，返回 false
if (err.message.includes('API timeout')) {
this.errorMessage = '请求超时，请重试'
return false
}
// 其他错误继续上报
return true // 或直接不写 return，等价于 undefined → 继续冒泡
}, data() { return { errorMessage: '' } } }
Vue 3 Composition API 中怎么用？
在 setup() 中无法直接定义 errorCaptured，但你可以在 defineComponent 的选项对象中声明（与 Vue 2 写法一致），或使用 onErrorCaptured 组合式 API（推荐）：
import { defineComponent, onErrorCaptured } from 'vue'
<p>export default defineComponent({
setup() {
onErrorCaptured((err, instance, info) => {
console.warn('捕获到子组件错误：', err.message)
// instance 是出错的组件实例（可能为 null，比如发生在函数式组件）
// 返回 false 阻止冒泡
return err.name === 'SyntaxError' ? false : true
})</p><pre class="brush:php;toolbar:false;">return () => h('div', [/* 子组件 */])
} })
常见误区和注意事项
-
不捕获自身错误：父组件自己的
render或setup报错，不会触发自身的errorCaptured -
异步错误需手动桥接：Promise 拒绝、
setTimeout中的throw不会自动触发。可在catch或try/catch中重新抛出，或调用instance?.proxy?.$emit('error', err)（Vue 2）/ 触发自定义逻辑（Vue 3） -
慎用 return false：阻止冒泡后，全局
config.errorHandler或app.config.errorHandler将收不到该错误，可能影响监控上报 -
父子同错，就近优先：如果父、祖父都有
errorCaptured，错误先被最近的父组件捕获；只有它返回非false值，才会继续传给上一级
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
