vue中warning_5种处理Vue异常的方法
本文采用意译,版权归原作者所有
去年一整年,我都在使用最爱的—Vue.js— 来做项目。最近突然意识到,我竟然从来没有认真去处理异常。我可以自恋地说:"我写的代码是完美的,没有BUG。" 我相信大家都明白这是迷之自信。最近,我花了不少时间研究了Vue中处理异常的各种技巧,在此想把我学到的分享给大家。
错误大全
为了测试各种异常处理技巧,我故意触发三种类型的错误。
第一种:引用一个不能存在的变量:
Hello, {{name}}
上述代码运行后不会抛出错误,但是在控制台会有[Vue warn]消息。
你可以在Codepen查看例子完整代码。
第二种:将变量绑定到一个被计算出来的属性,计算的时候会抛出异常。
Hello, {{name2}}
const app = new Vue({
el:'#app',
computed:{
name2() {
return x;
}
}
})
运行上述代码会在控制台抛出一个[Vue warn]和一个常规的错误,网页白屏。
你可以在Codepen查看例子完整代码。
第三种:执行一个会抛出异常的方法
Do It
const app = new Vue({
el:'#app',
methods:{
doIt() {
return x;
}
}
})
这个错误在控制台也[Vue warn]和常规报错。和上一个错误的区别在于,只有你点击了按钮才会触发函数调用,才会报错。
你可以在Codepen查看例子完整代码。
在继续之前,我想声明上面3个例子并不代表所有类型的错误。这3种是比较常见的错误。
好了,我们该怎么处理异常呢?我很惊讶在Vue的文档中竟然没有介绍异常处理的章节。
是的,文档中是有一个,但是介绍极其简短。
如果在组件渲染时出现运行错误,错误将会被传递至全局 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 )
你可以查看三个例子的实际运行情况:
第一个: 例子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:`
Cat:
`,
props:{
name:{
required:true,
type:String
}
},
errorCaptured(err,vm,info) {
console.log(`cat EC: ${err.toString()}\ninfo: ${info}`);
return false;
}
});
Vue.component('kitten', {
template:'
Kitten: {{ dontexist() }}
',
props:{
name:{
required:true,
type:String
}
}
});
注意 kitten 组件的代码是有BUG的。
捕获的信息如下:
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绑定,所以报错无论如何都会被抓到。运行实例
总结
正如开篇提到,这是我第一次写关于这个主题的文章。我也希望从大家获得反馈,包括评论、建议以及修订意见。我希望大家可以分享自己如何使用的具体事例。
关于Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有阳光保险、荔枝FM、掌门1对1、核桃编程、微脉等众多品牌企业。欢迎免费试用!
版权声明
转载时请注明作者Fundebug以及本文地址:
vue中warning_5种处理Vue异常的方法相关推荐
- Vue中路由管理器Vue Router使用介绍(三)
2019独角兽企业重金招聘Python工程师标准>>> 一.路由定义添加动态参数定义 1.路由定义项,使用:xx 方式 定义动态参数 {path:'/user/:id/:name', ...
- vue中引用tinymce图标不显示解决方法
vue中引用tinymce图标不显示解决方法 通过官网查到一篇博客,按照上面步骤可以实现tinymce富文本编辑器的封装和使用. https://www.cnblogs.com/zhongchao66 ...
- vue中ztree使用懒加载的方法
vue中ztree使用懒加载的方法 正常引用过后使用: import tree from "vue-giant-tree"; <tree:setting="sett ...
- vue中数组的七个响应式方法
vue中数组的七个响应式方法 起因: 在使用vue实习中,通过数组的索引改变了数组中的值,测试时发现,更改成功了,但是试图无响应. 原因: *通过索引值修改数组元素,不是响应式方法* // 以下代 ...
- .Net中俩种使用不定参数的方法
.Net中俩种使用不定参数的方法 使用Param关键字 比较常用的方法,不过对于调用C++等语言的不定参数函数的时候不能使用. 使用方法: private int Concat(params int[ ...
- 几何画板中几种作函数图像的方法
随着社会的发展,现代教学很多的地方都有了多媒体教学,这就需要一些教学软件的辅助了,几何画板就是其中之一.一些老师在使用几何画板的过程中,常常涉及到函数图象的绘制.因此,很多用户对这方面教程是非常的感兴 ...
- python创建对象_对Python中9种生成新对象的方法总结
先定义一个类: class Point: def __init__(self, x, y): self.x = x self.y = y 下面我们使用9种方法来生成新的对象: point1 = Poi ...
- 电子计算机机房折旧提几年,IDC设备资产运营中四种“折旧率计算”的常见方法...
原标题:IDC设备资产运营中四种"折旧率计算"的常见方法 数据中心基础设施设备管理中设备的折旧是固定资产的折旧.该基础设施设备或者IT设备在长期使用后仍可保持其原始物理形态,但由于 ...
- vue中8种组件通信方式,纯干货!值得收藏
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...
最新文章
- 在Ubuntu 14.04 64bit上安装lua5.2
- Set Up a Simple Knowledge Base
- 结构体后面定义一个空数组的含义
- C语言任何基数转换为十进制(附完整源码)
- Innodb事务和锁
- [导入]Dreamweaver插入Flash参数
- ajax 通过json xml文件,php+Ajax处理xml与json格式数据的方法示例
- 微信jssdk在iframe页面失效问题的解决措施
- Centos7.0 Vmware10.0.3 网络桥接配置
- 关于PHP你可能不知道的10件事
- net.sf.json.JSONObject.fromObject()方法的一个小秘密
- GIT:cherry-pick挑拣提交
- Woolies因滥发垃圾邮件被罚款100万澳元
- 区块链对人工智能的变革:去中心化将带来数据新范式
- securecrt 远程映射端口
- 实时折线图php mysql 源码_超级漂亮网址导航源码,自助链源码(PHP+MYSQL完整版)...
- [HDSC] 华大Cortex-M离线烧录器(CM PGM)HCTL-1A使用方法记录
- windows程序设计作业
- 酷欧天气 java.lang.RuntimeException: Unable to start activity ComponentInfo,程序无法运行
- Windows动态磁盘转换为基本盘
热门文章
- (转)解释一下SQLSERVER事务日志记录
- Excel .net读取
- 移动互联消亡者及原因分析
- 2597 团伙(并查集就是好用!)
- PHP无法使用file_get_contents或者curl_init()函数解决办法
- 【php数组函数序列】之sort() - 对数组的元素值进行升序排序
- MFC中使用CTabCtrl或CPropertySheet实现标签页
- Linux下的Notepad++编辑器——Notepadqq
- AndroidStudio安卓原生开发_UI控件介绍---Android原生开发工作笔记96
- 用MobaXterm远程连接Centos系统_使用技巧---Linux工作笔记047