Vue.js@2.6.10更新内置错误处机制,Fundebug同步支持相应错误监控
摘要: Fundebug 的 JavaScript 错误监控插件同步支持 Vue.js 异步错误监控。
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 监控项目。
接下来根据接入代码,安装 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);
然后,我们对右下角的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
触发报错:
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 的 JavaScript 监控插件支持 Vue.js 项目中v-on
和异步错误的监控。
版权声明
转载时请注明作者Fundebug以及本文地址:https://blog.fundebug.com/2019/05/13/fundebug-support-vue-2-6-10/
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
记一次织梦程序访问缓慢问题排查
现象 后台点击更新主页HTML后要等待1.5分钟才有结果,对于我这个全新安装没有任何数据的站点这个时间确实无法接受 开始排查 这个case中我这个环境是php5.4+apache,使用的是php-fpm,如果使用的是cgi方式,后面步骤就根据cgi进程去追踪。 因为不了解代码和其中逻辑没法直接排查代码,所以使用了进程追踪工具strace,这个有兴趣可以找找文档深入了解一下,建议找个测试环境来调试,避免过多访问不太好区分。 如果fpm进程较多可以将strace信息记录到文件慢慢分析ps -ef|grep php-fpm|awk '{print " -p " $2" -s 10000 -o /tmp/strace_"$2".log"}'|xargs strace ,我这里是测试环境且为了方便追踪进程调整了fpm进程最小和最大都为1,以下是我调整的fpm参数: pm.start_servers = 1 pm.min_spare_servers = 1 pm.max_spare_servers = 1 开始追踪,页面点击一下"更新主页HTML"按钮,主机内执行ps -ef|grep php-f...
- 下一篇
5月编程语言排行榜:Python、C++ 竞争白热化
TIOBE公布了2019年5月编程语言排行榜,头部整体编程语言整体排名变化不大,前十名为Java、C、C++、Python、Visual Basic .NET、C#、JavaScript、SQL、PHP和汇编语言。 本月值得注意的是,R语言跌出前20名,这是R语言进入TOP20三年以来首次跌出前20,而Python继续缩小与C++的差距。 尽管Swift正快速增长,但是与Objective-C还是有不小的差距。另外,虽然PHP保住了自己第九名的位置,但是相比于 去年同期已经下降了2个位次。 Go与上个月相比下跌了一名,但整体变化比较稳定。 以下为前20名完整榜单 5月上市畅销新书 Linux内核深度解析 书名:《Linux内核深度解析》 作者:余华兵 编辑推荐: 基于ARM64架构的Linux 4.x内核; 大量图例描述数据结构之间的关系和函数的执行流程; 结合代码分析,以通俗化语言全面剖析Linux内核。 本书基于4.x版本的Linux内核,介绍了Linux内核的若干关键子系统的技术原理。本书主要内容包括内核的引导过程、内核管理和调度进程的技术原理、内核管理虚拟内存和物理内存的技术...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- Red5直播服务器,属于Java语言的直播服务器
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- Windows10,CentOS7,CentOS8安装Nodejs环境
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS7,8上快速安装Gitea,搭建Git服务器