Real User Monitoring

真实用户监控

使用

支持esm、commonjs、umd

在进入页面后使用（越早越好）。

因为有些数据产生的时间很晚，所以可能需要很久才能异步拿到数据，可能在拿到完整数据前用户已经离开页面了，不过内部已经帮你做了关闭页面前及时用你的then()处理已有数据，你不需要担心这一点。

import monitor from "real-user-monitoring";

// 不传参默认页面SPA架构
monitor().then((data) => {
  // data是监控数据
  // do something with data...
});
// 服务端渲染
// monitor('SSR')
// 多页应用
// monitor('MPA')

监控指标

• 内存占用

• dns duration

• tcp duration

• http(s) duration

• redirect duration

• dom ready duration

• onload duration

• FP

• FCP

• TTI

• LCP

• 白屏时间

• 首屏时间

具体指标字段及解释

interface MonitorResult {
  // status: 0-兼容性问题、1-成功、2-js报错、3-未全部完成
  status: number;
  // 用户头信息
  userAgent: string;
  // 监控报错信息，没有则是空字符串
  message: string | Error;
  // 消息发生时的时间戳
  timestamp: number;
  // 页面架构类型，SPA - 单页应用 | SSR - 服务端渲染 | MPA - 多页应用 | UNKNOWN - 未知
  pageType: string;
  // 页面打开方式，back_forward - 前进后退 | reload - 刷新 | navigate - 直接打开
  navigationType: string;
  // 页面完整地址
  location: string | null;
  // 页面query参数
  query: string | null;
  // 页面hash参数
  hash: string | null;
  // V8内存使用量
  usedJSHeapSize: number | null;
  // V8内存总量
  totalJSHeapSize: number | null;
  // 开始上一个页面的unload事件，没有为0
  unloadEventStart: number | null;
  // 上一页页面的unload事件结束，没有为0
  unloadEventEnd: number | null;
  // 第一个HTTP重定向开始时的时间，没有为0
  redirectStart: number | null;
  // 最后一个HTTP重定向完成时（也就是说HTTP响应的最后一个比特直接被收到的时间）的时间戳。
  // 如果没有重定向，或者重定向的是一个不同源，这个值会返回0.
  redirectEnd: number | null;
  // 重定向次数
  redirectCount: number | null;
  // 浏览器准备好使用HTTP请求来获取(fetch)文档的时间戳。这个时间点会在检查任何应用缓存之前。
  fetchStart: number | null;
  // dns解析开始，如果有缓存或持久连接，这个时间会和fetchStart一致
  domainLookupStart: number | null;
  // dns解析结束，如果有缓存或持久连接，这个时间会和fetchStart一致
  domainLookupEnd: number | null;
  // tcp连接开始，如果有缓存或持久连接，这个时间会和fetchStart一致
  connectStart: number | null;
  // tcp连接结束，如果有缓存或持久连接，这个时间会和fetchStart一致
  connectEnd: number | null;
  // 如果用了https，安全握手开始的时间，如果没用https，这个值为0
  secureConnectionStart: number | null;
  // 浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的时间戳。
  requestStart: number | null;
  // 浏览器从服务器收到（或从本地缓存读取）第一个字节时的时间戳。
  // 如果传输层在开始请求之后失败并且连接被重开，该属性将等于新请求的发起时间fetchStart。
  responseStart: number | null;
  // 返回浏览器从服务器收到（或从本地缓存读取，或从本地资源读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭时）的时间戳。
  responseEnd: number | null;
  // 当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的 readystatechange事件触发时）的时间戳。
  domLoading: number | null;
  // 返回当所有需要立即执行的脚本已经被执行（不论执行顺序）时的Unix毫秒时间戳。
  domContentLoadedEventEnd: number | null;
  // 当前文档解析完成，即Document.readyState 变为 'complete'且相对应的readystatechange 被触发时的时间戳。
  domComplete: number | null;
  // 当load事件结束，即加载事件完成时的时间戳。如果这个事件还未被发送，或者尚未完成，它的值将会是0。
  loadEventEnd: number | null;
  // 首次绘制，除浏览器背景之外的其他像素的首次绘制
  fp: number | null;
  // 首次内容绘制，文字、图片、背景图、非白色的canvas、svg的首次绘制
  fcp: number | null;
  // 可交互时间，5s内没有执行时间超过50ms的长任务或请求
  tti: number | null;
  // 最大内容绘制，页面可视区域中最大dom渲染的时间，该过程将持续到用户第一次滚动页面或第一次用户输入
  lcp: number | null;
  // 首屏时间，SPA的首屏比较难判断，可以近似看做最大内容绘制的时间
  firstScreenTime: number | null;
  // 白屏时间，非SPA时白屏时间就是首次内容绘制的时间，SPA中的白屏时间会不一样
  whiteScreenTime: number | null;
}