clean buffer in client root

vercel · Feb 1, 2022 · 21c5799 · 21c5799
1 parent 44b6279
commit 21c5799
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git a/packages/next/client/index.tsx b/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
 }
 

diff --git a/packages/next/client/vitals.ts b/packages/next/client/vitals.ts
@@ -3,8 +3,15 @@ import { NextWebVitalsMetric } from '../pages/_app'
 
 type ReportWebVitalsCallback = (webVitals: NextWebVitalsMetric) => any
 export const webVitalsCallbacks = new Set<ReportWebVitalsCallback>()
+
+let flushed = false
 export const bufferedVitalsMetrics: NextWebVitalsMetric[] = []
 
+export function flushBufferedVitalsMetrics() {
+  flushed = true
+  bufferedVitalsMetrics.length = 0
+}
+
 export function trackWebVitalMetric(metric: NextWebVitalsMetric) {
   bufferedVitalsMetrics.push(metric)
   webVitalsCallbacks.forEach((callback) => callback(metric))
@@ -13,6 +20,14 @@ export function trackWebVitalMetric(metric: NextWebVitalsMetric) {
 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) => {
@@ -32,10 +47,4 @@ export function useWebVitalsReport(callback: ReportWebVitalsCallback) {
       webVitalsCallbacks.delete(reportMetric)
     }
   }, [callback])
-
-  // Flush buffer on mount
-  useEffect(() => {
-    bufferedVitalsMetrics.length = 0
-    metricIndexRef.current = 0
-  }, [])
 }
diff --git a/test/integration/relay-analytics/pages/index.js b/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>
   )
 }
diff --git a/test/integration/relay-analytics/test/index.test.js b/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()