Page performance metrics

Measures loading time of a page across many microfrontend modules.

A page should mark it's finished loading time as soon as the main data is loaded and the user can start working with it.

E.g. for a page which contains some quick info (which can be edited) and also a big report (which takes long to load, but it's ok that it takes longer) the page should mark it's ready state when the quick data arrives.

Install

npm i page-performance-metrics

How does it work?

Using a hook the page marks the start time of it's rendering. In the same step the page defines which marker tags should be set in order to mark the page as ready.

This only works if all components define this module as peerDependency and built together in a final build step.

Here is an example:

import { markPerformanceTag, usePagePerfMetrics } from "page-performance-metrics"
import { OtherMicroFrontendComponent } from 'other-client-package'

async function loadSomeData() {
  return new Promise(resolve => {
    setTimeout(
      () => {
        // mark the data loading as finished
        markPerformanceTag('coolApp/superCoolPage/data')
        resolve('this is real data')
      },
      1000
    )
  })
}

const SuperCoolPage = () => {
  // mark point in time and needed tags for the performance measurement
  usePagePerfMetrics({
    pageName: 'coolApp/superCoolPage',
    tagList: [
      'coolApp/superCoolPage/data',
      'otherMicroFrontendComponent/data',
    ],
  })

  const [data, setData] = useState(null)
  useEffect(() => {
    loadsomeData().then(setData)
  }, [])

  return (<div>
    <span>
      This is the loaded data: {data}
    </span>
    { /* This component will send out the other tag from the tagList */}
    <OtherMicroFrontendComponent>
  </div>)
}