flush metrics on each collect

vercel · Sep 11, 2021 · 556e70c · 556e70c
1 parent 0e711e8
commit 556e70c
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 27 deletions.
diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx
@@ -32,7 +32,7 @@ import PageLoader, { StyleSheetTuple } from './page-loader'
 import measureWebVitals from './performance-relayer'
 import { RouteAnnouncer } from './route-announcer'
 import { createRouter, makePublicRouterInstance } from './router'
-import { flushWebVitalsCallbacks } from '../vitals/vitals'
+import { trackWebVitalMetric } from '../vitals/vitals'
 
 /// <reference types="react-dom/experimental" />
 
@@ -310,7 +310,7 @@ export async function initNext(opts: { webpackHMR?: any } = {}) {
             : 'web-vital',
       }
       exportedReportWebVitals?.(webVitals)
-      flushWebVitalsCallbacks(webVitals)
+      trackWebVitalMetric(webVitals)
     }
 
     const pageEntrypoint =

diff --git a/packages/next/vitals/vitals.ts b/packages/next/vitals/vitals.ts
@@ -3,23 +3,22 @@ import { NextWebVitalsMetric } from '../pages/_app'
 
 type ReportWebVitalsCallback = (webVitals: NextWebVitalsMetric) => any
 export const webVitalsCallbacks = new Set<ReportWebVitalsCallback>()
-let metric: NextWebVitalsMetric
+const metrics: NextWebVitalsMetric[] = []
 
-export function flushWebVitalsCallbacks(_metric: NextWebVitalsMetric) {
-  metric = _metric
+export function trackWebVitalMetric(metric: NextWebVitalsMetric) {
+  metrics.push(metric)
   webVitalsCallbacks.forEach((callback) => callback(metric))
 }
 
 export function useWebVitalsReport(callback: ReportWebVitalsCallback) {
   useEffect(() => {
-    if (metric) {
-      callback(metric)
-      return
+    if (metrics.length) {
+      metrics.forEach((metric) => callback(metric))
     }
 
     webVitalsCallbacks.add(callback)
     return () => {
       webVitalsCallbacks.delete(callback)
     }
-  }, [callback])
+  }, [callback, metrics.length])
 }
diff --git a/test/integration/relay-analytics/pages/_app.js b/test/integration/relay-analytics/pages/_app.js
@@ -7,9 +7,12 @@ export default class MyApp extends App {}
 /*
   Method is experimental and will eventually be handled in a Next.js plugin
 */
+
+///* reportWebVitals
 export function reportWebVitals(data) {
   localStorage.setItem(
     data.name || data.entryType,
     data.value !== undefined ? data.value : data.startTime
   )
 }
+// reportWebVitals */
diff --git a/test/integration/relay-analytics/pages/index.js b/test/integration/relay-analytics/pages/index.js
@@ -1,3 +1,6 @@
+/* global localStorage */
+import { useWebVitalsReport } from 'next/vitals'
+
 if (typeof navigator !== 'undefined') {
   window.__BEACONS = window.__BEACONS || []
 
@@ -16,6 +19,12 @@ if (typeof navigator !== 'undefined') {
 }
 
 export default () => {
+  useWebVitalsReport((data) => {
+    localStorage.setItem(
+      data.name || data.entryType,
+      data.value !== undefined ? data.value : data.startTime
+    )
+  })
   return (
     <div>
       <h1>Foo!</h1>

diff --git a/test/integration/relay-analytics/test/hook-impl-app.js b/test/integration/relay-analytics/test/hook-impl-app.js
diff --git a/test/integration/relay-analytics/test/index.test.js b/test/integration/relay-analytics/test/index.test.js
@@ -1,7 +1,6 @@
 /* eslint-env jest */
 
 import { join } from 'path'
-import fs from 'fs-extra'
 import webdriver from 'next-webdriver'
 import {
   File,
@@ -14,10 +13,7 @@ import {
 
 const appDir = join(__dirname, '../')
 const customApp = new File(join(appDir, 'pages/_app.js'))
-const hookImplCustomAppContent = fs.readFileSync(
-  join(__dirname, 'hook-impl-app.js'),
-  { encoding: 'utf-8' }
-)
+
 let appPort
 let server
 let stdout
@@ -44,7 +40,8 @@ describe('Analytics relayer', () => {
 
   describe('Hook based analytics', () => {
     beforeAll(async () => {
-      customApp.write(hookImplCustomAppContent)
+      customApp.replace('///* reportWebVitals', '/*')
+      customApp.replace('// reportWebVitals */', '*/')
       await buildApp()
     })