优雅的处理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 相关文章推荐
jquery URL参数判断,确定菜单样式
May 31 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
vuejs如何配置less
Apr 25 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 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
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
理解JS绑定事件
2016/01/19 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
Python提取频域特征知识点浅析
2019/03/04 Python
Python实现数值积分方式
2019/11/20 Python
解决python对齐错误的方法
2020/07/16 Python
python tkinter实现连连看游戏
2020/11/16 Python
介绍Ibatis的核心类
2013/11/18 面试题
车辆维修工自我评价怎么写
2013/09/20 职场文书
旅游管理本科生求职信
2013/10/14 职场文书
新闻学专业应届生求职信
2013/11/08 职场文书
金融专业毕业生推荐信
2013/11/26 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
个人剖析材料范文
2014/09/30 职场文书
安全生产隐患排查制度
2015/08/05 职场文书