前端监控概述

前端监控埋点概览

前端监控主要分为三类：数据监控、性能监控、异常监控

数据监控

记录上报产品在用户端的使用情况，以数据为导向，帮助团队做决策，数据监控有时也被称为行为监控，常见的包括：

• PV/UV：页面浏览量或点击量。UV:指访问某个站点或点击某条新闻的不同IP地址的人数
• 页面停留时间
• 访问入口（previous page）
• 在页面中的行为

性能监控

记录上报产品在用户端（各类宿主）的性能，常见的性能监控包括：

• 首屏加载时间
• 白屏时间
• 请求响应时间
• 页面渲染时间
• 交互动画完成时间

异常监控（报警）

记录上报代码在执行过程中的异常，及时发现并修复线上运行代码的缺陷，常见的异常监控包括：

• JavaScript的异常监控
• 样式异常的监控

埋点方案总结

目前常见的前端埋点方法分为三种：代码埋点、可视化埋点和无痕埋点
代码埋点
代码埋点，就是以嵌入代码的形式进行埋点，比如需要监控用户的点击事件，会选择在用户点击时，插入一段代码，保存这个监听行为或者直接将监听行为以某一种数据格式直接传递给server端。此外比如需要统计产品的PV和UV的时候，需要在网页的初始化时，发送用户的访问信息等。

优点	缺点
可以在任意时刻，精确的发送或保存所需要的数据信息	工作量较大，每一个组件的埋点都需要添加相应的代码

可视化埋点
通过可视化交互的手段，代替代码埋点。将业务代码和埋点代码分离，提供一个可视化交互的页面，输入为业务代码，通过这个可视化系统，可以在业务代码中自定义的增加埋点事件等等，最后输出的代码耦合了业务代码和埋点代码。

优点	缺点
方便，对于重复性埋点可交互系统提升埋点人效	可视化埋点可以埋点的控件有限，不能手动定制

可视化埋点听起来比较高大上，实际上跟代码埋点还是区别不大。也就是用一个系统来实现手动插入代码埋点的过程。

无埋点
无埋点并不是说不需要埋点，而是全部埋点，前端的任意一个事件都被绑定一个标识，所有的事件都别记录下来。通过定期上传记录文件，配合文件解析，解析出来我们想要的数据，并生成可视化报告供专业人员分析因此实现“无埋点”统计。从技术层面实现无埋点也很简单，比如从页面的js代码中，找出dom上被绑定的事件，然后进行全埋点。

优点	缺点
采集的是全量数据，产品迭代过程中不需要关注埋点逻辑，不会出现漏埋、误埋等现象	采集全量数据，给数据传输和服务器增加压力，无法灵活的定制各个事件所需要上传的数据

附

本文只介绍前端埋点相关概念，一个完整的监控流程除了埋点和上报还应涵盖数据处理和数据分析，相关知识涉及到监控平台的架构设计故本文不做叙述