这是我参加青训营的第十天
分享要点：
1.引入前端监控的概念
前端监控
前端监控是什么
前端监控就是尽可能采集浏览器工作过程以及用户交互中产出的性能指标与发生的异常事件并上 报到平台完成消费
为什么需要前端监控
用户：知晓自己当前遭遇什么困境
开发者：明确事故原因，便于后续debug
前端监控通过对页面数据的采集和上报，帮助开发者更快速的对质量差的页面进行分析和归因
2.介绍前端监控的性能指标与异常
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)
3.实战：封装一个有完整上报能力的 sdk
1.数据采集
2.组装上报
3.清洗存储
4.数据消费
