Flush buffered vitals metrics on page mount #33867

huozhi · 2022-02-01T14:55:25Z

Bug

Related issues linked using fixes #number
Integration tests added
Errors have helpful link attached, see contributing.md

devknoll · 2022-02-01T15:53:48Z

Doesn't this still cause a leak if useWebVitalsReport isn't actually used? I think you probably want a separate (private) hook that you can add to next/client/index.tsx to clear the buffer regardless?

ijjk · 2022-02-01T16:46:34Z

Failing test suites

Commit: 21c5799

test/integration/ondemand/test/index.test.js

On Demand Entries > should navigate to pages with dynamic imports

Expand output

● On Demand Entries › should navigate to pages with dynamic imports

TIMED OUT: /Hello/

/nav/dynamic

  479 | }
  480 |
> 481 | export class File {
      |               ^
  482 |   constructor(path) {
  483 |     this.path = path
  484 |     this.originalContent = existsSync(this.path)

  at Object.check (lib/next-test-utils.js:481:15)
  at Object.<anonymous> (integration/ondemand/test/index.test.js:102:13)

packages/next/client/vitals.ts

packages/next/client/index.tsx

ijjk · 2022-02-01T20:38:20Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js vitals/clear-buffer	Change
buildDuration	12.3s	12.3s	-55ms
buildDurationCached	3.1s	3.1s	⚠️ +9ms
nodeModulesSize	359 MB	359 MB	⚠️ +1.22 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	huozhi/next.js vitals/clear-buffer	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.89	2.908	⚠️ +0.02
/ avg req/sec	864.99	859.55	⚠️ -5.44
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.316	1.34	⚠️ +0.02
/error-in-render avg req/sec	1899.36	1866.09	⚠️ -33.27

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js vitals/clear-buffer	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	27.2 kB	27.2 kB	⚠️ +50 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71 kB	71.1 kB	⚠️ +50 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	huozhi/next.js vitals/clear-buffer	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	huozhi/next.js vitals/clear-buffer	Change
_app-HASH.js gzip	1.37 kB	1.37 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	326 B	326 B	✓
dynamic-HASH.js gzip	2.37 kB	2.37 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	919 B	919 B	✓
image-HASH.js gzip	4.94 kB	4.94 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.19 kB	2.19 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.4 kB	14.4 kB	✓

Client Build Manifests

	vercel/next.js canary	huozhi/next.js vitals/clear-buffer	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	huozhi/next.js vitals/clear-buffer	Change
index.html gzip	530 B	529 B	-1 B
link.html gzip	544 B	544 B	✓
withRouter.html gzip	525 B	525 B	✓
Overall change	1.6 kB	1.6 kB	-1 B

Diffs

Diff for main-HASH.js

@@ -1464,6 +1464,7 @@
         // don't cause any hydration delay:
         _react.default.useEffect(function() {
           (0, _performanceRelayer).default(onPerfEntry);
+          (0, _vitals).flushBufferedVitalsMetrics();
         }, []);
         return children;
       }
@@ -3156,13 +3157,23 @@
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
+      exports.getBufferedVitalsMetrics = getBufferedVitalsMetrics;
+      exports.flushBufferedVitalsMetrics = flushBufferedVitalsMetrics;
       exports.trackWebVitalMetric = trackWebVitalMetric;
       exports.useWebVitalsReport = useWebVitalsReport;
       exports.webVitalsCallbacks = void 0;
       var _react = __webpack_require__(7294);
       var webVitalsCallbacks = new Set();
       exports.webVitalsCallbacks = webVitalsCallbacks;
+      var flushed = false;
       var metrics = [];
+      function getBufferedVitalsMetrics() {
+        return metrics;
+      }
+      function flushBufferedVitalsMetrics() {
+        flushed = true;
+        metrics.length = 0;
+      }
       function trackWebVitalMetric(metric) {
         metrics.push(metric);
         webVitalsCallbacks.forEach(function(callback) {
@@ -3171,6 +3182,8 @@
       }
       function useWebVitalsReport(callback) {
         var metricIndexRef = (0, _react).useRef(0);
+        if (false) {
+        }
         (0, _react).useEffect(
           function() {
             // Flush calculated metrics

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-9e509be81242c9cb.js"
+      src="/_next/static/chunks/main-7381bf85898cb56a.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-9e509be81242c9cb.js"
+      src="/_next/static/chunks/main-7381bf85898cb56a.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-9e509be81242c9cb.js"
+      src="/_next/static/chunks/main-7381bf85898cb56a.js"
       defer=""
     ></script>
     <script

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js vitals/clear-buffer	Change
buildDuration	15.7s	15.9s	⚠️ +145ms
buildDurationCached	3.2s	3.1s	-35ms
nodeModulesSize	359 MB	359 MB	⚠️ +1.22 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	huozhi/next.js vitals/clear-buffer	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.905	2.935	⚠️ +0.03
/ avg req/sec	860.57	851.71	⚠️ -8.86
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.328	1.354	⚠️ +0.03
/error-in-render avg req/sec	1883.11	1845.82	⚠️ -37.29

Client Bundles (main, webpack, commons) Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js vitals/clear-buffer	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	27.3 kB	27.4 kB	⚠️ +56 B
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.3 kB	71.3 kB	⚠️ +56 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	huozhi/next.js vitals/clear-buffer	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	huozhi/next.js vitals/clear-buffer	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.36 kB	2.36 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	911 B	911 B	✓
image-HASH.js gzip	4.98 kB	4.98 kB	✓
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.21 kB	2.21 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.3 kB	14.3 kB	✓

Client Build Manifests

	vercel/next.js canary	huozhi/next.js vitals/clear-buffer	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes Overall increase ⚠️

	vercel/next.js canary	huozhi/next.js vitals/clear-buffer	Change
index.html gzip	530 B	530 B	✓
link.html gzip	543 B	543 B	✓
withRouter.html gzip	524 B	525 B	⚠️ +1 B
Overall change	1.6 kB	1.6 kB	⚠️ +1 B

Diffs

Diff for main-HASH.js

@@ -1464,6 +1464,7 @@
         // don't cause any hydration delay:
         _react.default.useEffect(function() {
           (0, _performanceRelayer).default(onPerfEntry);
+          (0, _vitals).flushBufferedVitalsMetrics();
         }, []);
         return children;
       }
@@ -3156,13 +3157,23 @@
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
+      exports.getBufferedVitalsMetrics = getBufferedVitalsMetrics;
+      exports.flushBufferedVitalsMetrics = flushBufferedVitalsMetrics;
       exports.trackWebVitalMetric = trackWebVitalMetric;
       exports.useWebVitalsReport = useWebVitalsReport;
       exports.webVitalsCallbacks = void 0;
       var _react = __webpack_require__(7294);
       var webVitalsCallbacks = new Set();
       exports.webVitalsCallbacks = webVitalsCallbacks;
+      var flushed = false;
       var metrics = [];
+      function getBufferedVitalsMetrics() {
+        return metrics;
+      }
+      function flushBufferedVitalsMetrics() {
+        flushed = true;
+        metrics.length = 0;
+      }
       function trackWebVitalMetric(metric) {
         metrics.push(metric);
         webVitalsCallbacks.forEach(function(callback) {
@@ -3171,6 +3182,8 @@
       }
       function useWebVitalsReport(callback) {
         var metricIndexRef = (0, _react).useRef(0);
+        if (false) {
+        }
         (0, _react).useEffect(
           function() {
             // Flush calculated metrics

Diff for index.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-9e509be81242c9cb.js"
+      src="/_next/static/chunks/main-7381bf85898cb56a.js"
       defer=""
     ></script>
     <script

Diff for link.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-9e509be81242c9cb.js"
+      src="/_next/static/chunks/main-7381bf85898cb56a.js"
       defer=""
     ></script>
     <script

Diff for withRouter.html

@@ -19,7 +19,7 @@
       defer=""
     ></script>
     <script
-      src="/_next/static/chunks/main-9e509be81242c9cb.js"
+      src="/_next/static/chunks/main-7381bf85898cb56a.js"
       defer=""
     ></script>
     <script

Commit: 053f083

## Bug fixes vercel#32631 - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [x] Errors have helpful link attached, see `contributing.md`

Flush buffered vitals metrics on page mount

44b6279

ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Feb 1, 2022

This comment has been minimized.

Sign in to view

huozhi marked this pull request as ready for review February 1, 2022 15:22

huozhi requested review from ijjk, shuding and timneutkens as code owners February 1, 2022 15:22

huozhi requested a review from devknoll February 1, 2022 15:22

clean buffer in client root

21c5799

This comment has been minimized.

Sign in to view

devknoll reviewed Feb 1, 2022

View reviewed changes

packages/next/client/vitals.ts Outdated Show resolved Hide resolved

devknoll reviewed Feb 1, 2022

View reviewed changes

packages/next/client/vitals.ts Outdated Show resolved Hide resolved

update to feedbacks

265381e

devknoll reviewed Feb 1, 2022

View reviewed changes

packages/next/client/vitals.ts Show resolved Hide resolved

This comment has been minimized.

Sign in to view

devknoll previously approved these changes Feb 1, 2022

View reviewed changes

shuding reviewed Feb 1, 2022

View reviewed changes

packages/next/client/index.tsx Outdated Show resolved Hide resolved

merge effects

75bb710

huozhi dismissed devknoll’s stale review via 75bb710 February 1, 2022 18:42

shuding approved these changes Feb 1, 2022

View reviewed changes

This comment has been minimized.

Sign in to view

Merge branch 'canary' into vitals/clear-buffer

053f083

ijjk approved these changes Feb 1, 2022

View reviewed changes

kodiakhq bot merged commit 4786557 into vercel:canary Feb 1, 2022

huozhi deleted the vitals/clear-buffer branch February 3, 2022 12:00

github-actions bot locked as resolved and limited conversation to collaborators Mar 5, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Flush buffered vitals metrics on page mount #33867

Flush buffered vitals metrics on page mount #33867

huozhi commented Feb 1, 2022

This comment has been minimized.

devknoll commented Feb 1, 2022

This comment has been minimized.

ijjk commented Feb 1, 2022

This comment has been minimized.

This comment has been minimized.

ijjk commented Feb 1, 2022

Diffs

Diffs

Flush buffered vitals metrics on page mount #33867

Flush buffered vitals metrics on page mount #33867

Conversation

huozhi commented Feb 1, 2022

Bug

This comment has been minimized.

devknoll commented Feb 1, 2022

This comment has been minimized.

ijjk commented Feb 1, 2022

Failing test suites

This comment has been minimized.

This comment has been minimized.

ijjk commented Feb 1, 2022

Stats from current PR

Diffs

Diffs