@paretojs/monitor v1.0.7

@paretojs/monitor

中文版

A Visual Performance Panel

Usage

Server

Setup

import { addMonitorMiddleware } from '@paretojs/monitor'
import express from 'express'

const app = express()

addMonitorMiddleware(app)({
  // control whether show monitor ui in frontend
  showMonitor: true,
})

Mark

req.monitor.mark('renderTopChunk')

Inject to window

<script
  id="MONITOR"
  dangerouslySetInnerHTML={{ __html: res.locals.monitorInfos }}
/>

Client

Usage

import { report, FirstScreen } from '@paretojs/monitor'
import { useEffect } from 'react'

const App = () => {
  useEffect(() => {
    report().then(console.log)
  }, [])

  return (
    <>
      <div>app</div>
      <FirstScreen />
    </>
  )
}

Report

@paretojs/monitor collects two types of data. One is returned by the report() function mentioned above, and the other is collected using the web-vitals package. As the data collected by web-vitals is recommended to be reported during visibilitychange and pagehide events (refer to https://github.com/GoogleChrome/web-vitals/blob/main/README.md#batch-multiple-reports-together), we store the data collected by web-vitals in window['WEB_VITALS'].

Pitfall

The Time to Interactive (TTI) collected by the web-vitals package is much longer than what we collect ourselves. This is because it waits for the DOM to stabilize, which conflicts with the characteristics of stream rendering.

Report Example

const App = () => {
  useEffect(() => {
    report().then(data => {
      // your report function
      sendToAnalytics(data)
    })

    addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') {
        sendToAnalytics(window['__WEB_VITALS__'])
      }
    })

    // NOTE: Safari does not reliably fire the `visibilitychange` event when the
    // page is being unloaded. If Safari support is needed, you should also flush
    // the queue in the `pagehide` event.
    addEventListener('pagehide', () => {
      sendToAnalytics(window['__WEB_VITALS__'])
    })

    return () => {
      // remove listeners....
    }
  }, [])

  return (
    <>
      <div>app</div>
      <FirstScreen />
    </>
  )
}

Metrics Description

Custom

Performance

The recorded values in Performance correspond to the times in PerformanceNavigationTiming.

Node

Resource