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);

个中，猎取apikey须要免费注册帐号而且建立项目。

然后，我们对右下角的Clear Completed按钮对应的代码举行变动，经由过程v-on来定义点击事宜，然后对应的deleteCompleted函数有意将todos写成todo。


Clear Completed


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以及本文地点：https://blog.fundebug.com/2019/05/13/fundebug-support-vue-2-6-10/