我和很多小伙伴都是从dataAcquisition插件开始认识的。今天推荐它的Vue升级版【Vue-dataAc】相比新老插件，新插件的配置项更多，一共40个配置项，提供了充分的灵活性，几乎每一个功能都可以配置。在增加配置项的同时，也保证了易用性。它以Vue插件的形式开发。你可以像使用其他插件一样使用Vue-dataAc：importVuefrom'vue'importVueDataAcfrom'vue-dataac'Vue.use(VueDataAc,{...options});在此基础上，对Vue环境进行了深度定制，比如实时上报、Vue组件性能监控、路由切换上报等，在正式开始之前，我还是想说说为什么要做这个插件，以及我对前端监控的看法。我一直认为一个好的监控系统应该包括：数据采集->数据整理/分析->异常报警数据采集端可以分为用户行为、异常监控、性能采集...终端行为上的数据，为什么要拿这些数据？用户行为可以作为反抵赖证据，作为产品转化分析的依据，作为反复出现异常的工单信息。数字化产品，用数据驱动产品迭代。如果说用户行为方便了产品，那么异常监控就方便了开发者。以往异常需要经过用户反馈、工单提交、工单委托等一系列流程，拉长了一个生产问题的解决周期，造成了更大的损失。异常监控和性能收集的目的是在端上实时反馈问题。这些问题可能是代码逻辑、后台服务或运营商网络。总而言之，我期待的是前端团队能够在出现问题的第一时间做出响应，并且是第一个冲到第一线的人。收集到的数据如何实时通知我们？这就需要后续的数据整理和分析，根据优先级对问题进行分类。与行为相关的数据没有优先级，只会被存储和定期分析。异常相关数据必须实时通知。较大的公司都有自己的告警平台，通过邮件、钉钉、微信等软件将错误信息实时推送给负责人。看一下我们团队的两条监控告警信息：敏感信息被我屏蔽了，这里仅举个例子，不包含在这个开源插件内容中？只有经过这一套流程，才能称得上是前端监控系统。说了这么多，有点跑题了。下面介绍一下新插件的功能，主要介绍一下新的特性：1、前端用户行为监控与老插件相同。新插件还会收集用户在页面上的点击输入事件。新插件在收藏页面跳转的基础上，增加了收藏路由器路由切换。2.除了前端异常监控的window.onerr之外，新插件增加了Promise代码异常和资源加载异常，因为Vue已经代理了大部分异常。拦截，所以新插件通过代理XHR对象对Vue环境做了单独的代码异常拦截报告，并增加了请求异常监听。接口404/500将报告此请求。除了请求失败，我们认为从请求发起到接口响应太慢也是弱异常。请求速度的阈值可以自定义。比如超过10000毫秒的请求就被认为是异常数据。Vue环境增加了组件性能集合。例如：我们开发了一个组件。在开发测试阶段，因为测试数据比较正常，所以一切看起来都很好。上线后，由于生产数据结构或数量发生变化，导致组件渲染缓慢，页面打开慢，我们对这部分进行了监控，也可以自定义一个阈值，比如一个组件渲染超过1000毫秒，就认为是异常了以上是比较大的变化点新插件，其他细节也做了很多优化和重构，支持图片上报数据，增加有效元素上报限位开关，增加关联后台日志的方法等，这里只做简单介绍，有兴趣的可以点击阅读原文，也可以去GitHub查看。上面有很详细的说明，对于Vue-dataAc，我对每个功能点都做了详细的demo介绍，链接也在github中。这一切都是为了方便大家更快的了解插件的各种配置。另一方面，也希望大家多多了解。提出你的意见，或者直接提交Issue，共同维护一个开源插件。最后，疫情期间，大家要提高警惕，保护好自己，保护好自己的身体，为祖国的健康奋斗50年。
