详解Vue 的异常处理机制
最近需要在业务中加一个全局的 filter，filter 会对输入进行验证，用于进行前端监控。其中一个要处理的问题，就是验证失败后如何发送异常日志，这个过程中顺便了解了一下 vue 的异常处理机制。
errorCaptured、errorHandler
vue 提供了两个 API 用于异常的捕获，分别是 errorCaptured 和 errorHandler：
- errorCaptured
errorCaptured 是组件的一个钩子函数，用于在组件级别捕获异常。当这个钩子函数返回 false 时，会阻止异常进一步向上冒泡，否则会不断向父组件传递，直到 root 组件。
- errorHandler
errorHandler 是一个全局的配置项，用来在全局捕获异常。例如Vue.config.errorHandler = function (err, vm, info) {}。
error.js
在 vue 源码中，异常处理的逻辑放在 /src/core/util/error.js 中：
import config from '../config'
import { warn } from './debug'
import { inBrowser } from './env'
export function handleError (err: Error, vm: any, info: string) {
if (vm) {
let cur = vm
while ((cur = cur.$parent)) {
const hooks = cur.$options.errorCaptured
if (hooks) {
for (let i = 0; i < hooks.length; i++) {
try {
const capture = hooks[i].call(cur, err, vm, info) === false
if (capture) return
} catch (e) {
globalHandleError(e, cur, 'errorCaptured hook')
}
}
}
}
}
globalHandleError(err, vm, info)
}
function globalHandleError (err, vm, info) {
if (config.errorHandler) {
try {
return config.errorHandler.call(null, err, vm, info)
} catch (e) {
logError(e, null, 'config.errorHandler')
}
}
logError(err, vm, info)
}
function logError (err, vm, info) {
if (process.env.NODE_ENV !== 'production') {
warn(`Error in ${info}: "${err.toString()}"`, vm)
}
/* istanbul ignore else */
if (inBrowser && typeof console !== 'undefined') {
console.error(err)
} else {
throw err
}
}
文件不长，向外暴露了一个 handleError 方法，在需要捕获异常的地方调用。handleError 方法中首先获取到报错的组件，之后递归查找当前组件的父组件，依次调用 errorCaptured 方法。在遍历调用完所有 errorCaptured 方法、或 errorCaptured 方法有报错时，会调用 globalHandleError 方法。
globalHandleError 方法调用了全局的 errorHandler 方法。
如果 errorHandler 方法自己又报错了呢？生产环境下会使用 console.error 在控制台中输出。
可以看到 errorCaptured 和 errorHandler 的触发时机都是相同的，不同的是 errorCaptured 发生在前，且如果某个组件的 errorCaptured 方法返回了 false，那么这个异常信息不会再向上冒泡也不会再调用 errorHandler 方法。
以上就是详解Vue 的异常处理机制的详细内容，更多关于vue 异常处理的资料请关注脚本之家其它相关文章！
相关文章
Vue动态数据实现 el-select 多级联动、数据回显方式
这篇文章主要介绍了Vue动态数据实现 el-select 多级联动、数据回显方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
关于vue打包时的publicPath就是打包后静态资源的路径问题
这篇文章主要介绍了vue打包时的publicPath，就是打包后静态资源的路径,本文通过三种情况分析给大家详细介绍，需要的朋友可以参考下2022-07-07
使用Bootstrap + Vue.js实现添加删除数据示例
本篇文章主要介绍了使用Bootstrap + Vue.js实现 添加删除数据示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-02-02
Vue Router 是 Vue.js 官方的路由管理器。这篇文章主要介绍了详解vue-router传参的两种方式,需要的朋友可以参考下2018-09-09
这篇文章主要为大家介绍了Monaco Editor开发SQL编辑器实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了Vue前端框架搭建过程，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
这篇文章主要为大家介绍了如何利用Vue实现一个树形穿梭框，elementUI和ant-d组件库的穿梭框组件效果都不是很好，所以本文将利用一个新的插件来实现，需要的可以参考一下2022-04-04
这篇文章主要为大家介绍了vue开发之LogicFlow自定义业务节点,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了vue 国际化 vue-i18n 双语言 语言包的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
axios全局注册,设置token,以及全局设置url请求网段的方法
今天小编就为大家分享一篇axios全局注册,设置token,以及全局设置url请求网段的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论