)这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天
一、本堂课重点内容：
- 本堂课的知识要点有哪些？
1.引入前端监控的概念 2.介绍前端监控的性能指标与异常 3.实战:封装用于监听性能指标与前端异常的监听器 4.实战:封装一个有完整上报能力的sdk
二、详细知识点介绍：
- 本堂课介绍了哪些知识点？
前端监控
前端监控是什么
前端监控就是尽可能采集浏览器工作过程以及用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费
为什么需要前端监控
- 用户：知晓自己当前遭遇什么困境
- 开发者：明确事故原因，便于后续debug
前端监控通过对页面数据的采集和上报，帮助开发者更快速的对质量差的页面进行分析和归因
前端监控的内容
- 性能指标
- 异常事件
- 用户行为
如何分析和调优性能瓶颈
衡量
-
Lighthouse
-
阿里云的ARMS
-
New Relic
采集过程:以阿里云的ARMS为例,采集通常是由一个JavaScriptSDK来完成的 采集指标
FCP: 首次绘制内容的耗时 TTI: 页面可交互的时间 PageLoad: 页面完全加载的时间 FPS: 前端页面帧率 静态资源及API请求成功率
排查
FCP首次绘制内容的耗时
- Loading图标
- 骨架屏
- SSR服务端渲染
TTI页面可交互的时间
- 核心内容同步加载
- 非核心内容异步加载
- 图片懒加载
PageLoad 页面完全加载的时间
- 异步加载
FPS 前端页面帧率
- reactwindow
- 渲染优化
静态资源及API请求成功率
- 静态资源能用CDN就用CDN,大幅提高静态资源加载的成功率
- 域名解析时报可以采用静态资源域名自动切换的方案
- HTTPS
收益
- 通过TP数 TP50,TP90来具体量化技术转化效果
前端常见异常
- 静态资源错误
- 请求异常
- JS错误
- 白屏异常
JS错误监控
-
window.addEventListener的error和unhandledrejection可以监控全局JS错误 -
window.addEventListener的error可以监控到静态资源错误 -
请求监控异常，
XMLHttpRequest对象和fetch对象
HTTP 状态码
常用的
- 200 - 请求成功
- 301 - 资源（网页等）被永久转移到其它URL
- 404 - 请求的资源（网页等）不存在
- 500 - 内部服务器错误
分类
- 信息响应(100–199)
- 成功响应(200–299)
- 重定向(300–399)
- 客户端错误(400–499)
- 服务器错误(500–599)
封装一个通用的SDK流程
- 1.数据采集
- 2.组装上报
- 3.清洗存储
- 4.数据消费
三、实践练习例子：
- 有什么实践举例帮助理解知识点？
四、课后个人总结：
- 本章有什么知识点不容易掌握？
- 什么地方容易与其他内容混淆？
五、引用参考：
- 我参考了哪些外部博客/笔记/文章？
- 文章中有什么地方是我参考引用了外部博客/笔记/文章的？
