优雅的处理vue项目异常实战记录


Posted in Javascript onJune 05, 2019

背景

  • 你还在为处理Uncaught (in promise) ReferenceError烦恼吗?
  • 你还在为捕获异常反复的写try catch吗?
  • 你还在为每一个promise写catch吗?

是时候一站式统一处理异常!!!(针对vue项目)

全局异常捕获

Vue.config.errorHandler = function (err, vm, info) {
 // 指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时,可获取错误信息和 Vue 实例。
 
 // handle error
 // `info` 是 Vue 特定的错误信息,比如错误所在的生命周期钩子
 // 只在 2.2.0+ 可用 
}

注意:面对异常处理,同步异常和异步异常应该区别对待分别处理。

vue核心源码剖析

通过阅读源码看一下vue是如何将Vue.config.errorHandler接口暴露给使用者。

同步异常处理方案

// 定义异常处理函数,判断用户是否自定义Vue.config.errorHandler,定义则直接调用,未定义执行vue本身异常处理。
function globalHandleError(err, vm, info) {
 if (Vue.config.errorHandler) {
  try {
   return config.errorHandler.call(null, err, vm, info)
  } catch (e) {
   logError(e, null, 'config.errorHandler');
  }
 }
 logError(err, vm, info);
}
try {
 // vue正常执行代码被包裹在try内,有异常会调用globalHandleError
} catch (e) {
 globalHandleError(e, vm, '对应信息');
}

异步异常处理方案

// 定义异步异常处理函数,对于自身没有捕获异常的promise统一执行catch
function invokeWithErrorHandling(
 handler,
 context,
 args,
 vm,
 info
) {
 var res;
 try {
  res = args ? handler.apply(context, args) : handler.call(context);
  if (res && !res._isVue && isPromise(res) && !res._handled) {
   res.catch(function (e) { return handleError(e, vm, info + " (Promise/async)"); });
   // 异步代码例如promise可以统一为其定义Promise.prototype.catch()方法。
   res._handled = true;
  }
 } catch (e) {
  handleError(e, vm, info);
 }
 return res
}

// 所有的钩子函数调用异常处理函数
function callHook(vm, hook) {
 var handlers = vm.$options[hook];
 // 为所有钩子增加异常处理
 var info = hook + " hook";
 if (handlers) {
  for (var i = 0, j = handlers.length; i < j; i++) {
   invokeWithErrorHandling(handlers[i], vm, null, vm, info);
  }
 }
}

知识延伸

// vue接口是能处理同步异常以及部分钩子中的异步异常,对于方法中的异常无法有效处理,我们可以仿照源码增加方式中的异步异常处理,避免为每一个promise写catch
Vue.mixin({
 beforeCreate() {
  const methods = this.$options.methods || {}
  Object.keys(methods).forEach(key => {
   let fn = methods[key]
   this.$options.methods[key] = function (...args) {
    let ret = fn.apply(this, args)
    if (ret && typeof ret.then === 'function' && typeof ret.catch === "function") {
     return ret.catch(Vue.config.errorHandler)
    } else { // 默认错误处理
     return ret
    }
   }
  })
 }
})

完整代码

下面是全局处理异常的完整代码,已经封装成一个插件

errorPlugin.js

/**
 * 全局异常处理
 * @param {
 * } error 
 * @param {*} vm 
 */
const errorHandler = (error, vm, info) => {
 console.error('抛出全局异常')
 console.error(vm)
 console.error(error)
 console.error(info)
}
let GlobalError = {
 install: (Vue, options) => {
 /**
  * 全局异常处理
  * @param {
  * } error 
  * @param {*} vm 
  */
  Vue.config.errorHandler = errorHandler
  Vue.mixin({
   beforeCreate() {
    const methods = this.$options.methods || {}
    Object.keys(methods).forEach(key => {
     let fn = methods[key]
     this.$options.methods[key] = function (...args) {
      let ret = fn.apply(this, args)
      if (ret && typeof ret.then === 'function' && typeof ret.catch === "function") {
       return ret.catch(errorHandler)
      } else { // 默认错误处理
       return ret
      }
     }
    })
   }
  })
  Vue.prototype.$throw = errorHandler
 }
}
export default GlobalError

使用

// 在入口文件中引入
import ErrorPlugin from './errorPlugin'
import Vue from 'vue'
Vue.use(ErrorPlugin)

写在最后

增加全局异常处理有助于

  • 提高代码健壮性
  • 减少崩溃
  • 快速定位bug

资料参考

  • github.com/vuejs/vue/b…
  • cn.vuejs.org/v2/api/#err…

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
js读取并解析JSON类型数据的方法
Nov 14 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 Javascript
用React Native制作一个简单的游戏引擎
May 27 Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 #Javascript
Node.js 路由的实现方法
Jun 05 #Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 #Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 #Javascript
jQuery操作cookie的示例代码
Jun 05 #jQuery
JS实现从对象获取对象中单个键值的方法示例
Jun 05 #Javascript
微信小程序如何实现全局重新加载
Jun 05 #Javascript
You might like
php array_intersect()函数使用代码
2009/01/14 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
python+mysql实现简单的web程序
2014/09/11 Python
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
python PIL模块的基本使用
2020/09/29 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
模范教师事迹材料
2014/02/10 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
党支部评议意见
2015/06/02 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python