【简单版】通过 Window.performance 实现前端页面(性能)监控

1 背景

前端监控系统告警xx接口fetchError
问题：前端监控系统没有更多的错误信息，查询该fetch请求对应的接口日志返回200状态码、无请求异常记录，且后台能查到通过该fetch请求成功发送的数据。那是前端页面的错误还是前端监控系统的问题？如何证明？

2 思考

在前端测获取页面 fetch 请求信息（通过 Window.performance 访问窗口中运行的代码的性能信息；Window.performance.getEntries()可以拿到 fetch 请求信息，但是拿不到Axios请求信息），然后通过埋点将页面性能信息上报。

3 performance相关知识

在这里插入图片描述

4 上代码

注意：加try catch

  /**
 * @returns 上报当前页面资源情况
   */
  reportPerformance () {
    try {
      const params = {
        resource: window.performance.getEntries(),
        network: deepCopy(window.navigator.connection),
        pagePerformance: window.performance.toJSON(),
      }
      if (window.performance?.memory) params.memory = new Memory()
      return this.report('performance', params)// 调用埋点上报的方法
    } catch (e) {
      return this.report('fe_error', { message: e?.message, stack: e?.stack })
    }
  }

上报的params结果贴出来

fetchStart：返回浏览器准备使用HTTP请求读取文档时的Unix毫秒时间戳。该事件在网页查询本地缓存之前发生。
domInteractive：返回当前网页DOM结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时）的Unix毫秒时间戳。
domContentLoadedEventEnd：返回当前网页所有需要执行的脚本执行完成时的Unix毫秒时间戳。

使用示例

计算某fetch请求的请求时间：
performance的fetchStart + performance.getEntries()的fetch请求的startTime

new Date(1728720141830 + 726.1000000238419)

计算白屏时间（用户看到页面展示出现一个元素的时间）：
可以直接采用performance的 domInteractive - fetchStart 获取耗时，此时页面资源加载完成，即将进入渲染环节。
计算首屏时间
首屏时间是指页面第一屏所有资源完整展示的时间。这是一个对用户来说非常直接的体验指标，但是对于前端却是一个非常难以统计衡量的指标。可以使用performance的 domContentLoadedEventEnd - fetchStart 获取耗时，此时页面DOM树已经解析完成并且显示内容