优雅的处理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 相关文章推荐
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 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
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
Python常用库推荐
2016/12/04 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
python多线程之事件Event的使用详解
2018/04/27 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
Python正则表达式学习小例子
2020/03/03 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
大学生职业生涯规划书模板
2014/01/03 职场文书
专题组织生活会方案
2014/06/15 职场文书
单位租房协议书范本
2014/12/04 职场文书