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安装与

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触发报错：

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

fundebug专注于javascript、微信小程序、微信小游戏、支付宝小程序、react native、node.js和java线上应用实时bug监控。 自从2016年双十一正式上线，fundebug累计处理了10亿+错误事件，付费客户有google、360、金山软件、百姓网等众多品牌企业。欢迎大家！

版权声明

转载时请注明作者fundebug以及本文地址：