这是我参与「第五届青训营」伴学笔记创作活动的第13天!
『 前言 』
前端监控系统最核心的首要是收集客户端的相关数据，我们现在支持的客户端探针有： web 、微信小程序、 andriod 和 ios 。它们主要收集以下数据信息：
1. 性能
- 资源
- 页面加载
- CSS
- JS
- ...
- 接口
2. 错误
- 接口错误
- http 状态码
- 业务响应
- JS 脚本错误
- 资源错误
- CSS
- JS
- ...
3. 辅助信息
- 行为
- 用户
- 设备
一、前端监控基础
1.1 什么是前端监控：
前端监控就是尽可能采集浏览器工作过程以及用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费。
1.2 为什么需要前端监控
前端监控通过对页面数据的采集和上报，来帮助开发者更快速的对质量差的页面进行分析和归因研究表明,性能不佳会对业务目标产生负面影响,例如, BBC 发现他们的网站预加载时间每增加 1 秒,他们就会失去 10% 的用户。前端监控的实质是监控性能指标、异常事件、用户行为。
二、前端监控的常用性能指标
资料卡：Web性能标准的诞生
早期网页是纯静态的。但随着 Web 爆发式发展,页面交互越来越复杂,开发者开始思考如何提高 Web 性能、改善用户体验。
因此，2010 年 8 月, W3C 成立了 Web 性能工作组，由来自 Google 和 Microsoft 的工程师担任主席,目标是制定衡 Web 应用性能的方法和 API.
随后，Web 性能工作组开始制定一系列 Web 性能标准，应用到桌面和移动浏览器以及其他环境中，帮助 Web 开发人员评估和理解应用的性能特征.
以用户为中心的性能指标：
LCP优点:1.容易理解2.给出与FMP相似的结果3.容易计算和上报
| 指标 | 定义 | 存在的问题 | 用户体验 |
|---|---|---|---|
| FCP | 首次内容绘制时间 | 通常与用户无关 | 发生了吗？ |
| FMP | 首次绘制有意义内容的时间点 | 非标准化并且难以在浏览器之间统一实现约 20% 的情况下不准确 | 内容有用吗？ |
| SI | 跟踪在视口中加载内容的视觉进程 | 复杂的指标，难以解释。计算密集，不可用于线上监控。 |
三、前端监控之前端常见异常
3.1 静态资源错误
静态资源表示加载页面所需的 html 、css 和 js 等文件，以及其他各类多媒体文件,如图片、音频和视频等。静态资源在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上.
3.2 请求异常
- Http 请求状态码分类
| 范围 | 定义 |
|---|---|
| 100-199 | 信息响应 |
| 200-299 | 成功响应 |
| 300-399 | 重定向消息 |
| 400-499 | 客户端错误响应 |
| 500-599 | 服务端错误响应 |
请求异常 = 请求响应状态码 >= 400 ， 对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常。请求成功率 = 请求成功数 / （请求成功数 + 请求失败数）
- Js 错误
在页面运行时发生的 Js 错误会严重影响页面的正常渲染与交互，是前端监控的重点！
- 白屏异常
前面几类异常都可以通过浏览器提供的标准化方法来监听到，而白屏异常没有标准化的监听方法，所以更考验前端监控开发者的功底。⌈ 通常我们可以通过判断 DOM 树的结构来粗略的判断白屏是否发生。 ⌋
白屏异常一般结果归因：
- 发生 Js 错误导致关键资源渲染失败；
- 请求异常或静态资源加载失败；
- 长时间的 Js 线程繁忙阻塞渲染任务。
封装一个通用的 SDK 流程：
- 数据采集；
- 组装上报；
- 清洗存储；
- 数据消费。
结尾
综上，今天又是学习的一天呀！😎
