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

前端监控是什么

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

为什么需要前端监控

前端监控主要通过监控用户行为，分析服务稳定性，检查可交互性和可用性，达到分析业务数据的目的，因此前端监控可以使开发者更快发现当前问题，便于处理。

同上，通过前端监控开发者可以分析页面的数据，来对质量差的网页进行分析和优化

随着网络技术和web的爆发式发展，开发者急需一种提高Web性能，提升用户体验的一种方法。在2010年8月，W3C成立了Web性能工作组，为完成衡量Web应用性能的方法和API努力。

随后Web工作组制定了一系列Web标准，为开发人员评估和理解应用性能特征提供了便利

传统性能指标通过performance.now()指令，依赖Nabigation Timing，加载文档请求速度来判断性能

传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么，但弊端很明显，专注技术细节导致了忽略用户体验。因此衍生出了FP FCP FMP SO LCP等一系列以用户体验为首选的性能指标。

静态资源错误：静态资源如图片，音频等，静态资源错误即拉取和加载静态资源的过程中发生预期之外的错误，例如网络异常。

请求异常：当请求状态码>=400时，出现请求异常。

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

白屏异常：通过判断DOM树的结构来粗略的判断白屏是否发生。导致白屏发生的原因有以下几点发生JS错误导致关键资源渲染失败/请求异常霍静态资源渲染失败/长时间的Js线程繁忙阻塞渲染任务