前端监控
本文将从前端监控要做的3件事讲起,以及看看github上的web-tracing插件是怎么做的,尽可能展开里面关于用户体验的知识点。主要有以下几点:
- 行为监控
- 错误收集
- 性能监控### 行为监控
行为监控就是页面上加装摄像头,把我们的页面看作是游乐园,把游客访问页面看作是进游乐园游玩。那么只要在游乐园的门口,与各个主题园区加装上一个闸门,就能清楚知道游乐园里面有多少游客,那个主题最受欢迎。然后在游乐园的商店门口加装摄像头,可以监测到特定的店铺吸引哪些用户群体。换过来我们浏览器也相同,我们在进入页面的时候,触发路由事件就是游乐园的门,在页面上触发的鼠标事件就像是摄像头,页面的行为监控大致就是这些。
为什么要做用户的行为情况监控?其实也就是问:采集了用户的行为信息后我们能做什么,答案其实很简单:
- PV、UV量,日同比、周同比等。能清晰的明白流量变化
- 用户热点页面、高访问量TOP10
- 设备、浏览器语言、浏览器、活跃时间段等的用户特征
- 用户的行为追踪:某个用户,进入了网站后的一系列操作或者跳转行为;
- 用户自定义埋点上报用户行为:想做一些自定义事件的监听,比如播放某个视频的行为动作
- 多语种站点,每个语种的用户量
收集页面级的数据
那怎么收集页面的 PV
、UV
呢,这里大概给一个思路,也是我给公司用的自研监控系统中的思路。
一般的路由跳转行为,都是针对于 SPA单页应用
的,因为对于非单页应用来说,url跳转都以页面刷新的形式;
接着往下阅读之前,我们先来了解一下,html5
的 History API
,它所支持的 API
有以下五个
- history.back()
- history.go()
- history.forward()
- history.pushState()
- history.replaceState()
同时在 History API
中还有一个 事件
,该事件为 popstate
;它有着以下特点;
History.back()
、History.forward()
、History.go()
在被调用时,会触发popstate事件
- 但是
History.pushState()
和History.replaceState()
不会触发popstate事件
。
所以我们需要对 replaceState
和 pushState
,去创建新的全局Event事件。然后 window.ad