很多朋友和我都是从 dataAcquisition 插件开始认识

今天向大家推荐它的 Vue 升级版 【Vue-dataAc】

新老插件对比,新插件配置项更丰富,共 40 个配置项,提供充分的灵活度,几乎每一个功能都可以配置。

增加配置项的同时也保证了使用上的简单,采用Vue插件的方式开发,你可以像使用其他插件一样使用Vue-dataAc:

import Vue from 'vue'​; import VueDataAc from 'vue-dataac'; Vue.use(VueDataAc, { ...options });

在此基础上,针对Vue环境做了深度定制,例如实时上报,Vue组件性能监控,router 切换上报


     正式开始之前,我还是要说一下为什么做这个插件,以及我对前端监控的看法。我一直都认为一个好的监控系统应该包含 :   数据采集 -> 数据整理/分析 -> 异常告警

    数据采集端可以分为用户行为,异常监控,性能采集… 目标是,拿到一切端上的行为,为什么拿这些数据呢?

     用户行为可以作为防抵赖证据,可以作为产品转化分析的依据,也可以作为复现异常的工单信息。将产品数据化,用数据推动产品迭代。

如果说用户行为方便产品,那么异常监控则是方便开发人员。以往的异常需要用户反馈,提交工单,工单委派等一系列流程,这就拉长了一个生产问题的解决周期,同样造成的损失也会更大。

    异常监控和性能采集的目标就是实时反馈端上的问题,这些问题有可能是代码逻辑,有可能是后台服务,也有可能是运营商网络。总而言之,我期望的是问题出现的第一时间前端团队能做出响应,做冲到一线的第一人。

    采集的数据如何实时通知到我们呢?这就需要后续的数据整理与分析,将问题按照优先级分类。行为相关数据优先级不高,只做存储,周期性的分析。异常相关的数据就要做到实时通知告警。

    大点的公司都有自己的告警平台,通过邮件、钉钉、微信等软件,实时的将错误信息推送给负责人,看两张我们团队的监控告警信息:

敏感信息被我遮掉了,这里只做举例,不包含在本次开源的插件内容中  🙂

只有打通这一套流程,才能称之为一套前端监控系统。说这么多,有点偏离主题了,下面介绍一下新插件功能,主要介绍新增功能点:

1. 前端用户行为监控

和老插件一样,新插件同样搜集了用户在页面中发生的点击输入事件

新插件在采集页面跳转的基础上新增了 router 路由切换的采集

2. 前端异常监控

除了 window.onerr 外,新插件新增了 Promise 代码异常,资源加载异常

因为Vue已经对大部分异常做了代理拦截,所以新插件针对 Vue 环境做了单独的代码异常拦截上报

通过代理 XHR 对象,新增了请求异常监控,接口404/500会上报此次请求

除了请求失败外,我们认为从请求发起到接口响应过慢也是一种弱异常,请求快慢的阈值可以定制,例如超过 10000 毫秒的请求都认为是异常数据 

3. 页面/组件性能

和老插件一样,我们通过 Performance API 采集了页面的打开性能

新插件针对 Vue 环境新增了组件性能采集,举例来说:

我们开发了一个组件,在开发测试阶段因为测试数据比较正常,一切看起来很好

上线之后因为生产数据结构变化或是数量的变化导致组件渲染慢,页面打开慢

我们对这一部分做了监控,同样可以定制一个阈值

例如一个组件渲染超过 1000 毫秒时认为渲染异常

    以上是新插件比较大的改动点,其他的细节也优化重构了很多,支持图片上报数据,增加了有效元素上报的限制开关,增加了用于和后台日志关联的方法等,这里只做简单介绍,有兴趣的大家可以点击 阅读原文 去 GitHub 查看,上面有十分详细的说明

    针对 Vue-dataAc 我对每一个功能点都做了详细的demo介绍,链接同样都在GitHub中

这一切都是为了方便大家更快了解插件的各个配置,反过来说,也希望大家能更多的提出意见,或是直接提交 Issue 共同维护一个开源插件

最后,疫情期间大家提高警惕,保护好自己,保护好身体,争取为祖国健康工作50年。

《文末 Demo 截图》