这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
为什么聊前端监控
什么是前端监控
前端监控是指尽可能采集用户从输入url到看到页面以及后续交互过程中产生的数据、性能指标及异常事件，并上报给平台
为什么需要它
通过对页面数据的分析，帮助开发者快速定位性能较差页面的问题，方便后续优化。
当页面性能较差时，很可能影响用户留存量。
到底监控了什么
- 性能指标
- 异常事件
- 用户行为
前端监控之常用性能指标
web性能标准的诞生
早期网页由于纯静态，没有对应标准，后面交互越来越复杂，页面性能被开发者纳入考虑范围。
2010年8月W3C成立了web性能工作组，制定了一系列web性能标准，并应用到更多环境中。
传统的性能指标
依赖navigating timing1/2，加载过程中各阶段性能耗时来衡量性能。
以用户为中心的性能指标
传统性能指标专注于技术细节，但很难反应用户需求，加载速度快不代表用户体验好。创建以用户为中心的性能指标，直接提升用户体验。
- FP(First Paint) 首屏渲染
- FCP(First Contentful Paint) 首次有内容渲染
- FMP(First Meaningful Paint) 首次有意义内容渲染
- TTI(Time to Interactive) 从开始加载到主要子资源完成渲染，并能快速可靠相应用户输入所需时间。很重要，TTI越小用户体验一般越小
- SI(Speed Index) 可视区域加载速度，检测加载体验（比如优先渲染大面积内容用户体验会较好）
- FID(First Input Delay) 第一次与用户交互直到实际处理时间时的时间
- LCP(Largest Contentful Paint) 最大内容在可视区域内变得可见的时间点（一般认为最大一段内容对于理解页面元素最有用）
- TBT(Total Blocking Time) 主线程在空闲之前的繁忙程度，页面无法响应用户输入的时间有多少（从FCP到TTI之间所有长任务的阻塞时间总和）
- CLS（Cumulative Layout Shift) 加载期间视口中元素的移动程度
前端监控之前端常见异常
- 静态资源错误
- 静态资源在拉取和加载时出问题，比如网络问题，导致图片裂开，404，视频加载失败等。
- 请求异常
- 异步拉取静态资源失败也属于请求错误
- http状态码>=400一般代表客户端或服务端错误
- Js错误
- 白屏异常
- 一般没有浏览器的标准化方法监听，通过Dom树来自行判断
监控前端性能与异常
- 性能指标监控
- MDN有关于window.xx接口监控性能
- Js错误监控
- MDN也有……
- 一般会添加window.addEventListener监听
- 静态资源错误监控
- 类似Js
- 请求异常监控
- Fetch接口
- XMLHR接口
封装一个前端监控SDK
流程
数据采集 -> 组装上报 -> 清洗存储 -> 数据消费
