@paretojs/monitor

中文版

A Visual Performance Panel

Usage

Server

Setup

1import { addMonitorMiddleware } from '@paretojs/monitor'
2import express from 'express'
3
4const app = express()
5
6addMonitorMiddleware(app)({
7  // control whether show monitor ui in frontend
8  showMonitor: true,
9})

Mark

1req.monitor.mark('renderTopChunk')

Inject to window

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

Client

Usage

1import { report, FirstScreen } from '@paretojs/monitor'
2import { useEffect } from 'react'
3
4const App = () => {
5  useEffect(() => {
6    report().then(console.log)
7  }, [])
8
9  return (
10    <>
11      <div>app</div>
12      <FirstScreen />
13    </>
14  )
15}

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

1const App = () => {
2  useEffect(() => {
3    report().then(data => {
4      // your report function
5      sendToAnalytics(data)
6    })
7
8    addEventListener('visibilitychange', () => {
9      if (document.visibilityState === 'hidden') {
10        sendToAnalytics(window['__WEB_VITALS__'])
11      }
12    })
13
14    // NOTE: Safari does not reliably fire the `visibilitychange` event when the
15    // page is being unloaded. If Safari support is needed, you should also flush
16    // the queue in the `pagehide` event.
17    addEventListener('pagehide', () => {
18      sendToAnalytics(window['__WEB_VITALS__'])
19    })
20
21    return () => {
22      // remove listeners....
23    }
24  }, [])
25
26  return (
27    <>
28      <div>app</div>
29      <FirstScreen />
30    </>
31  )
32}

Metrics Description

Custom

Parameter	Explanation
ps	Page Start - The timestamp from the first script in the head tag
fp	First Paint - The time when the first paint happens on the screen.
dr	DOM Ready - The time when the DOM (Document Object Model) is ready.
ld	Load - The time when the full page has loaded.
fsn	First Screen No Images - The end time of the first screen render (regardless of whether the images have finished loading)
fraf	First RequestAnimationFrame - The time when the first RequestAnimationFrame API is called.
tti	Time to Interactive - The time it takes for the page to become fully interactive.
fpc	First Paint - The time recorded By performance.getEntriesByName("first-paint")[0], Can be compared with the fp value we recorded ourselves
fcp	First Content Paint

Performance

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

Node

Parameter	Explanation
Load First Screen Data	when SSR request ready
On Shell Ready	when onShellReady function called
Render Top Chunk	when head tags send
On All Ready	when onAllReady function called
Pipe End	when stream end

Resource

Parameter	Explanation
scriptStart	Earliest script request time
scriptEnd	The latest script end time
styleStart	Earliest style request time
styleEnd	The latest style end time
imageStart	Earliest image request time in first screen
imageEnd	The latest image end time in first screen