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

为什么需要前端监控

前端生产环境复杂，需要面对不同页面、不同客户端、不同浏览器版本、用户网络环境、机器性能。随之而来产生的问题难以发现，因此我们需要一套前端监控系统，来收集发生在客户端的错误，监控系统的运行状态。

主要监控的指标

异常

• js 运行异常
• 白屏异常
• 资源加载异常
• 网络请求异常

性能指标

• FP
• FCP
• DOM Ready
• DNS

用户行为数据

• PV
• UV
• 页面停留时间
• HTTP 请求监控
  • 请求链路
  • 成功率
  • 返回信息

相关指标解释

• PV (访问量)：

• • Page View，即页面浏览量或点击量，用户每次刷新即被计算一次。

• UV (独立访客)：

• • Unique Visitor，一般使用cookie标记，访问您网站的一台电脑客户端(比如一台电脑开多个浏览器访问则为多个UV)为一个访客，00:00-24:00内相同的客户端只会被计算一次。

• IP (独立IP)：

• • 指独立IP数。00:00-24:00内相同IP地址之被计算一次(多台电脑可能共用一个ip)。

• FP（白屏时间）：

• • 在 head 标签开始加一段脚本，用于记录白屏开始时间，在 head 标签结束之前，加一段脚本，用于计算白屏时间，有些浏览器可以调用 Performance API 得出白屏结束时间，有些不支持，因此，计算方式分两种：
  • juejin.cn/post/684490…

• FCP（首屏时间）：

• • 首屏时间的计算需要用到两个变量，一个是首屏开始，一个是首屏结束，首屏开始也是白屏结束的时间，因此可以用以上方法计算出来，首屏结束时间应该是页面的第一屏绘制完，但是这个我们不好定义，我们知道在一个页面中，图片资源往往是比较后加载完的，因此可以统计首屏加载最慢的图片是否加载完成，加载完了，记录结束时间.
  • juejin.cn/post/684490…

• DOM Ready：

• • DOM Ready，指的是页面解析完成的时间，在高级浏览器里有对应的DOM事件 -DOMContentLoaded:该事件在文档解析完成时会触发,
  • 当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架的完全加载。
  • juejin.cn/post/684490…
  • juejin.cn/post/698846…

• DNS

• • DNS全称Domain Name System，即域名系统。
  • juejin.cn/post/708849…
  • juejin.cn/post/684490…