Clean-up fetch metrics tracking #64746

ijjk · 2024-04-18T18:45:22Z

This ensures we only track fetch metrics in development mode as that's the only time we report them currently, this also adds an upper limit on how many metrics we store per-request as previously this was unbounded, on top of that this ensures we don't keep tracking fetch metrics after the request has ended as we only report on request end, and finally this adds a clean-up to the reference we attach to the request object containing the fetch metrics once we have used them.

Closes: #64212

Closes NEXT-3159

packages/next/src/server/lib/patch-fetch.ts

packages/next/src/client/components/static-generation-async-storage.external.ts

ijjk · 2024-04-18T19:02:19Z

Tests Passed

ijjk · 2024-04-18T19:02:36Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js update/cleanup-fetch-metrics	Change
buildDuration	16.2s	16.3s	⚠️ +143ms
buildDurationCached	10s	7.5s	N/A
nodeModulesSize	199 MB	199 MB	⚠️ +37.5 kB
nextStartRea..uration (ms)	438ms	434ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	ijjk/next.js update/cleanup-fetch-metrics	Change
2453-HASH.js gzip	31.5 kB	31.5 kB	N/A
3304.HASH.js gzip	169 B	169 B	✓
3f784ff6-HASH.js gzip	53.7 kB	53.7 kB	N/A
8299-HASH.js gzip	5.1 kB	5.1 kB	N/A
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	228 B	226 B	N/A
main-HASH.js gzip	29.6 kB	29.6 kB	N/A
webpack-HASH.js gzip	1.64 kB	1.65 kB	N/A
Overall change	45.4 kB	45.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js update/cleanup-fetch-metrics	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js update/cleanup-fetch-metrics	Change
_app-HASH.js gzip	193 B	194 B	N/A
_error-HASH.js gzip	193 B	191 B	N/A
amp-HASH.js gzip	511 B	511 B	✓
css-HASH.js gzip	342 B	343 B	N/A
dynamic-HASH.js gzip	2.51 kB	2.51 kB	N/A
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	365 B	364 B	N/A
hooks-HASH.js gzip	389 B	391 B	N/A
image-HASH.js gzip	4.28 kB	4.28 kB	N/A
index-HASH.js gzip	269 B	268 B	N/A
link-HASH.js gzip	2.68 kB	2.69 kB	N/A
routerDirect..HASH.js gzip	328 B	326 B	N/A
script-HASH.js gzip	395 B	397 B	N/A
withRouter-HASH.js gzip	323 B	323 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	1.21 kB	1.21 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js update/cleanup-fetch-metrics	Change
_buildManifest.js gzip	483 B	485 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	ijjk/next.js update/cleanup-fetch-metrics	Change
index.html gzip	528 B	528 B	✓
link.html gzip	540 B	541 B	N/A
withRouter.html gzip	522 B	523 B	N/A
Overall change	528 B	528 B	✓

Edge SSR bundle Size

	vercel/next.js canary	ijjk/next.js update/cleanup-fetch-metrics	Change
edge-ssr.js gzip	94.5 kB	94.5 kB	N/A
page.js gzip	3.05 kB	3.04 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	ijjk/next.js update/cleanup-fetch-metrics	Change
middleware-b..fest.js gzip	623 B	626 B	N/A
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	25.5 kB	25.5 kB	N/A
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	839 B	839 B	✓

Next Runtimes

	vercel/next.js canary	ijjk/next.js update/cleanup-fetch-metrics	Change
app-page-exp...dev.js gzip	171 kB	171 kB	N/A
app-page-exp..prod.js gzip	97.5 kB	97.5 kB	N/A
app-page-tur..prod.js gzip	99.2 kB	99.3 kB	N/A
app-page-tur..prod.js gzip	93.5 kB	93.5 kB	N/A
app-page.run...dev.js gzip	145 kB	145 kB	N/A
app-page.run..prod.js gzip	92 kB	92 kB	N/A
app-route-ex...dev.js gzip	21.5 kB	21.5 kB	N/A
app-route-ex..prod.js gzip	15.2 kB	15.1 kB	N/A
app-route-tu..prod.js gzip	15.2 kB	15.1 kB	N/A
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	N/A
app-route.ru...dev.js gzip	21.1 kB	21.2 kB	N/A
app-route.ru..prod.js gzip	14.9 kB	14.9 kB	N/A
pages-api-tu..prod.js gzip	9.55 kB	9.55 kB	✓
pages-api.ru...dev.js gzip	9.82 kB	9.82 kB	✓
pages-api.ru..prod.js gzip	9.55 kB	9.55 kB	✓
pages-turbo...prod.js gzip	21.4 kB	21.4 kB	✓
pages.runtim...dev.js gzip	22.1 kB	22.1 kB	✓
pages.runtim..prod.js gzip	21.4 kB	21.4 kB	✓
server.runti..prod.js gzip	51.6 kB	51.6 kB	✓
Overall change	145 kB	145 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js update/cleanup-fetch-metrics	Change
0.pack gzip	1.59 MB	1.59 MB	⚠️ +1.51 kB
index.pack gzip	107 kB	107 kB	⚠️ +638 B
Overall change	1.7 MB	1.7 MB	⚠️ +2.14 kB

Diff details

Diff for middleware.js

Diff too large to display

