From 265381e283a15e92fa884a24867a13413866912a Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 1 Feb 2022 18:30:52 +0100
Subject: [PATCH] update to feedbacks

---
 packages/next/client/vitals.ts                | 22 +++++++++----------
 .../relay-analytics-disabled/pages/index.js   |  4 ++--
 .../relay-analytics/pages/index.js            |  4 ++--
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/next/client/vitals.ts b/packages/next/client/vitals.ts
index a94b0f1984020..32029868674d5 100644
--- a/packages/next/client/vitals.ts
+++ b/packages/next/client/vitals.ts
@@ -5,15 +5,19 @@ type ReportWebVitalsCallback = (webVitals: NextWebVitalsMetric) => any
 export const webVitalsCallbacks = new Set<ReportWebVitalsCallback>()
 
 let flushed = false
-export const bufferedVitalsMetrics: NextWebVitalsMetric[] = []
+const metrics: NextWebVitalsMetric[] = []
+
+export function getBufferedVitalsMetrics() {
+  return metrics
+}
 
 export function flushBufferedVitalsMetrics() {
   flushed = true
-  bufferedVitalsMetrics.length = 0
+  metrics.length = 0
 }
 
 export function trackWebVitalMetric(metric: NextWebVitalsMetric) {
-  bufferedVitalsMetrics.push(metric)
+  metrics.push(metric)
   webVitalsCallbacks.forEach((callback) => callback(metric))
 }
 
@@ -23,7 +27,7 @@ export function useWebVitalsReport(callback: ReportWebVitalsCallback) {
   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.`
+        'The `useWebVitalsReport` hook was called too late -- did you use it inside of a <Suspense> boundary?'
       )
     }
   }
@@ -32,14 +36,10 @@ export function useWebVitalsReport(callback: ReportWebVitalsCallback) {
     // Flush calculated metrics
     const reportMetric = (metric: NextWebVitalsMetric) => {
       callback(metric)
-      metricIndexRef.current = bufferedVitalsMetrics.length
+      metricIndexRef.current = metrics.length
     }
-    for (
-      let i = metricIndexRef.current;
-      i < bufferedVitalsMetrics.length;
-      i++
-    ) {
-      reportMetric(bufferedVitalsMetrics[i])
+    for (let i = metricIndexRef.current; i < metrics.length; i++) {
+      reportMetric(metrics[i])
     }
 
     webVitalsCallbacks.add(reportMetric)
diff --git a/test/integration/relay-analytics-disabled/pages/index.js b/test/integration/relay-analytics-disabled/pages/index.js
index b6bd818dc3d8e..b5832179bbd84 100644
--- a/test/integration/relay-analytics-disabled/pages/index.js
+++ b/test/integration/relay-analytics-disabled/pages/index.js
@@ -1,4 +1,4 @@
-import { bufferedVitalsMetrics } from 'next/dist/client/vitals'
+import { getBufferedVitalsMetrics } from 'next/dist/client/vitals'
 
 if (typeof navigator !== 'undefined') {
   window.__BEACONS = window.__BEACONS || []
@@ -22,7 +22,7 @@ export default () => {
     <div>
       <h1>Foo!</h1>
       <h2>bar!</h2>
-      <p>{`buffered metrics: ${bufferedVitalsMetrics.length}`}</p>
+      <p>{`buffered metrics: ${getBufferedVitalsMetrics().length}`}</p>
     </div>
   )
 }
diff --git a/test/integration/relay-analytics/pages/index.js b/test/integration/relay-analytics/pages/index.js
index f404571d2c782..c10829859fd1c 100644
--- a/test/integration/relay-analytics/pages/index.js
+++ b/test/integration/relay-analytics/pages/index.js
@@ -1,6 +1,6 @@
 /* global localStorage */
 import { unstable_useWebVitalsReport } from 'next/vitals'
-import { bufferedVitalsMetrics } from 'next/dist/client/vitals'
+import { getBufferedVitalsMetrics } from 'next/dist/client/vitals'
 
 if (typeof navigator !== 'undefined') {
   window.__BEACONS = window.__BEACONS || []
@@ -38,7 +38,7 @@ export default () => {
     <div>
       <h1>Foo!</h1>
       <h2>bar!</h2>
-      <p>{`buffered metrics: ${bufferedVitalsMetrics.length}`}</p>
+      <p>{`buffered metrics: ${getBufferedVitalsMetrics().length}`}</p>
     </div>
   )
 }