webmts-monitor

web 指标监控

如何使用

npm i webmts-monitor --save

// ESModule
import monitor from 'webmts-monitor'
monitor({
    ....
})
// CommonJs
const monitor = require('webmts-monitor')
monitor({
    ....
})

API

monitor(config)

monitor({
  firstContentfulPaint: true
  perfTracker: ({data}) => {
    console.log(data)
  }
});

或

monitor({
  firstContentfulPaint: true,
}).then(console.log)

开放式 api

monitor.integratedConfig
monitor.getFCP
monitor.getFID
monitor.getFMP
monitor.getTTI
monitor.getLCP
monitor.getTTFB
monitor.getNavTiming

monitor.getFCP().then(console.log)

请求参数

{
  // 首屏渲染时长
  firstPaint: true,
  // 首屏内容渲染时长
  firstContentfulPaint: true,
  // 首次输入时长
  firstInputDelay: false
  // 首屏核心节点渲染时长
  firstMeaningfulPaint: false
  // 首次可交互时长
  timeToInteractive: false
  // 首屏最大节点渲染时长
  largetContentfulPaint: false
  // 首字节等待时长
  timeToFirstByte: false
  // 导航指标(dns解析时间 | 白屏时间 | tcp连接时间)
  navigationTiming: false,
  // 追踪钩子
  perfTracker: ({data}) => {
    // ...
  }
}