Diff for image-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [8358],
   {
-    /***/ 1552: /***/ (
+    /***/ 4070: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(5237);
+          return __webpack_require__(396);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 2016: /***/ (module, exports, __webpack_require__) => {
+    /***/ 8490: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,15 +40,15 @@
         __webpack_require__(422)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6074)
+        __webpack_require__(2457)
       );
-      const _getimgprops = __webpack_require__(9571);
-      const _imageconfig = __webpack_require__(6567);
-      const _imageconfigcontextsharedruntime = __webpack_require__(419);
-      const _warnonce = __webpack_require__(4486);
-      const _routercontextsharedruntime = __webpack_require__(162);
+      const _getimgprops = __webpack_require__(7932);
+      const _imageconfig = __webpack_require__(5706);
+      const _imageconfigcontextsharedruntime = __webpack_require__(9483);
+      const _warnonce = __webpack_require__(9035);
+      const _routercontextsharedruntime = __webpack_require__(4829);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6996)
+        __webpack_require__(7240)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -379,7 +379,7 @@
       /***/
     },
 
-    /***/ 9571: /***/ (
+    /***/ 7932: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -395,9 +395,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(4486);
-      const _imageblursvg = __webpack_require__(133);
-      const _imageconfig = __webpack_require__(6567);
+      const _warnonce = __webpack_require__(9035);
+      const _imageblursvg = __webpack_require__(2642);
+      const _imageconfig = __webpack_require__(5706);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -772,7 +772,7 @@
       /***/
     },
 
-    /***/ 133: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2642: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -827,7 +827,7 @@
       /***/
     },
 
-    /***/ 4085: /***/ (
+    /***/ 503: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -854,10 +854,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(2430);
-      const _getimgprops = __webpack_require__(9571);
-      const _imagecomponent = __webpack_require__(2016);
+      const _getimgprops = __webpack_require__(7932);
+      const _imagecomponent = __webpack_require__(8490);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(6996)
+        __webpack_require__(7240)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -889,7 +889,7 @@
       /***/
     },
 
-    /***/ 6996: /***/ (__unused_webpack_module, exports) => {
+    /***/ 7240: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -924,7 +924,7 @@
       /***/
     },
 
-    /***/ 5237: /***/ (
+    /***/ 396: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -941,8 +941,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected]/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(1527);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected][email protected]/node_modules/next/image.js
-      var next_image = __webpack_require__(1577);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected][email protected]/node_modules/next/image.js
+      var next_image = __webpack_require__(73);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -972,12 +972,8 @@
       /***/
     },
 
-    /***/ 1577: /***/ (
-      module,
-      __unused_webpack_exports,
-      __webpack_require__
-    ) => {
-      module.exports = __webpack_require__(4085);
+    /***/ 73: /***/ (module, __unused_webpack_exports, __webpack_require__) => {
+      module.exports = __webpack_require__(503);
 
       /***/
     },
@@ -987,7 +983,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(1552)
+      __webpack_exec__(4070)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 2453-HASH.js

Diff too large to display

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

Diff too large to display

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

Diff too large to display

Diff for app-page.runtime.prod.js

Diff too large to display

Diff for app-route-ex..ntime.dev.js

Diff too large to display

Diff for app-route-ex..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route.runtime.dev.js

Diff too large to display

Diff for app-route.ru..time.prod.js

Diff too large to display

Commit: 49aa25b

This ensures we only track fetch metrics in development mode as that's the only time we report them currently, this also adds an upper limit on how many metrics we store per-request as previously this was unbounded, on top of that this ensures we don't keep tracking fetch metrics after the request has ended as we only report on request end, and finally this adds a clean-up to the reference we attach to the request object containing the fetch metrics once we have used them. Closes: #64212 Closes NEXT-3159

Clean-up fetch metrics tracking

c9af71e

ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Apr 18, 2024

Ethan-Arrowood reviewed Apr 18, 2024

View reviewed changes

packages/next/src/server/lib/patch-fetch.ts Show resolved Hide resolved

packages/next/src/client/components/static-generation-async-storage.external.ts Show resolved Hide resolved

fix type

49aa25b

ijjk marked this pull request as ready for review April 18, 2024 18:59

ijjk requested review from timneutkens, shuding, huozhi, feedthejim, ztanner and wyattjoh as code owners April 18, 2024 18:59

Ethan-Arrowood approved these changes Apr 18, 2024

View reviewed changes

ijjk merged commit 36e3f4e into vercel:canary Apr 18, 2024
73 checks passed

ijjk deleted the update/cleanup-fetch-metrics branch April 18, 2024 19:51

ijjk restored the update/cleanup-fetch-metrics branch April 18, 2024 19:51

ijjk deleted the update/cleanup-fetch-metrics branch April 18, 2024 19:51

ijjk restored the update/cleanup-fetch-metrics branch April 18, 2024 19:51

ijjk deleted the update/cleanup-fetch-metrics branch April 18, 2024 19:51

github-actions bot added the locked label May 3, 2024

github-actions bot locked as resolved and limited conversation to collaborators May 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Clean-up fetch metrics tracking #64746

Clean-up fetch metrics tracking #64746

ijjk commented Apr 18, 2024 •

edited by padmaia

Loading

ijjk commented Apr 18, 2024 •

edited

Loading

ijjk commented Apr 18, 2024

Clean-up fetch metrics tracking #64746

Clean-up fetch metrics tracking #64746

Conversation

ijjk commented Apr 18, 2024 • edited by padmaia Loading

ijjk commented Apr 18, 2024 • edited Loading

Tests Passed

ijjk commented Apr 18, 2024

Stats from current PR

ijjk commented Apr 18, 2024 •

edited by padmaia

Loading

ijjk commented Apr 18, 2024 •

edited

Loading