前端监控可以分为三类:数据监控、性能监控和异常监控。
(1)数据监控
- PV/UV:PV(page view),即页面浏览量或点击量。UV:指访问某个站点或点击某条新闻的不同IP地址的人数
- 用户在每一个页面的停留时间
- 用户通过什么入口来访问该网页
- 用户在相应的页面中触发的行为
(2)性能监控
- 不同用户,不同机型和不同系统下的首屏加载时间
- 白屏时间
- http等请求的响应时间
- 静态资源整体下载时间
- 页面渲染时间
- 页面交互动画完成时间
(3)异常监控
- Javascript的异常监控
- 样式丢失的异常监控
常用前端埋点方案总结
目前常见的前端埋点方法分为三种:代码埋点、可视化埋点和无痕埋点。
(1) 代码埋点
以嵌入代码的形式进行埋点,比如需要监控用户的点击事件,会选择在用户点击时,插入一段代码。此外比如需要统计产品的PV和UV的时候,需要在网页的初始化时,发送用户的访问信息等
优点:
- 可以在任意时刻,精确的发送或保存所需要的数据信息。
缺点: - 工作量较大,每一个组件的埋点都需要添加相应的代码
(2)可视化埋点
通过可视化交互的手段,代替代码埋点。将业务代码和埋点代码分离,提供一个可视化交互的页面,输入为业务代码,通过这个可视化系统,可以在业务代码中自定义的增加埋点事件等等,最后输出的代码耦合了业务代码和埋点代码。
可视化埋点听起来比较高大上,实际上跟代码埋点还是区别不大。也就是用一个系统来实现手动插入代码埋点的过程。
缺点:
- 可视化埋点可以埋点的控件有限,不能手动定制。
(3)无埋点
无埋点并不是说不需要埋点,而是全部埋点,前端的任意一个事件都被绑定一个标识,所有的事件都别记录下来。并生成可视化报告供专业人员分析因此实现“无埋点”统计。
优点:
- 由于采集的是全量数据,所以产品迭代过程中是不需要关注埋点逻辑的,也不会出现漏埋、误埋等现象
缺点: - 无埋点采集全量数据,给数据传输和服务器增加压力
- 无法灵活的定制各个事件所需要上传的数据