这是我参与「第五届青训营 」伴学笔记创作活动的第 13天
前端监控
介绍
前端监控就是尽可能的采集浏览器从输入URL到页面展示这一过程及后续用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费
为什么需要前端监控
从用户来看，浏览网页会遇到的问题：
- 网页打开慢
- 网页图片全都裂开，即加载失败
- 网页空白
- 网页卡顿
从开发者来看，可知出现问题原因：
- 打开慢——页面某个关键资源渲染太慢
- 交互卡顿——页面同步计算任务太重，阻塞渲染
- 资源加载失败——客户端网络状态差，或上游服务节点异常
- 页面白屏——页面脚本执行失败，关键资源加载失败，请求失败等
通过前端监控开发者可以分析页面的数据，来对质量差的网页进行分析和优化
监控了什么
- 性能指标
- 异常事件
- 用户行为
前端常见异常
- 静态资源错误：静态资源如图片，音频等，静态资源错误即拉取和加载静态资源的过程中发生预期之外的错误，如网络异常
- 请求异常：对于通过异步请求拉取的静态资源错误也可归纳为请求异常
- JS错误：在页面运行时发生的JS错误会严重影响页面的正常渲染与交互，是前端监控的重点
- 白屏异常：通过判断DOM树的结构来粗略的判断白屏是否发生
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)
总结
这次学习了前端监控的一些分析方法，在开发的时候我们经常会遇到异常，这时候如果是没经验的来说，找一个错误，可能会花上好几天都不一定找得出来，因为思维很容易陷入定式，所以我们系统的学习前端的监控，可以很好的为我们的开发带来很大的帮助。
