Web前端监控的方案

本文介绍: 整篇文章侧重于性能监控方面，关于用户行为监控可能更多的需要和产品经理探讨，根据监控数据改变业务策略，来不断提升用户的留存和转化。性能监控，涉及的面比较广、链路比较长，针对前端开发要掌握常见的监控指标，理解监控的整个链路。

We b 前端监控的方案

前端监控是一个非常重要的话题，对于业务的发展意义重大，就像遍布在城市各处的探头，实时监测整座城市的运行状况，保证系统的稳定、高效运行。

前端监控的意义

前端监控，对于业务和团队的重要性，不言而喻，是前端领域绕不开的一个话题。最大的意义是能了解系统的运行状态，哪些地方还有优化的空间，让App和网站运行的更流畅，从技术的角度为业务赋能，获取到更多的潜在用户。

著名的 2-5-8 原则

当用户能够在 2 秒以内得到响应时，会感觉系统的响应很快；
当用户在 2-5 秒之间得到响应时，会感觉系统的响应速度还可以；
当用户在 5-8 秒以内得到响应时，会感觉系统的响应速度很慢，但是还可以接受；
而当用户在超过 8 秒后仍然无法得到响应时，会感觉系统糟透了，或者认为系统已经失去响应，而选择离开这个 Web 站点，或者发起第二次请求。

监控的内容

主要包括用户行为、程序异常、运行性能这三方面的内容。

用户行为，用户在网站或App上浏览了哪些模块，热点区域有哪些，用户画像等数据
程序异常，系统运行过程中JS脚本报错、资源（图片、CSS等）加载异常信息
运行性能，侧重系统的性能指标，比如页面的白屏时间、秒开率，载入时长等

本文更侧重于介绍用户行为数据和运行指标的上报监控链路，程序异常的异常监控一般会采用业界的主流方案，比如 s entry 这样的监控系统来辅助处理系统的错误异常。

监控的形式

监控的形式，主要分为两类：主动监控和被动监控。

被动监控，基于真实用户场景，通常经过页面埋点、数据上报、统计分析和生成报警等环节。
主动监控，基于仿真模拟环境，通过主动嗅探页面的运行状态达到实时监测的目的。

总体方案 设计

一般监控系统，都是经过页面埋点，数据上报，后台存储，汇总统计，报警展示，优化整改等几个环节，每个环节都可以采用不同的方案来迎合业务的需求。

页面埋点，（前端埋点）设定好在哪些地方上报统计的数据，比如用户点击某个按钮时，上报相应的数据标识，又或者在页面初始化的过程中，
数据上报，将前端采集的到数据信息，发送给监控统计的后台接口
数据存储，监控数据存储的地方，根据数据量的大小选择不同的方案，如关系型数据库MySQL、Had oop等
汇总统计，上报的监控数据，有很多无效的，需要清洗加工，按需统计汇总，方便展示
报警展示，一般需要搭建一个管理平台，设置监控指标的阈值参数，当触发时，通知给开发
优化整改，监控的最终目的让系统运行更优，根据监控结果制定系统的下一步优化方案

监控指标（范围）

在页面埋点时，选择哪些指标十分重要，需要和业务方统一好口径。一个完善的监控系统，监控的指标要全面、细粒度、易于量化等。

性能指标

常见的性能指标

FP 白屏（Fi rst Pa int ）表示网页上的第一个像素点绘制的时间
FCP 首屏（first contentful p a int ）首次内容绘制时间（首次绘制文本、图片（包含背景图）、非白色的canvas或SVG时才被算作FCP）
FMP 首次有意义的绘制（Fi rs t Meanin gful Pa int ）首次有意义的内容绘制时间（网页上的主体区域展示出来的时间）
TTI （Ti me To Inter active）可交互时间，应用在视觉上都已渲染出了，完全可以响应用户的输入了。是衡量应用加载所需时间并能够快速响应用户交互的指标
TBT（total block in g time ）总阻塞时间，度量了FCP 和 TTI之间的总时间
CLS(Cumula ti ve La y out Shi ft) 累计布局位移，发生的每个意外的布局移位的所有单独布局移位分数的总和，衡量页面的视觉稳定性的指标
FPS（Fr a mes Per Sec on d）每秒帧率，每秒钟画面更新次数，动画相关的指标，当FPS太低的时候，会感觉页面卡顿
DCL （DOMContentLoa de d）HTML 文档被完全加载和解析完成之后，DOMContentLo aded 事件被触发，无需等待样式，图片和iframe的完成加载

