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

前言

网页的使用中难免有各类问题，大家打开网页所进行操作的数据也是极其有用的，将这些数据收集归纳起来可以让开发者尽早定位到打开网页时所遇到的BUG代码处，这样既可以增强网页的稳定性，也可以大幅度提高用户的体验，我们还可以通过数据进行分析，提升网页给用户带来的体验，比如在商城中，哪个商品被更多的人点击，哪个内容被更多的人观看，用户访问网页所使用的设备(即自己的主要服务人群)，打开网页者对该网页是否满意(停留网页的时间为多长)，这样可以给产品开发一个很明确的信号。所以，前端监控是非常必要的。在本系列中，我会对前端监控的关键信息进行介绍描述，

前端监控中各类异常问题及关键数据简介

在前端监控(以及本次大作业)中，我们所需要对页面收集的信息有：
①异常监控信息：JS异常、接口异常、白屏异常、资源异常。
②关键性能数据监控：首次绘制数据(FP)、首次内容绘制(FCP)、Dom Ready、DNS 解析耗时。
③用户行为数据：页面浏览量(PV)、访问某个站点的不同IP地址的人数(Unique Visitor UV)以及页面停留时间。
④HTTP请求监控:请求链路、成功率、返回信息。

前端监控主要流程

前端监控主要流程有5个：

1. 前端埋点
2. 数据上报
3. 加工汇总
4. 可视化展示
5. 监控报警

图片来自github.com/miracle90/m…

对上述流程图可以举个例子：比方说对某个页面进行JS注入，当该网页发生错误时，会对错误数据进行收集并通过前端调用api,先经过springboot，再由springboot操作mysql将数据存入mysql中，我们打开监控网页，监控网页会通过接口进行请求获得数据，对数据进行可视化或者报告||报警操作。

总结

通过本文的学习，大家对前端监控的重要性和大概流程有了深刻的体会，也简单正如前文所说，本系列侧重于前端监控的关键信息，下一节会对异常监控信息中的白屏异常进行介绍。大家敬请期待！