前端也需要监控？技术人不可忽视的前端监控最全指南

作者：鲸腾 FE

一、前端监控的目的

为什么要进行前端监控？

首先我们要确定，异常是不可控的，并不能确定什么时候或者什么场景会发生异常，但它却会实实在在的影响用户体现。所以，我们非常有必要去做这样一件事情，去了解用户的行为，以用户数据为基础，来指导我们产品的优化方向。

前端的监控主要可以分为三大类：数据监控、性能监控和异常监控。下面我们来详细解读一下：

（1）数据监控

数据监控即我们常说的埋点统计，用于监听用户的操作行为。常见的数据监控包括：

• PV / UV：PV 即 Page View ，也就是页面的浏览数量，没打开页面一次就会统计一次；UV 即 User View ，也就是不同用户访问的次数，在 PV 的基础上根据 User 信息的不同做了去重操作；
• 用户在每个页面停留的时间信息。即从用户打开该页面到用户离开该页面的时间差，用于表示该页面对用户的留存程度；
• 用户的来处。即从什么入口或什么渠道来到了当前页面，通常会在 URL 中添加查询参数来做区分统计；
• 用户的页面操作行为。即用户在该页面点击了哪些按钮，或者从什么链接去到了某些页面等等，来分析用户的去向。

（2）性能监控

性能监控主要是监听前端项目在用户端展示的性能，这将直接关乎到用户的体验效果。监控这些数据，将能够是我们更好的去优化用户体验。常见的性能监控指标包括以下数据：

• 不同用户和不同设备下的首屏加载时间，包括白屏时间；
• HTTP 接口的响应时间；
• 静态资源、包括图片的下载时间；

（3）错误监控

错误监控主要是指代码在个别特殊场景下，会出现异常报错，很有可能会引发线上的故障。而这部分异常，如果没有异常监控，则只能在用户发现的情况下进行选择性的上报，并不能让我们及时去发现和解决问题。这一部分的错误信息主要分为下面几类：

• JS 代码运行错误、语法错误等；
• AJAX 请求错误；
• 静态资源加载错误；
• Promise 异步函数错误；

二、错误信息采集

错误信息

错误信息监控简单来说就是要搜集报错信息的发生的位置，以及报错的类型，进行上报，便于我们能够更好的掌握错误信息，从而能够对症下药。按照 5W1H 的法则来说，我们需要关注以下的几项信息：

• What ，发生了什么错误：语法错误、类型错误、数据错误、逻辑错误等；
• When ，什么时间发生的错误，可带上时间戳进行上报；
• Who ，哪个用户或者哪一类用户发生了错误，包括用户 ID 、设备信息、IP 信息等；
• Where ，哪个项目、哪些页面发生错误，可以上报页面的 URL 以及代码报错行数等信息；
• Why ，为什么会发生错误，也就是用户在什么样的场景下发生的错误，便于问题复现；
• How ，根据以上的信息如何进行问题的定位，然后怎么处理并解决问题；

错误类型

SyntaxError ：语法解析错误；

const a,

// Uncaught SyntaxError: Missing initializer in const declaration

· TypeError ：类型错误；

const obj = null;

console.log(obj.name);

// Uncaught TypeError: Cannot read properties of null (reading 'name')

· ReferenceError ：引用错误；

console.log(notDefined);

// Uncaught ReferenceError: notDefined is not defined

错误捕获

常见的错误捕获方法主要是 try / catch 、window.onerror 和window.addEventListener 等。

try / catch

这是我们在代码调试的过程中最常用的一个方式，但它只能捕获代码常规的运行错误，语法错误和异步错误并能捕获到。

// 常规运行时错误，可以捕获 ✅

try {
   

console.log(notdefined);

} catch(e) {
   

console.log('捕获到异常：', 'ReferenceError');

}

// 语法错误，不能捕获 ❌

try {
   

const notdefined,

} catch(e) {
   

console.log('捕获不到异常：', 'Uncaught SyntaxError');

}

// 异步错误，不能捕获 ❌

try {
   

setTimeout(() => {
   


console