这是我参与「第五届青训营 」伴学笔记创作活动的第 12天
一、本堂课重点内容:
- 引入前端监控的概念
- 介绍前端监控的性能指标与异常
- 实战：封装用于监听性能指标与前端异常的监听器
- 实战：封装一个有完整上报能力的 sdk
二、详细知识点介绍:
2.1 前端监控
前端监控就是尽可能的采集浏览器从输入URL到页面展示这一过程及后续用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费
2.2 为什么需要前端监控
从用户来看，浏览网页会遇到的问题：
- 网页打开慢
- 网页图片全都裂开，即加载失败
- 网页空白
- 网页卡顿
从开发者来看，可知出现问题原因：
- 打开慢——页面某个关键资源渲染太慢
- 交互卡顿——页面同步计算任务太重，阻塞渲染
- 资源加载失败——客户端网络状态差，或上游服务节点异常
- 页面白屏——页面脚本执行失败，关键资源加载失败，请求失败等
通过前端监控开发者可以分析页面的数据，来对质量差的网页进行分析和优化
2.3 前端到底监控了什么
- 性能指标
- 异常事件
- 用户行为
2.4 前端监控之常用性能指标
2.4.1 web性能标准的诞生
- 早期网页是纯静态的，但随着Web 爆发式发展，页面交互越来越复杂。开发者开始思考如何提高Web性能、改善用户体验。
- 因此，2010年8月, W3C成立了Web性能工作组，由来自Google和 Microsoft的工程师担任主席，目标是制定衡量Web应用性能的方法和 API.
- 随后，Web 性能工作组开始制定一系列Web 性能标准，应用到桌面和移动浏览器以及其他环境中，帮助Web开发人员评估和理解应用的性能特征。
2.4.2 传统的性能指标
传统的性能指标主要依赖Navigation Timing或者
Navigation Timing 2，通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能。
2.4.3 以客户为中心的性能指标
传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么如果你仅仅是把加载速度优化的更快，你很快就会发现网站的用户体验依然很差。
这就是创建用户为中心的性能指标的原因，它们专注于用户视角下的浏览体验。
2.5 前端监控之前端常见监控异常
- 静态资源错误：静态资源如图片，音频等，静态资源错误即拉取和加载静态资源的过程中发生预期之外的错误，如网络异常
- 请求异常：对于通过异步请求拉取的静态资源错误也可归纳为请求异常
- JS错误：在页面运行时发生的JS错误会严重影响页面的正常渲染与交互，是前端监控的重点
- 白屏异常：通过判断DOM树的结构来粗略的判断白屏是否发生
2.6 监控前端性能和异常
-
利用
window.addEventListener的error和unhandledrejection可以监控全局JS -
利用window.addEventListener的error事件可以监控到静态资源错误，注意要和js error进行区分。
3.请求监控， 通过hook xhr 和fetch 对象来监听请求时发生的错误。
三、引用参考：
- 青训营ppt
