前端 前端监控

本文将介绍前端监控的目的,并探讨其解决方案。

一、为什么需要前端监控?

现如今的大多数系统会划分前端和后端,前端负责提供可视化界面,后端负责数据存储和逻辑运算。

前端是最贴近用户的一部分,但是其监控却往往十分欠缺,进而导致:

  • 无法第一时间获知用户遇到的错误
  • 无法得知各个地区用户的访问速度

因此,我们希望有一套前端监控系统,它负责采集前端的加载、运行情况,并进行分析与展示,帮助开发者发现与诊断问题。

二、前端监控目标

  • 稳定性:执行错误、资源加载错误、接口请求错误、白屏
  • 加载速度:资源加载时间、页面绘制时间
  • 业务数据:pv、uv、事件触发次数、页面停留时间

三、检测方案

1. 稳定性检测方案

(1) 执行错误 + 资源加载错误

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.addEventListener(
"error",
function (event) {
if (event.target?.src || event.target?.href) {
// 资源加载错误
} else {
// 执行错误
}
}
);

window.addEventListener(
"unhandledrejection",
function (event) {
// 未被捕获的 Promise 错误
}
);

(2) 接口请求错误

以 axios 为例,编写请求拦截器、响应拦截器,统一处理即可。

(3) 首屏加载导致白屏

首屏加载时的白屏时间,可以通过 window.performance.timing 中的数据计算获取。

(4) 页面崩溃导致白屏

  • 定义若干个页面上的检测点
  • 调用 document.elementsFromPoint 方法检测这些点,该方法将返回 “覆盖了对应坐标的所有元素”,如果这些元素中只有 ['body', 'html', '#container'],说明该点为白点
  • 若白点的个数达到阈值,说明为白屏

2. 加载速度检测方案

可以通过 Dom Api window.performance.timing 获取。

1
2
3
4
5
6
7
8
9
10
11
12
13
const {
fetchStart,
connectStart,
connectEnd,
requestStart,
responseStart,
responseEnd,
domLoading,
domInteractive,
domContentLoadedEventStart,
domContentLoadedEventEnd,
loadEventStart,
} = window.performance.timing

3. 业务数据检测方案

(1) pv、uv

通过 load 事件监听页面加载完成,加载完成即视为一次访问。

由服务端进行 pv、uv 的统计。

(2) 事件触发次数

例如通过点击按钮触发事件,则监听该按钮,在每次点击时记录触发次数。

(3) 页面停留时间

记录用户进入页面和离开页面的时间戳,计算获得页面停留时间。

四、上报方案

1. img 上报

动态创建一个 img 标签,该标签创建后就会自动向服务器请求资源,上报信息便可以作为查询参数发送至服务器。

这一方法的好处是:

  • 无需担心跨域问题
  • 可以将图片资源设置为 1 * 1 的透明图,减少流量消耗

这一方法的缺点是:

  • 查询参数的长度存在限制,因此上报信息不能过分大

2. 请求上报

发起请求,通过请求上报。

这一方法的好处是:

  • 允许携带更多的上报信息

这一方法的缺点是:

  • 要考虑跨域问题

五、加载速度的主动采集

在分布于全球各地、放置于不同网络的若干服务器上,启动无头浏览器访问对应网站,检测并上报其资源加载时间、页面绘制时间。

可以参考:

网速测试 - 站长工具

参考