前端监控可以分为三类：数据监控，性能监控和异常监控。

数据监控

  • PV/UV
    • PV(page view),即页面浏览量或点击量。
    • UV：指访问某个站点或点击某条新闻的不同IP地址的人数
  • 用户在每一个页面的停留时间
  • 用户通过什么入口来访问该网页
  • 用户在相应页面中触发的行为

无埋点

无埋点并不是说不需要埋点，而是全部埋点，前端的任何一个事件都被绑定一个标识，所有的事件都被记录下来。通过定期上传记录文件，配合文件解析，解析出来我们想要的数据，并生成可视化报告供专业人员分析因此实现“无埋点”统计。


从语言层面实现无埋点也很简单，比如从页面的js代码中，找到dom上被绑定的事件，然后进行全埋点。

无埋点的优点：

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

html2canvas:

我们可以直接在浏览器使用html2canvas，对整个或局部页面进行‘截图’。但这并不是真的截图，而是通过遍历页面DOM结构，收集所有元素信息及相应样式，渲染出canvas image。

由于html2canvas只能将它能处理的生成canvas image，因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与，整个图片都由客户端浏览器生成，使用很方便。