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 相关文章推荐
jQuery 图片切换插件(代码比较少)
May 07 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
Node.js事件驱动
Jun 18 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 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
3款值得推荐的微信开发开源框架
2014/10/28 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
JQuery 小练习(实例代码)
2009/08/07 Javascript
JSON 教程 json入门学习笔记
2020/09/22 Javascript
监控 url fragment变化的js代码
2010/04/19 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
2019/10/31 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
vue实现登录功能
2020/12/31 Vue.js
python daemon守护进程实现
2016/08/27 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
浅谈Python中的bs4基础
2018/10/21 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
品恩科技软件测试面试题
2014/10/26 面试题
网络工程师职业规划
2014/02/10 职场文书
学生评语大全
2014/04/18 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
教师工作证明范本
2015/06/12 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL