From 556e70ceebad8dea9140b9ad1b7925e8fce433c0 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Sat, 11 Sep 2021 16:34:50 +0800
Subject: [PATCH] flush metrics on each collect

---
 packages/next/client/index.tsx                      |  4 ++--
 packages/next/vitals/vitals.ts                      | 13 ++++++-------
 test/integration/relay-analytics/pages/_app.js      |  3 +++
 test/integration/relay-analytics/pages/index.js     |  9 +++++++++
 .../relay-analytics/test/hook-impl-app.js           | 12 ------------
 test/integration/relay-analytics/test/index.test.js |  9 +++------
 6 files changed, 23 insertions(+), 27 deletions(-)
 delete mode 100644 test/integration/relay-analytics/test/hook-impl-app.js

diff --git a/packages/next/client/index.tsx b/packages/next/client/index.tsx
index 4cd02c7344854d..632d0d5f58c414 100644
--- 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
index 882b0fee865c95..c6228b0bdd4aaa 100644
--- 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
index 5cc9a4d4848885..40450b20f8b8a2 100644
--- 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
index 46c828a80fd0d4..4ab8335374a8ac 100644
--- 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
deleted file mode 100644
index 38dd43ae668fad..00000000000000
--- a/test/integration/relay-analytics/test/hook-impl-app.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/* global localStorage */
-import { useWebVitalsReport } from 'next/vitals'
-
-export default function MyApp({ Component, pageProps }) {
-  useWebVitalsReport((data) => {
-    localStorage.setItem(
-      data.name || data.entryType,
-      data.value !== undefined ? data.value : data.startTime
-    )
-  })
-  return <Component {...pageProps} />
-}
diff --git a/test/integration/relay-analytics/test/index.test.js b/test/integration/relay-analytics/test/index.test.js
index 5ce8b1078dc7b2..c46f76d92bc9af 100644
--- 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()
     })