Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控


Posted in Javascript onMay 13, 2019

Vue.js 从诞生至今已经 5 年,尤大在今年 2 月份发布了重大更新,即Vue 2.6。更新包括新增 scoped slot 语法、性能提升、动态指令参数等等。其中我们最关注的是错误处理。

异步错误处理

Vue 的内置错误处理机制(组件内 errorCaptured hook 和全局 errorHandler hook)现在也会捕获 v-on 处理程序内部的错误。此外,如果任意一个生命周期 hook 或事件处理程序执行了异步操作,现在可以从函数中返回一个 Promise,Promise 链中任何一个未被捕获的错误都会被发送给错误处理程序。如果使用了 async/await,则会变得更加容易,因为异步函数隐式返回 Promise:

export default {
 async mounted() {
 // if an async error is thrown here, it now will get
 // caught by errorCaptured and Vue.config.errorHandler
 this.posts = await api.getPosts();
 }
};

根据官方介绍,错误处理的改进包括两个方面:

捕获 v-on 处理程序内部的错误异步 Promise 错误

Fundebug作为最专业的 BUG(错误)监控服务平台,已经服务数千家企业,数万名开发者。据统计,所有的前端项目中,有22.5%使用 Vue.js 开发。之前有使用 Vue.js 框架开发的客户反馈有 bug 监控不到。此次 Vue.js 更新,我们对JavaScript 的监控插件做了相应的更新,来更好地支持使用 Vue.js 框架开发的应用错误的监控。

错误监控测试(TodoMVC)

1. 通过 v-on 定义事件

我们使用经典的 todoMVC 项目来进行测试。

首先接入 Fundebug 监控插件,在 Fundebug 官网创建一个 Vue.js 监控项目。

Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控

接下来根据接入代码,安装 Fundebug JavaScript 和 Vue 插件:

通过npm安装fundebug-javascript与fundebug-vue

npm install fundebug-javascript fundebug-vue --save

配置apikey

import * as fundebug from "fundebug-javascript";
import fundebugVue from "fundebug-vue";
fundebug.apikey = "API-KEY";
fundebugVue(fundebug, Vue);

其中,获取apikey需要免费注册帐号并且创建项目。

然后,我们对右下角的Clear Completed按钮对应的代码进行更改,通过v-on来定义点击事件,然后对应的deleteCompleted函数故意将todos写成todo

<button class="clear-completed" v-show="completed" v-on:click="deleteCompleted">
 Clear Completed
</button>
 deleteCompleted() {
 this.todos = this.todo.filter(todo => !todo.completed);
 }

点击Clear Completed触发报错:

Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控

Fundebug 成功捕获该错误:

Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控

2. 异步 Promise 错误

通过axios发送一个 GET 请求获取数据,然后将返回数据处理。假定不小心将data写成了date,那么data.length会触发错误。

deleteCompleted() {
 return axios
 .get("https://jsonplaceholder.typicode.com/todos/")
 .then(response => {
  let data = response.date;
  let len = data.length;
 });
}

程序运行后,Fundebug 成功捕获该错误:

Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控

总结

Vue.js 更新到 2.6.10,对错误处理提供了更加强大的支持。Fundebug 的 JavaScript 监控插件支持 Vue.js 项目中v-on和异步错误的监控。

以上所述是小编给大家介绍的Vue.js@2.6.10更新内置错误处理机制Fundebug同步支持相应错误监控,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
jQuery操作cookie
Aug 08 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
详解async/await 异步应用的常用场景
May 13 #Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 #Javascript
JavaScript Math对象和调试程序的方法分析
May 13 #Javascript
jsonp跨域获取百度联想词的方法分析
May 13 #Javascript
基于Fixed定位的框选功能的实现代码
May 13 #Javascript
JQuery事件委托原理与用法实例分析
May 13 #jQuery
使用原生js编写一个简单的框选功能方法
May 13 #Javascript
You might like
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
取选中的radio的值
2010/01/11 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
简单学习vue指令directive
2016/11/03 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
Python学习笔记之os模块使用总结
2014/11/03 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
python复制文件到指定目录的实例
2018/04/27 Python
python使用代理ip访问网站的实例
2018/05/07 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
python中添加模块导入路径的方法
2021/02/03 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
小学防溺水制度
2014/01/29 职场文书
村党支部换届选举方案
2014/05/02 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
前台岗位职责范本
2015/04/16 职场文书
书法社团活动总结
2015/05/07 职场文书
2016年寒假生活小结
2015/10/10 职场文书
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技