一文搞懂前端监控

公众号：程序员白特，欢迎一起交流学习~
原文：一文搞懂前端监控 - 掘金 (juejin.cn)

前端监控在项目维护过程中至关重要。监控的核心目标包括及时发现问题和快速定位问题所在。尽管各公司所用的前端监控工具和服务可能各有不同，但从业务开发者角度来看，它们都具有一些共通之处。

一个完善的前端上报服务工具应该包含以下功能：

累积量上报：每次上报触发都对计数器进行累加。
日志上报：将详细的埋点信息上报到服务端，可以分为全量上报和本地缓存上报。
错误上报：捕获 JavaScript 错误并将错误信息进行收集上报到服务端，通常使用 window.onerror 实现。
耗时上报：对关键阶段的耗时进行收集上报，用于性能分析。

告警策略是及时发现问题的重要手段，一个完善的前端上报服务工具应该包含以下告警策略：

有则告警：一旦有上报就会触发告警，适用于一些重要异常上报。
阈值告警：当一段时间内（如每分钟）的上报量达到设定的阈值时触发告警，比如关键后台接口失败量的最大值上报。阈值可以根据数量或者百分比来设定。阈值上报可分为最小值阈值和最大值阈值。
波动告警：用于监控指标的变化和波动情况。当指标超出正常范围时，快速发现问题并采取相应措施。

PV/UV上报

PV（页面访问量）指的是页面被浏览的次数，而UV（独立访客数）表示访问网站的实际用户数量。这两种上报可以使用累积量上报。

PV上报除了用于业务分析外，还可以设置告警来及时发现问题。

PV波动告警：当PV的波动轨迹出现异于正常的波动时触发告警，这适用于波动变化具有一定规律性的页面。
PV最小值阈值告警：当PV值低于某个阈值时触发告警。

举例来说，对于这样的B端页面，在配置波动告警时，可以作如下考量：由于用户通常会在工作日使用该页面，因此可以通过比较每天的PV数据与相应的上周同一工作日的数据，来触发波动告警。

例如，如果今天是周四，可与上周同一天（也是周四）的PV数据进行对比，以便在异常波动出现时触发告警：

另外一种告警是最小值阈值告警，告警策略配置了每天8点以后pv低于200时告警：

JS错误上报

JS错误经常是导致页面无法访问的主要原因。通过使用 window.onerror、document.addEventlistener(error)、XMLHttpRequest status 等方式，可以捕获并上报JS错误，以便获取页面的错误信息及错误堆栈。大多数前端上报工具的SDK都已内置了上报错误的功能，因此这里不再赘述。

在JS错误上报过程中，通常会配合使用sourcemap，这有助于我们找到错误发生的确切位置。

另一个问题是错误上报产生的噪音。噪音指的是诸如不会影响页面正常使用的报错。错误上报的噪音并不能完全消除，通常采用忽略这些错误的方式来处理。

日志上报

日志上报对于快速定位问题而言至关重要。通常情况下，业务开发者需要自行进行日志上报。在哪些区域进行日志上报能够很好地考验一个前端开发者的经验与能力。

链路日志上报

其中一种思路是根据首屏加载链路，对各个阶段添加 info 级别的日志。例如：

html 开始加载成功
css 加载成功
index.js 加载成功
后台接口请求成功
图片请求成功
各种点击事件

当页面出现问题时，例如白屏问题，可以查看上述链路的日志，检查是否有日志阻塞，结合错误上报进行排查，可以大致定位到错误的位置。

异常日志上报

有一些错误信息，如 WebSocket API 的 onerror 事件，或某些第三方 NPM 包自行使用 try-catch 后暴露的 error 事件，是无法被 window.onerror 等方法拦截到的。对于这些异常信息，需要进行手动上报，例如：

import logger from 'your_logger_package';
const ws = new WebSocket("wss://mywebsocket.com");
ws.onerror = function(error) {
 logger.error(`websocket连接失败: ${error}`)
};

这些错误可以根据需要添加"有则告警"或"阈值告警"等告警策略。

白屏上报

白屏上报是一种非常特殊且普遍的异常上报方式。白屏指的是用户在访问页面时，页面长时间保持空白（白屏）状态的问题。这种情况会给用户带来非常糟糕的体验，因此及时让开发人员了解并做出响应至关重要。

"白屏"的判断方法可以参考文章前端白屏的检测方案，让你知道自己的页面白了中关于采样对比的方案。它的大致思路是在页面中间选取17个样本点形成十字形排列，在一段时间后判断这些采样点的最上层元素是否是容器元素，如['html', 'body', '#app', '#root']。如果所有采样点的最上层元素都是容器元素，则可以确定页面出现了白屏。

白屏上报有许多不同的时机策略，其中一种是每隔一秒钟轮询判断是否白屏并上报，这种策略相对消耗页面性能。另一种策略是选择几个时间点，例如10秒后的若干时间点，在这些有限的时间点进行上报。

// 判断是否白屏
const whiteScreen = () => {
 // 该代码请参考 "前端白屏的检测方案，让你知道自己的页面白了" 文章
 // 此时不再重复
};
window.addEventListener("load", () => {
 // 白屏上报时机是10秒、15秒、20秒
 const intervals = [10, 15, 20];
 // 白屏上报的时间间隔，如果遇到一个非白屏的时间点，则不再上报
 const runTime = (index) => {
   const frontSecond = intervals[index - 1] || 0;
   const curSecond = intervals[index];
   const diffSecond = curSecond - frontSecond;
   if (diffSecond > 0) {
     setTimeout(() => {
       // 如果是白屏则上报，且进入下个时间点的白屏上报
       if (isWhiteScreen(containerSelectors)) {
         logger.error(`白屏${curSecond}秒`);
         runTime(index + 1);
       }
     }, diffSecond * 1000);
   }
 };
 runTime(0);
});

同样地，白屏上报也可以配置“有则告警”或“阈值告警”的告警策略。