Flush buffered vitals metrics on page mount

packages/next/client/index.tsx

@@ -33,7 +33,7 @@ import measureWebVitals from './performance-relayer'
 import { RouteAnnouncer } from './route-announcer'
 import { createRouter, makePublicRouterInstance } from './router'
 import { getProperError } from '../lib/is-error'
-import { trackWebVitalMetric } from './vitals'
+import { flushBufferedVitalsMetrics, trackWebVitalMetric } from './vitals'
 import { RefreshContext } from './rsc/refresh'
 
 /// <reference types="react-dom/experimental" />
@@ -1011,6 +1011,11 @@ function Root({
   React.useEffect(() => {
     measureWebVitals(onPerfEntry)
   }, [])
+
+  // Flush buffer on mount
+  React.useEffect(() => {
+    flushBufferedVitalsMetrics()
+  }, [])
   return children as React.ReactElement
 }
 

packages/next/client/vitals.ts

@@ -3,24 +3,43 @@ import { NextWebVitalsMetric } from '../pages/_app'
 
 type ReportWebVitalsCallback = (webVitals: NextWebVitalsMetric) => any
 export const webVitalsCallbacks = new Set<ReportWebVitalsCallback>()
-const metrics: NextWebVitalsMetric[] = []
+
+let flushed = false
+export const bufferedVitalsMetrics: NextWebVitalsMetric[] = []
+
+export function flushBufferedVitalsMetrics() {
+  flushed = true
+  bufferedVitalsMetrics.length = 0
+}
 
 export function trackWebVitalMetric(metric: NextWebVitalsMetric) {
-  metrics.push(metric)
+  bufferedVitalsMetrics.push(metric)
   webVitalsCallbacks.forEach((callback) => callback(metric))
 }
 
 export function useWebVitalsReport(callback: ReportWebVitalsCallback) {
   const metricIndexRef = useRef(0)
 
+  if (process.env.NODE_ENV === 'development') {
+    if (flushed) {
+      console.error(
+        `Web vitals reporting callback is attached too late, please attach it before page is mounted.`
+      )
+    }
+  }
+
   useEffect(() => {
     // Flush calculated metrics
     const reportMetric = (metric: NextWebVitalsMetric) => {
       callback(metric)
-      metricIndexRef.current = metrics.length
+      metricIndexRef.current = bufferedVitalsMetrics.length
     }
-    for (let i = metricIndexRef.current; i < metrics.length; i++) {
-      reportMetric(metrics[i])
+    for (
+      let i = metricIndexRef.current;
+      i < bufferedVitalsMetrics.length;
+      i++
+    ) {
+      reportMetric(bufferedVitalsMetrics[i])
     }
 
     webVitalsCallbacks.add(reportMetric)

test/integration/relay-analytics-disabled/pages/index.js

@@ -1,3 +1,5 @@
+import { bufferedVitalsMetrics } from 'next/dist/client/vitals'
+
 if (typeof navigator !== 'undefined') {
   window.__BEACONS = window.__BEACONS || []
 
@@ -20,6 +22,7 @@ export default () => {
     <div>
       <h1>Foo!</h1>
       <h2>bar!</h2>
+      <p>{`buffered metrics: ${bufferedVitalsMetrics.length}`}</p>
     </div>
   )
 }

test/integration/relay-analytics-disabled/test/index.test.js

@@ -30,11 +30,13 @@ describe('Analytics relayer (disabled)', () => {
     const browser = await webdriver(appPort, '/')
     await browser.waitForElementByCss('h1')
     const h1Text = await browser.elementByCss('h1').text()
+    const pText = await browser.elementByCss('p').text()
     const firstContentfulPaint = parseFloat(
       await browser.eval('localStorage.getItem("FCP")')
     )
 
     expect(h1Text).toMatch(/Foo!/)
+    expect(pText).toMatch('buffered metrics: 0')
 
     expect(firstContentfulPaint).not.toBeNaN()
     expect(firstContentfulPaint).toBeGreaterThan(0)

test/integration/relay-analytics/pages/index.js

@@ -1,5 +1,6 @@
 /* global localStorage */
 import { unstable_useWebVitalsReport } from 'next/vitals'
+import { bufferedVitalsMetrics } from 'next/dist/client/vitals'
 
 if (typeof navigator !== 'undefined') {
   window.__BEACONS = window.__BEACONS || []
@@ -37,6 +38,7 @@ export default () => {
     <div>
       <h1>Foo!</h1>
       <h2>bar!</h2>
+      <p>{`buffered metrics: ${bufferedVitalsMetrics.length}`}</p>
     </div>
   )
 }

test/integration/relay-analytics/test/index.test.js

@@ -67,6 +67,7 @@ function runTest() {
     await browser.waitForElementByCss('h1')
 
     const h1Text = await browser.elementByCss('h1').text()
+    const pText = await browser.elementByCss('p').text()
     const data = parseFloat(
       await browser.eval('localStorage.getItem("Next.js-hydration")')
     )
@@ -81,6 +82,7 @@ function runTest() {
     )
     let cls = await browser.eval('localStorage.getItem("CLS")')
     expect(h1Text).toMatch(/Foo!/)
+    expect(pText).toMatch('buffered metrics: 0')
     expect(data).not.toBeNaN()
     expect(data).toBeGreaterThan(0)
     expect(firstByte).not.toBeNaN()