前端 前端监控
本文将介绍前端监控的目的,并探讨其解决方案。
一、为什么需要前端监控?
现如今的大多数系统会划分前端和后端,前端负责提供可视化界面,后端负责数据存储和逻辑运算。
前端是最贴近用户的一部分,但是其监控却往往十分欠缺,进而导致:
- 无法第一时间获知用户遇到的错误
- 无法得知各个地区用户的访问速度
因此,我们希望有一套前端监控系统,它负责采集前端的加载、运行情况,并进行分析与展示,帮助开发者发现与诊断问题。
二、前端监控目标
- 稳定性:执行错误、资源加载错误、接口请求错误、白屏
- 加载速度:资源加载时间、页面绘制时间
- 业务数据:pv、uv、事件触发次数、页面停留时间
三、检测方案
1. 稳定性检测方案
(1) 执行错误 + 资源加载错误
1 |
|
(2) 接口请求错误
以 axios 为例,编写请求拦截器、响应拦截器,统一处理即可。
(3) 首屏加载导致白屏
首屏加载时的白屏时间,可以通过 window.performance.timing
中的数据计算获取。
(4) 页面崩溃导致白屏
- 定义若干个页面上的检测点
- 调用
document.elementsFromPoint
方法检测这些点,该方法将返回 “覆盖了对应坐标的所有元素”,如果这些元素中只有['body', 'html', '#container']
,说明该点为白点 - 若白点的个数达到阈值,说明为白屏
2. 加载速度检测方案
可以通过 Dom Api window.performance.timing
获取。
1 |
|
3. 业务数据检测方案
(1) pv、uv
通过 load
事件监听页面加载完成,加载完成即视为一次访问。
由服务端进行 pv、uv 的统计。
(2) 事件触发次数
例如通过点击按钮触发事件,则监听该按钮,在每次点击时记录触发次数。
(3) 页面停留时间
记录用户进入页面和离开页面的时间戳,计算获得页面停留时间。
四、上报方案
1. img 上报
动态创建一个 img 标签,该标签创建后就会自动向服务器请求资源,上报信息便可以作为查询参数发送至服务器。
这一方法的好处是:
- 无需担心跨域问题
- 可以将图片资源设置为
1 * 1
的透明图,减少流量消耗
这一方法的缺点是:
- 查询参数的长度存在限制,因此上报信息不能过分大
2. 请求上报
发起请求,通过请求上报。
这一方法的好处是:
- 允许携带更多的上报信息
这一方法的缺点是:
- 要考虑跨域问题
五、加载速度的主动采集
在分布于全球各地、放置于不同网络的若干服务器上,启动无头浏览器访问对应网站,检测并上报其资源加载时间、页面绘制时间。
可以参考: