前端前端监控

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

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

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

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

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

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

二、前端监控目标

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

三、检测方案

1. 稳定性检测方案

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

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 获取。

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. 请求上报

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