简单学习5种处理Vue.js异常的方法


Posted in Javascript onJune 17, 2019

错误大全

为了测试各种异常处理技巧,我故意触发三种类型的错误。

第一种:引用一个不能存在的变量:

<div id="app" v-cloak>
Hello, {{name}}
</div>

上述代码运行后不会抛出错误,但是在控制台会有[Vue warn]消息。

简单学习5种处理Vue.js异常的方法

你可以在Codepen查看例子完整代码。

第二种:将变量绑定到一个被计算出来的属性,计算的时候会抛出异常。

<div id="app" v-cloak>
Hello, {{name2}}
</div>
<script>
const app = new Vue({
el:'#app',
computed:{
name2() {
return x;
}
}
})
</script>

运行上述代码会在控制台抛出一个[Vue warn]和一个常规的错误,网页白屏。

简单学习5种处理Vue.js异常的方法

你可以在Codepen查看例子完整代码。

第三种:执行一个会抛出异常的方法

<div id="app" v-cloak>
<button @click="doIt">Do It</button>
</div>
<script>
const app = new Vue({
el:'#app',
methods:{
doIt() {
return x;
}
}
})
</script>

这个错误在控制台也[Vue warn]和常规报错。和上一个错误的区别在于,只有你点击了按钮才会触发函数调用,才会报错。

简单学习5种处理Vue.js异常的方法

你可以在Codepen查看例子完整代码。

在继续之前,我想声明上面3个例子并不代表所有类型的错误。这3种是比较常见的错误。

好了,我们该怎么处理异常呢?我很惊讶在Vue的文档中竟然没有介绍异常处理的章节。

简单学习5种处理Vue.js异常的方法

是的,文档中是有一个,但是介绍极其简短。

如果在组件渲染时出现运行错误,错误将会被传递至全局 Vue.config.errorHandler 配置函数 (如果已设置)。利用这个钩子函数来配合错误跟踪服务是个不错的主意。比如 Sentry,它为 Vue 提供了官方集成。

P.S. 国产BUG监控服务Fundebug也为Vue提供了官方集成。
我个人建议官方应该有详细的介绍。总的来说,Vue中异常处理包含以下几个方面的技巧:

  • errorHandler
  • warnHandler
  • renderError
  • errorCaptured
  • window.onerror (不仅仅针对Vue)

技巧1:errorHandler

我们要学习的第一个技巧是errorHandler。你也许知道,这是Vue中最广泛使用的异常处理方式。

Vue.config.errorHandler = function(err, vm, info) {
}

err指代error对象,info是一个Vue特有的字符串,vm指代Vue应用本身。记住在一个页面你可以有多个Vue应用。这个error handler作用到所有的应用。

Vue.config.errorHandler = function(err, vm, info) {
console.log(`Error: ${err.toString()}\nInfo: ${info}`);
}

第一种错误不会触发errorHandler,它只是一个warning。

第二种错误会抛出错误被errorHandler捕获:

Error: ReferenceError: x is not defined
Info: render

第三种错误也会被捕获:

Error: ReferenceError: x is not defined
Info: v-on handler

记住info里面的信息也是非常有用的。

技巧2: warnHandler

warnHandler用来捕获Vue warning。记住在生产环境是不起作用的。

Vue.config.warnHandler = function(msg, vm, trace) {
}

msg和vm都容易理解,trace代表了组件树。请看下面的例子:

Vue.config.warnHandler = function(msg, vm, trace) {
console.log(`Warn: ${msg}\nTrace: ${trace}`);
}

第一个错误被warnHandler捕获:

Warn: Property or method 'name' is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
Trace:
(found in <Root>)

你可以查看三个例子的实际运行情况:

第一个: 例子1

第二个: 例子2

第三个: 例子3

技巧3: renderError

和前面两个不同,这个技巧不适用于全局,和组件相关。并且只适用于非生产环境。

下面是一个简单的例子:

const app = new Vue({
el:'#app',
renderError (h, err) {
return h('pre', { style: { color: 'red' }}, err.stack)
}
})

第一个例子是没有效果的,因为只是一个warning。第二个例子就会在网页上显示具体的错误信息: 示例代码

老实说,我没觉得这个比直接看控制台好多少。但是,如果你们的QA团队或则测试对浏览器控制台不熟悉的话,这个还是蛮有用的。

技巧4: errorCaptured

errorCaptured是最后一个和Vue相关的技巧,这个技巧让我很迷惑,现在还是有点搞不明白。文档是这么介绍的:

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

基于我的一些分析,这个error Handler只能在父组件中处理子组件的错误。据我所知,我们没法直接在Vue的主实例(main instance)中使用它。

为了测试,我构造了下面的例子:

Vue.component('cat', {
template:`
<div><h1>Cat: </h1>
<slot></slot>
</div>`,
props:{
name:{
required:true,
type:String
}
},
errorCaptured(err,vm,info) {
console.log(`cat EC: ${err.toString()}\ninfo: ${info}`); 
return false;
}
});
Vue.component('kitten', {
template:'<div><h1>Kitten: {{ dontexist() }}</h1></div>',
props:{
name:{
required:true,
type:String
}
}
});

注意 kitten 组件的代码是有BUG的。

<div id="app" v-cloak>
<cat name="my cat">
<kitten></kitten>
</cat>
</div>

捕获的信息如下:

cat EC: TypeError: dontexist is not a function
info: render

下面是运行实例。

errorCaptured是个很有趣的特性,我想哪些构建组件库的开发者应该会用到吧。这个特性更像是一个面向组件开发者而不是一般开发者。

终极技巧: window.onerror

最后也是最重要的一个候选项 window.onerror。它是一个全局的异常处理函数,可以抓取所有的JavaScript异常。

window.onerror = function(message, source, line, column, error) {
}

我想函数的参数中只有source难以从字面上理解吧,它代表了当前的URL。

接下来事情就比较好玩了。如果你定义了onerror,但是没有启用Vue.config.errorHandler,那么有很多异常都抓不到。Vue希望你要定义它,否则异常不会抛出去的。这到底有没有意义?我不是很懂,我觉得没必要,甚至有点奇怪。

如果定义errorHandler的代码有BUG,那么运行起来也不会被onerror抓到。下面的例子中,如果将oopsIDidItAgain()解注释,你就会发现这个问题。只有第二个按钮没有和Vue绑定,所以报错无论如何都会被抓到。运行实例

总结

正如开篇提到,这是我第一次写关于这个主题的文章。我也希望从大家获得反馈,包括评论、建议以及修订意见。我希望大家可以分享自己如何使用的具体事例。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
js正则表达式的使用详解
Jul 09 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
javascript自执行函数
Feb 10 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
JavaScript异步操作中串行和并行
Nov 20 Javascript
js/jQuery实现全选效果
Jun 17 #jQuery
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 #Javascript
通过说明与示例了解js五种设计模式
Jun 17 #Javascript
简单了解vue.js数组的常用操作
Jun 17 #Javascript
送你43道JS面试题(收藏)
Jun 17 #Javascript
通过实例学习React中事件节流防抖
Jun 17 #Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 #Javascript
You might like
使用字符串函数输出整数化的PHP版本号
2006/10/09 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
python进阶教程之动态类型详解
2014/08/30 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
Python之os操作方法(详解)
2017/06/15 Python
pandas数据集的端到端处理
2019/02/18 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
python join方法使用详解
2019/07/30 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
python next()和iter()函数原理解析
2020/02/07 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
后进生转化工作制度
2014/01/17 职场文书
天下第一关导游词
2015/02/06 职场文书
防卫过当辩护词
2015/05/21 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书