2022年再不知道前端监控就out了 _前端监控

原文来自公众号@前端点线面,
https://mp.weixin.qq.com/s/bTO1ULLDo8zOrdkus9a26g
一、前端监控现状

近年来，前端监控是越来越火，目前已经有很多成熟的产品供我们选择使用，如下图所示

文章插图

有这么多监控平台，那为什么还要学习自研前端监控？
一方面人家是要钱的
另一方面自己的项目需要定制化的功能。

二、前端监控的目的

提升用户体验
更快的发现发现异常、定位异常、解决异常
了解业务数据，指导产品升级——数据驱动的思想

三、前端监控的流程

文章插图

3.1 采集

前端监控的第一个步骤就是数据采集，采集的信息包含环境信息、性能信息、异常信息、业务信息。

3.1.1 环境信息

环境信息是每个监控系统必备的内容，毕竟排查问题的时候需要知道来自哪个页面、浏览器是谁、操作用户是谁……,这样才能快速定位问题，解决问题。一般这些常见的环境信息主要包含：

url：正在监控的页面，该页面可能会出现性能、异常问题。获取方式为：
window.location.href
ua:访问该页面时该用户的userAgent信息，包含操作系统和浏览器的类型、版本等。获取方式为：
window.navigator.userAgent
token：记录当前用户是谁。通过记录该用户是谁。
一方面方便将该用户的所有监控信息建立联系，方便数据分析；另一方面通过该标识可以查看该用户的所有操作，方便复现问题。

3.1.2 性能信息

页面的性能直接影响了用户留存率，，google DoubleClick 研究表明：如果一个移动端页面加载时长超过 3 秒，用户就会放弃而离开。BBC 发现网页加载时长每增加 1 秒，用户就会流失 10% 。，Google DoubleClick 研究表明：如果一个移动端页面加载时长超过 3 秒，用户就会放弃而离开。BBC 发现网页加载时长每增加 1 秒，用户就会流失 10% 。所以我们的追求就是提高页面的性能，为了提高性能需要监控哪些指标呢？

3.1.2.1 指标分类

指标有很多，我总结为以下两个方面：网络层面和页面展示层面。

一、网络层面

从网络层面来看涉及的指标有：重定向耗时、DNS解析耗时、TCP连接耗时、SSL耗时、TTFB网络请求耗时、数据传输耗时、资源加载耗时……,各个指标的解释如下表所示：

指标
解释
重定向耗时
重定向所耗费的时间
DNS解析耗时
浏览器输入网址后首先会进行DNS解析，其可以对服务器是否工作作出反馈
TCP连接耗时
指建立连接过程的耗时
SSL连接耗时
指数据安全性、完整性建立耗时
TTFB 网络请求耗时
表示浏览器接收第一个字节的时间
数据传输耗时
浏览器接收内容所耗费的时间
资源加载耗时
DOM构建完毕后到页面加载完毕这段时间

二、页面展示层面

页面展示层面的指标是针对用户体验提出的几个指标，包含FP、FCP、LCP、FMP、DCL、L等，这几个指标其实就是chrome浏览器中performance模块的指标（如图所示）。

文章插图

各个指标的解释如下表所示。

指标
解释
FP（First Paint）
首次绘制，标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点.
FCP（First Contentful Paint）
首次内容绘制，标记浏览器渲染来自 DOM 第一位内容的时间点，该内容可能是文本、图像、SVG 甚至元素.
LCP（Largest Contentful Paint）
最大内容渲染，表示可视区“内容”最大的可见元素开始出现在屏幕上的时间点。
FMP（First Meaningful Paint）
首次有效绘制，表示页面的“主要内容”开始出现在屏幕上的时间点。它是我们测量用户加载体验的主要指标。
DCL（DomContentLoaded）
当 html 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，无需等待样式表、图像和子框架的完成加载.