这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
课程介绍
- 引入前端监控的概念
- 介绍前端监控的性能指标与异常
- 实战：封装用于监听性能指标与前端异常的监听器
- 实战：封装一个有完整上报能力的 sdk
前端监控监控了什么？
- 性能指标
- 异常事件
- 用户行为
前端监控之常用性能指标
Web性能标准的诞生
早期网页是纯静态的，但随着Web爆发式发展，页面交互越来越复杂。开发者开始思考如何提高Web性能、改善用户体验。 因此，2010年8月，W3C成立了Web性能工作组，由来自Google和Microsoft的工程师担任主席，目标是制定衡量Web应用性能的方法和API。
传统的性能指标
传统的性能指标主要依赖Navigation Timing或者Navigation Timing 2,通过记录一个文档从发起请求到加载完毕的各阶段的性能耗时，以加载速度来衡量性能。
以用户为中心的性能指标
传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么。如果你仅仅是把加载速度优化的更快，你很快就会发现网站的用户体验依然很差。
概述：前端监控之前端常见异常
静态资源错误
- 静态资源：加载页面所需的html、css和js等文件，以及其他各类多媒体文件，如图片、音频和视频等。
- 静态资源错误：在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染在页面上。
请求异常
Http请求状态码分类
- 100-199-------->信息响应
- 200-299-------->成功响应
- 300-399-------->重定向消息
- 400-499-------->客户端错误响应
- 500-599-------->服务端错误响应
请求异常=请求响应状态码>=400
对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常
状态码0是什么?
请求成功率=请求成功数/（请求成功数+请求失败数）
JS错误
在页面运行时发生的JS错误会严重影响页面的正常渲染与交互，是前端监控的重点。
白屏异常
通常导致白屏发生的原因：
- 发生JS错误导致关键资源渲染失败
- 请求异常或静态资源加载失败
- 长时间的JS线程繁忙阻塞渲染任务
小试牛刀：监控前端性能与异常
性能指标监控
利用Performance和PerformanceObserver可以监控到一些标准的渲染性能数据
JS错误监控
利用window.addEventListener的error和unhandledrejection可以监控到全局的js错误。
渐入佳境：封装一个通用的sdk
前端监控流程概述
临门一脚：数据上报
引用参考
字节青训营第十二节课前端监控SDK开发
