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

DC_er 发布于2019-08-26 13:45 / 2587人阅读

摘要：摘要的错误监控插件同步支持异步错误监控。此次更新，我们对的监控插件做了相应的更新，来更好地支持使用框架开发的应用错误的监控。程序运行后，成功捕获该错误总结更新到，对错误处理提供了更加强大的支持。

摘要： 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。

 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/

云服务器服务器托管同步错误百度云同步盘服务器错误 java错误日志监控百度云盘同步出现服务器内部错误

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109471.html

Fundebug前端JavaScript插件更新至1.8.2，修复2个小BUG

摘要：前端异常监控插件更新至，修复了个小修复用户行为中重复记录请求的修复的为报错的这个都不会影响功能，不过为了避免造成困扰，请大家及时更新插件。摘要：修复2个BUG，请大家及时更新。 showImg(https://segmentfault.com/img/remote/1460000019373421?w=900&h=383); Fundebug前端异常监控服务 Fundebug是专业...

lifesimple 2019-08-23 18:12 评论0 收藏0
Fundebug前端异常监控插件更新至 1.9.0，支持监控 HTTP 慢请求

摘要：摘要新增配置选项，支持监控慢请求，同时修复了记录的响应时间偏小的。的前端异常监控插件更新至，新增配置选项，支持监控慢请求，同时修复了记录的响应时间偏小的，请大家及时更新监控慢请求专注于程序异常监控，暂时无意于提供全面的性能监控服务。摘要： 1.9.0新增 httpTimeout 配置选项，支持监控 HTTP 慢请求，同时修复了记录的 HTTP 响应时间偏小的 BUG。 showImg...

lyning 2019-08-23 18:31 评论0 收藏0
Fundebug前端JavaScript插件更新至1.8.0，兼容低版本的Android浏览器

摘要：摘要兼容低版本浏览器，请大家及时更新。通过优化配置，我们兼容了一些低版本的浏览器可知，插件最低兼容，以及。例如，我们的录屏功能仅支持一些高版本的浏览器，均不支持。摘要：兼容低版本Android浏览器，请大家及时更新。 showImg(https://segmentfault.com/img/remote/1460000019373421?w=900&h=383); Fundebug...

wqj97 2019-08-23 17:55 评论0 收藏0
监控微信小程序wx.request请求失败

摘要：微信小程序运维中心提供了错误日志记录，但功能还是比较有限。有时候一个微信小程序可能会用到多个第三方服务，从多个域名获取数据。要使用监控，你需要去网站注册账号并创建一个微信小程序监控项目，然后按照提示接入插件。在微信小程序里，与后台服务器交互的主要接口函数是wx.request()，用于发起 HTTPS 网络请求。其重要性不言而喻。然而，却经常遇到请求失败的问题，笔者特意谷歌wx.re...

lpjustdoit 2019-08-23 18:24 评论0 收藏0
Fundebug能够捕获这些BUG

摘要：之前版本的插件只能监控执行错误，这次，我们正式发布，它新增了对资源加载错误与请求错误的支持，努力让前端开发者不放过每一个。可以捕获所有请求错误，同时记录用户行为，并实时提醒开发者，且不需要修改后端，也不需要搭建复杂的日志系统。摘要：Fundebug的JavaScript监控插件更新至0.1.0，可以监控3种不同类型的前端BUG：JavaScript执行错误、资源加载错误、HTTP请求...

biaoxiaoduan 2019-08-21 11:47 评论0 收藏0