优雅的处理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 快捷键设置实现代码
Mar 13 Javascript
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
原生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安装配置方法
2008/04/10 PHP
PHP XML操作类DOMDocument
2009/12/16 PHP
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
由ReactJS的Hello world说开来
2015/07/02 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
python检测远程端口是否打开的方法
2015/03/14 Python
python访问系统环境变量的方法
2015/04/29 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
两道JAVA笔试题
2016/09/14 面试题
电话销售经理岗位职责
2013/12/07 职场文书
毕业生个人求职信范例分享
2013/12/17 职场文书
技校毕业生个人学习的自我评价
2014/02/21 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android