以上的指标，可以借助浏览器给我们提供的per form ance API(window.performance)来计算

const timing = performance.timing // DNS 解析耗时 
timing.domainLookupEnd - timing.domainLookupStart // TCP 连接耗时 
timing.connectEnd - timing.connectStart // SSL 安全连接耗时 
timing.connectEnd - timing.secureConnectionStart // 网络请求耗时
timing.responseStart - timing.requestStart // 数据传输耗时 
timing.responseEnd - timing.responseStart // DOM 解析耗时 
timing.domInteractive - timing.responseEnd // 资源加载耗时 
timing.loadEventStart - timing.domContentLoadedEventEnd /* 关键性能指标 */ // 首包时间 
timing.responseStart - timing.domainLookupStart // 白屏时间
timing.responseStart - timing.navigationStart // 首次可交互时间 
timing.domInteractive - timing.requestStart // HTML 加载完成时间， 即 DOM Ready 时间 
timing.domContentLoadedEventEnd - timing.navigationStart // 页面完全加载时间 
timing.loadEventStart - timing.navigationStart

Google Web Vitals – 使用者 体验 量化

谷歌认为之前的标准太复杂，指标太多了。Google 于 2020 年 5 年 5 日提出了新的使用者体验量化方式，推出 Web Vitals 是简化这个学习的曲线，大家只要观注 Web Vitals 指标表现即可。加载性能LCP，交互性FID，视觉稳定性CLS。只需要做好这三个，网站的性能基本上就可以了。

LCP（Larg est Contentf ul Paint ）最大内容绘制时间，主要内容对用户的可见时间。img 图片，video 元素的封面，通过 url加载到的背景，文本节点等
FID （first Input Delay）首次输入延时，用户可在网页输入文字、点击按钮的时间
CLS （Cumulative Lay out Shi ft）累计版面布局位移 (衡量网页元件视觉稳定性)

测量Web Vitals的工具有很多，比如Ligh thou se，web–vitals，浏览器插件 web vitals

用户指标

UV(用户访问数)、PV（页面被访问次数）、用户的留存率、转化率等等一般和业务耦合比较深，没有通用的范式。在采集时，结合业务需要，在特定的地方埋点，选择统计的表达式。

此时的UV = 3，PV = 10

秒开率应用在1秒（或1~2秒）内打开的用户占有率
用户留存在所有的访问用户中，有多少是DAU(日活跃用户)，月活，
用户转化在所有的到访用户群体中，有多少购买了产品或服务，转化成了业务收益

怎么留住老用户，吸引更多的新用户，将潜在的用户群体转化成业务的客户，是产品抉择过程要考虑的一个重要问题。这是通过监控系统，能拿到一手的数据，辅助产品的未来规划和决策。

前端埋点方案

页面买点主要有以下三种处理方式：

写死在业务代码，和业务逻辑耦合的比较深，也是最灵活的方式，维护比较麻烦，需要重新上线来调整
全量埋点，就是把各种监控相关的指标都上报去，想查啥数据都有，一般是提前引入相关监控脚本SDK
动态埋点，类似于WebPack 开发构建中的热点更新技术（HMR）,先在业务项目引入基础的监控脚本，然后再监控管理平台配置要埋点的信息，再次发布增量监控脚本，自动下发到业务项目中

综合考虑，推荐采用动态埋点的方案，比较灵活，实现高效配置，不需要修改业务代码，只要在业务项目中引入基础SDK，实现无侵入式的前端监控。

上报逻辑

ajax、fetch上报，通过Aja x的方式往后台发送监控数据
image上报，使用一个 1像素的图片实现数据上报
jsonp上报，和image上报类似，支持跨域
sendBeac on 不占用网络请求资源，通常尝试在卸载（unload）文档之前向 Web 服务器发送数据

推荐使用最后一种方案navigator.sendBeacon(), 可用于通过 HTTP POST 将少量数据异步传输到 Web 服务器

navigator.sendBeacon(url); navigator.sendBeacon(url, data); // 页面隐藏时，上报数据 
document.addEventListener("visibilitychange", 
    function logData() { 
        if (document.visibilityState === "hidden") {
            navigator.sendBeacon("/log", analyticsData); 
        } 
    }
);