vue 的 errorcaptured 钩子可以捕获子组件的错误，并在父组件中统一处理。1. 它能捕获渲染函数、生命周期钩子和 watcher 中的同步错误；2. 不会捕获异步错误、promise rejection 和父组件自身的错误；3. 错误会从最近祖先逐级向上冒泡，返回 false 可阻止传播；4. 建议结合 vue.config.errorhandler 实现全局错误兜底处理，从而构建完整的前端错误监控体系。
Vue 的 errorCaptured 钩子可以用来捕获子组件的错误，这个钩子在 Vue 2 和 Vue 3 中都支持。它能捕捉到子组件渲染函数、生命周期钩子以及 watcher 报出的错误，是调试和错误上报的一个重要手段。
errorCaptured 的基本用法
errorCaptured 是一个生命周期钩子函数，定义在父组件中。当其子组件抛出错误时，该钩子会被触发。它的参数包括错误对象、发生错误的组件实例，以及错误来源信息（比如哪个生命周期或事件）：
export default {
errorCaptured(err, vm, info) {
console.error('捕获到错误:', err, info);
// 可以在这里进行错误上报或者处理
return false; // 返回 false 可以阻止错误继续向上传播
}
}
这个钩子非常适合用于统一收集错误信息，特别是在大型项目中，可以避免每个组件单独加 try-catch。
立即学习“前端免费学习笔记（深入）”；
哪些错误能被 errorCaptured 捕获？
并不是所有错误都能被捕获，主要支持以下几种情况：
- 渲染函数中的错误（包括模板编译错误）
- 生命周期钩子函数内的错误
- Watcher 回调中的错误
- 子组件内部抛出的同步错误
但需要注意的是：
- 异步错误（如 setTimeout 内部的错误）不会自动被捕获
- Promise 链中的未处理 rejection 不会触发 errorCaptured
- 父组件自身的错误也不会通过 errorCaptured 被自己捕获
如果你希望捕获异步错误，可以在 window.onerror 或 Vue.config.errorHandler 中统一处理。
使用建议与注意事项
- 层级传播机制：如果多个祖先组件都定义了 errorCaptured，错误会从最近的祖先开始逐级向上冒泡。你可以通过返回 false 来阻止继续传播。
- 不要滥用：虽然可以统一处理错误，但不建议在这个钩子里做复杂的逻辑，尤其是不能保证稳定性的操作，否则可能影响主流程。
- 结合全局错误处理使用：对于未被 errorCaptured 捕获的错误，可以通过设置 Vue.config.errorHandler 来兜底。
举个实际例子，你可以在 main.js 中设置全局错误处理器：
Vue.config.errorHandler = function (err, vm, info) {
console.error('全局错误处理:', err, info);
// 上报服务器
};
这样即使 errorCaptured 没有覆盖到的地方，也能统一记录。
总结一下
errorCaptured 是一个非常实用的工具，尤其适合在嵌套结构中统一捕获子组件错误。只要注意哪些错误能被它捕获，再配合全局的 errorHandler，就能建立起比较完整的前端错误监控体系。基本上就这些，不复杂但容易忽略细节。
暂无评论内容