这是我参与「第五届青训营」笔记创作活动的第12天

一.什么是前端监控?

前端监控一般分为三种，分别为用户行为、性能指标以及异常实践。

二.为什么需要前端监控

在我们的网页有了前端监控的能力,使得当我们遇到以下情况时:

前端监控通过对页面数据的采集和上报，来帮助开发者更快速地对质量差的页面进行分析与归因。

早期网页是纯静态的，但随着Web 爆发式发展，页面交互越来越复杂。开发者开始思考如何提高 Web 性能、改善用户体验。

因此，2010 年 8 月，W3C 成立了 Web 性能工作组，由来自 Google 和 Microsoft 的工程师担任主席，目标是制定衡量 Web 应用性能的方法和 API。

随后， Web 性能工作组开始制定一系列 Web 性能标准，应用到桌面和移动浏览器以及其他环境中，帮助 Web 开发人员评估和理解应用的性能特征

传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么。如果仅仅是把加载速度优化的更快，很快就会发现网站的用户体验依然很差这就是创建用户为中心的性能指标的原因，它们专注于用户视角下的浏览体验

静态资源:加载页面所需的 html、css 和 is 等文件，以及其他各类多媒体文件，如图片、音频和视频等

静态资源错误: 在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。

Http 请求状态码分类

100 - 199-------------->信息响应

200- 299--------------->成功响应

300 - 399-------------->重定向消息

400 - 499-------------->客户端错误响应

500 - 599-------------->服务端错误响应

请求异常 =请求响应状态码 >= 400 对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常

在页面运行时发生的 Js 错误会严重影响页面的正常渲染与交互，是前端监控的重点

前面几类异常都可以通过浏览器提供的标准化方法来监听到，而白屏异常没有标准化的监听方法，所以更考验前端监控开发者的功底。通常我们可以通过判断 DOM 树的结构来粗略的判断白屏是否发生

监听到白屏发生后，我们还需要对白屏的发生进行归因通常导致白屏发生的原因可能有如下几点