前端架构&软实力-前端埋点
WHAT
在线上项目中，需要统计产品中用户行为和使用情况，从而可以从用户和产品的角度去了解用户群体，从而升级和迭代产品，使其更加贴近用户。用户行为数据可以通过前端数据监控的方式获得，除此之外，前端还需要实现性能监控和异常监控。
实现前端监控有三个步骤：前端埋点和上报、数据处理和数据分析。
数据监控
数据监控就是监听用户信息和行为，常见的监控项有：
- PV（page view，页面访问量）
- UV（unique view，独立访客）
- 用户在每一个页面停留的时间
- 用户通过什么入口访问该页面
- 用户在相应页面触发的行为
性能监控
性能监控指监听前端的性能，主要包括监听网页或者产品在用户端的体验。常见的性能监控项包括：
- 不同用户、不同机型和不同系统下的首屏加载时间
- http等请求的响应时间
- 静态资源整体下载时间
- 页面渲染时间
- 页面交互动画完成时间
异常监控
由于产品的前端代码在执行过程中也会发生异常，因此需要引入异常监控。及时的上报异常情况，可以避免线上故障的发上。虽然大部分异常可以通过 try catch 的方式捕获，但是比如内存泄漏以及其他偶现的异常难以捕获。常见的需要监控的异常包括：
- Javascript 的异常监控
- 样式丢失的异常监控
- 服务器请求的异常监控
WHY
获取用户基本信息、行为以及跟踪产品在客户端的使用情况，并以监控数据为基础，指明产品优化的方向。
HOW
手动埋点
也称代码埋点，即纯手动写代码，调用埋点SDK的函数，在需要埋点的业务逻辑功能位置调用接口上报埋点数据，像友盟、百度统计等第三方数据统计服务商大都采用这种方案。
优势：
- 可自定义属性，自定义事件
- 可以细化需求
- 相比其他埋点方式减少服务器压力
劣势：
- 工程量大的话，手动埋点会出翔漏洞，不方便审查
- 需求变更需重新埋点，成本高
可视化埋点
通过可视化交互的手段，代替上述的代码埋点。将业务代码和埋点代码分离，提供一个可视化交互的页面，输入为业务代码，通过这个可视化系统，可以在业务代码中自定义的增加埋点事件等等，最后输出的代码耦合了业务代码和埋点代码。缺点就是可以埋点的控件有限，不能手动定制。
可视化埋点听起来比较高大上，实际上跟代码埋点还是区别不大。也就是用一个系统来实现手动插入代码埋点的过程。比如国外比较早做可视化的是 Mixpanel，国内较早支持可视化埋点的有TalkingData、诸葛 IO，2017年腾讯的 MTA 也宣布支持可视化埋点；相比于手动埋点更新困难，埋点成本高的问题，可视化埋点优化了移动运营中数据采集的流程，能够支持产品运营随时调整埋点，无需再走发版流程，直接把配置结果推入到前端，数据采集流程更简化，也更方便产品的迭代。
可视化埋点中多数基于Xpath的方案，XPath 是一门在 XML 文档中查找信息的语言，XPath 可用来在 XML 文档中对元素和属性进行遍历。
无埋点
无埋点则是前端自动采集全部事件，上报埋点数据，由后端来过滤和计算出有用的数据。
优点:
- 前端只要一次加载埋点脚本
缺点:
- 服务器性能压力山大
参考：