详解Vue 的异常处理机制


Posted in Vue.js onNovember 30, 2020

最近需要在业务中加一个全局的 filter,filter 会对输入进行验证,用于进行前端监控。其中一个要处理的问题,就是验证失败后如何发送异常日志,这个过程中顺便了解了一下 vue 的异常处理机制。

errorCaptured、errorHandler

vue 提供了两个 API 用于异常的捕获,分别是 errorCaptured 和 errorHandler:

  1. errorCaptured

errorCaptured 是组件的一个钩子函数,用于在组件级别捕获异常。当这个钩子函数返回 false 时,会阻止异常进一步向上冒泡,否则会不断向父组件传递,直到 root 组件。

  1. 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.js 相关文章推荐
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 #Vue.js
Vue用mixin合并重复代码的实现
Nov 27 #Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 #Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 #Vue.js
vuex的数据渲染与修改浅析
Nov 26 #Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 #Vue.js
vue单元格多列合并的实现
Nov 26 #Vue.js
You might like
论建造顺序的重要性
2020/03/04 星际争霸
PHP 代码规范小结
2012/03/08 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
php实现RSA加密类实例
2015/03/26 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
Python爬虫代理IP池实现方法
2017/01/05 Python
如何在python中使用selenium的示例
2017/12/26 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
什么是事务?为什么需要事务?
2012/01/09 面试题
中专生毕业自我鉴定
2013/11/01 职场文书
党员思想汇报范文
2013/12/30 职场文书
党支部对照检查材料
2014/08/25 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
迟到检讨书
2015/01/26 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记