详解Vue 的异常处理机制

最近需要在业务中加一个全局的 filter，filter 会对输入进行验证，用于进行前端监控。其中一个要处理的问题，就是验证失败后如何发送异常日志，这个过程中顺便了解了一下 vue 的异常处理机制。vue 提供了两个 API 用于异常的捕获，分别是。errorCaptured 是组件的一个钩子函数，用于在组件级别捕获异常。在 vue 源码中，异常处理的逻辑放在 /src/core/util/error.js 中：文件不长，向外暴露了一个 handleError 方法，在需要捕获异常的地方调用。handleError 方法中首先获取到报错的组件，之后递归查找当前组件的父组件，依次调用 errorCaptured 方法。生产环境下会使用 console.error 在控制台中输出。可以看到 errorCaptured 和 errorHandler 的触发时机都是相同的，不同的是 errorCaptured 发生在前，且如果某个组件的 errorCaptured 方法返回了 false，那么这个异常信息不会再向上冒泡也不会再调用 errorHandler 方法。