前端的主动异常数据采集工具-dataAcquisition（二）

　　前端的主动异常数据采集工具-dataAcquisition（二）

　　最近，一个朋友再次提到了前端数据采集。

　　想想以前的开源数据采集插件dataAcquisition

　　由于不关注前端数据分析，因此项目运行不佳

　　但是整个项目还是很好，功能也比较完善，我不愿意放弃

　　所以我花了一些时间进行重构。并做了相应的演示

　　借此机会再次向大家介绍

　　一.为什么需要数据采集？

　　我们问几个问题：

　　一个新产品流程在线，如何获得流程的转化率？

　　有多少人通过添加按钮来点击？

　　在AB计划中，如何获得两个计划的转换？

　　在日常开发中，我们经常听到并看到在后台的学生使用日志来查找问题

　　但是如何定位前端生产问题？

　　如何将用户的问题反馈给开发人员？

　　我们之前的项目需要用户反馈给客户服务，然后通过工作订单反馈给开发

　　但是此过程周期相对较长，大多数用户发现它很麻烦，太懒惰而无法提供反馈

　　是否存在一种主动采集机制来采集来自客户端的某些例外情况？

　　是否存在用于采集用户数据的页面行为采集工具？

　　本文文章是要介绍前端活动异常数据采集工具-dataAcquisition

　　二.我们可以什么数据采集？

　　说到数据采集，我们首先必须知道什么数据可以是采集

　　1.用户点击数据，通过事件代理，您可以采集查看页面上发生的所有点击事件，并获取点击元素

　　2.用户的输入操作，通过输入，聚焦，模糊事件来获得输入框的内容以及用户的操作

　　3.页面访问数据，通过记录页面URL并报告它，可以实现PV统计，而使用uuid可以实现UV统计

　　4.页面中的代码异常。使用window.onerror来采集代码中的异常

　　在5.页面中，失败的接口数据通过代理ajax方法失败，在执行错误方法之前报告了请求参数和结果

　　6.页面性能数据，通过性能界面来计算DNS解析度，TCP链接时间，白屏时间，dom解析时间等。

　　利用以上数据，我们可以重现用户的操作过程

　　您还可以立即采集应对客户端发生的异常采集

　　通过对用户行为的分析，可以得出用户的习惯和偏好。

　　以便优化产品解决方案，优化业务流程并获得数据驱动的产品。

　　三.采集有哪些数据处理方法？

　　常用数据采集方法：

　　1.自动埋入点，通过大范围的数据采集从数据中过滤出特定元素。这样做的缺点是数据量太大，而优点是无需在联机之前自定义采集解决方案。

　　2.主动通过向元素添加特定的id或class属性来掩埋点，以便采集工具可以准确确定采集所需的数据。缺点是它会入侵页面。优点是数据准确。

　　3.圈出掩埋点并通过单击选择页面元素，这比自动采集更准确，比手动掩埋更方便。但是圈出的兼容性问题令人头疼。

　　市场上有带圆圈和埋点的付费项目，报价基本上是10W +

　　我们今天介绍的dataAcquisition可以完美支持自动和主动埋入。

　　圈出的功能也在开发计划中。

　　作为可以解决眼前问题的开源工具，有没有理由不尝试？

　　四.关于数据获取

　　dataAcquisition插件于2017年开发，迭代时间相对较短。

　　自从上线生产以来，一年中没有错误

　　当然，由于情况不同，仍有许多问题尚未解决

　　当前实现的功能点：

　　1.前端PV，紫外线数据采集报告

　　2.用户点击，输入行为采集报告

　　3.实现页面性能采集

　　4.实施代码异常采集

　　5.实现接口异常采集

　　该项目已在GitHub上开源，地址：

　　包括采集插件源代码，示例演示

　　需要它的学生可以下载和使用

　　五.演示示例

　　该插件提供了一个简单的演示，包括数据采集页面，数据分析页面

　　1.数据采集页面：

　　此页面上的所有操作将由采集报告，

　　请注意，采集的数据仅在刷新页面或单击报告按钮时才会发送到后台

　　PC屏幕截图：

　　

　　2.数据分析页：

　　报告的数据将显示在此页面上，在此页面上，您可以观察到所有先前的操作

　　与异常对应的详细数据

　　PC屏幕截图：

　　

　　六.邀请参加

　　一个人的精力有限，开源项目的维护需要一些合作伙伴共同努力，

　　欢迎向我提交公关

　　所有参与者都将记录在作者目录中，并且每个人都将共享项目结果。