vue时间天气插件_Vue dataAc插件发布

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

今天向大家推荐它的 Vue 升级版

【Vue-dataAc】​github.com

新老插件对比，新插件配置项更丰富，共 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 截图》