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

栏目: 编程语言 · 发布时间: 5年前

内容简介:摘要:Fundebug 的 JavaScript 错误监控插件同步支持 Vue.js 异步错误监控。Vue.js 从诞生至今已经 5 年,尤大在今年 2 月份发布了重大更新,即根据官方介绍,错误处理的改进包括两个方面:

摘要: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 监控项目。

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

接下来根据接入代码,安装 Fundebug JavaScript 和 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 和异步错误的监控。

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和 Java 线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用!

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

版权声明

转载时请注明作者 Fundebug 以及本文地址:

https://blog.fundebug.com/2019/05/13/fundebug-support-vue-2-6-10/

您的用户遇到BUG了吗?

体验Demo 免费使用

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Learning Web Design

Learning Web Design

Jennifer Niederst Robbins / O'Reilly Media / 2007-6-15 / USD 44.99

Since the last edition of this book appeared three years ago, there has been a major climate change with regard to web standards. Designers are no longer using (X)HTML as a design tool, but as a means......一起来看看 《Learning Web Design》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具