这是我来参加[第五届青训营]笔记创作活动的第十二天。
今天跟着李俊安老师学习了前端监控的知识。
前端监控就是尽可能的为开发者采集某一过程以及后续用户交互中产生的性能异常问题并且上报到平台。
为什么需要前端监控呢？
前端监控通过页面数据的采集和上报，来帮助开发者更快地对质量差的页面进行分析与归因。
案例：缤趣（图片社交分享网站）将感知等待时间减少了40%，将搜索引擎流量和注册量增加了15%；Cook（冷冻速食订购网站）将页面平均加载时间减少了850毫秒，从而将转化次数提高了7%，将跳出率降低了7%，并将每个会话的页面增加了10%；研究还表明，性能不佳会对业务目标产生负面影响。
前端监控在监控什么？
1、性能指标
2、异常事件
3、用户行为
性能指标
1、传统性能指标
2、以用户为目标的性能指标
- LCP:最大的内容在可视区域会变成可见的时间点
- TBT:衡量主线程空闲之前的繁忙程度
- CLS:量化在页面在加载期间，视口中元素的移动程序
前端监控前端常见异常：
静态资源错误：在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。
请求异常
JS错误：在页面运行时发生的js错误会严重影响页面的正常渲染与交互，是前端监控的重点。
白屏异常
监控方法
性能监控：利用Performance和PerformanceObserve检测
js错误监控：利用window.addEventListener和unhandledrejection
静态资源监控：利用window.addEventListener和error
请求异常监控：通过hookxhr和fetch
总结：通过本节课，学习了什么是前端监控，了解到前端监控的是什么、监控指标等等，也学习了如何进行前端监控，受益匪浅
