Real User Monitoring
真实用户性能监控
使用
支持esm、commonjs、umd
使用时机越早越好。
因为有些数据产生的时间很晚，所以可能需要很久才能异步拿到数据，可能在拿到完整数据前用户已经离开页面了，不过内部已经帮你做了离开页面前及时用你的.then()回调处理已有数据，你不需要担心这一点。
import monitor from '@duitang/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;
}