这是我参与「第五届青训营 」伴学笔记创作活动的第13天
什么是前端监控
前端监控就是尽可能采集浏览器工作过程以及用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费
为什么需要前端监控
前端监控通过对页面数据的采集和上报，来帮助开发者更快速的对质量差的页面进行分析和归因研究表明,性能不佳会对业务目标产生负面影响,例如,BBC发现他们的网站预加载时间每增加1秒,他们就会失去10%的用户
前端监控到底监控了什么
性能指标
异常事件
用户行为
性能指标
传统性能指标主要依赖Navigation Timing或者Navigation Timing2，通过记录一个文档从发起请求到加载完毕的各个阶段的性能好十，以加载速度来衡量性能
以用户为中心的性能指标，因为传统性能指标只是衡量技术的细节，要专注于用户的使用体验 发生了吗 FP，FCP
内容有用吗 FMP，SI
内容可用吗 TTI
令人愉悦吗 FID
LCP与FMP对比，
LCP优点：容易理解，给出与FMP相似的结果，容易计算和上报
TBT 量化了主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久
CLS 量化了在页面加载期间，视口中元素移动程度
异常事件
静态资源错误 在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上
请求异常 请求状态码>=400时
JS错误 在页面运行时发生的JS错误会严重影响页面的正常渲染与交互，是前端监控的重点
白屏异常 没有标准化的监听方法，更考验前端监控开发者的功底
HTTP 状态码
常用的
- 200 - 请求成功
- 301 - 资源（网页等）被永久转移到其它URL
- 404 - 请求的资源（网页等）不存在
- 500 - 内部服务器错误
分类
-
信息响应(100–199)
-
成功响应(200–299)
-
重定向(300–399)
-
客户端错误(400–499)
-
服务器错误(500–599)
JS错误监控
window.addEventListener的error和unhandledrejection可以监控全局JS错误
window.addEventListener的error可以监控到静态资源错误- 请求监控异常，
XMLHttpRequest对象和fetch对象
封装一个通用的SDK
流程概述
数据采集 ==> 组装上报 ==> 清洗存储 ==> 数据消费
请求函数：Navigator.sendBeacon()
