详解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实现点击当前行变色
Dec 14 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
Vue深入理解插槽slot的使用
Aug 05 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
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
33道php常见面试题及答案
2015/07/06 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
jQuery select控制插件
2009/08/17 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
python 把列表转化为字符串的方法
2018/10/23 Python
python django model联合主键的例子
2019/08/06 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
大学活动策划书范文
2014/01/10 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
开会通知短信大全
2015/04/20 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python