Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow disabling HTTP request logs in dev server #74349

Merged
merged 10 commits into from
Jan 21, 2025

Conversation

mohsen1
Copy link
Contributor

@mohsen1 mohsen1 commented Dec 28, 2024

This PR introduces a way to filter or disable incoming request logs in development. It adds a new incomingRequest option to loggingConfig, supporting both a simple boolean toggle and a configurable ignore. By default, logs remain enabled, preserving existing behavior.

Notes:
loggingConfig.incomingRequest = false fully disables incoming request logs.
loggingConfig.incomingRequest.ignore accepts a regular expressions array to selectively silence logs.
• Covered by unit tests (shouldLogIncomingRequest)

Resolves the dev server’s verbose logging problem discussed in #65992 and complements the effort in #67590.

@ijjk
Copy link
Member

ijjk commented Dec 28, 2024

Allow CI Workflow Run

  • approve CI run for commit: bc8aed5

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

@mohsen1 mohsen1 force-pushed the add-dev-request-logging-ignoring branch from 81f16af to bc8aed5 Compare December 28, 2024 15:51
@huksley
Copy link

huksley commented Dec 29, 2024

IMO, should be called logging.requestTracing sunce it shows both incoming request and response

@mohsen1
Copy link
Contributor Author

mohsen1 commented Jan 2, 2025

Tracing and logging are different concepts. Tracing usually involves keeping track of a request journey and storing it somewhere. Logging is simpler, just print requests that are happening.

@ijjk ijjk requested a review from huozhi January 2, 2025 19:03
@huozhi huozhi added the CI approved Approve running CI for fork label Jan 13, 2025
Copy link
Member

@huozhi huozhi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We also need an e2e development test for this option

@ijjk ijjk added the tests label Jan 14, 2025
@ijjk
Copy link
Member

ijjk commented Jan 14, 2025

Tests Passed

@ijjk
Copy link
Member

ijjk commented Jan 14, 2025

Stats from current PR

Default Build (Increase detected ⚠️)
General
vercel/next.js canary mohsen1/next.js add-dev-request-logging-ignoring Change
buildDuration 18.2s 19.9s ⚠️ +1.7s
buildDurationCached 15.7s 13s N/A
nodeModulesSize 418 MB 418 MB N/A
nextStartRea..uration (ms) 414ms 433ms N/A
Client Bundles (main, webpack)
vercel/next.js canary mohsen1/next.js add-dev-request-logging-ignoring Change
5306-HASH.js gzip 54 kB 53.9 kB N/A
8276.HASH.js gzip 169 B 168 B N/A
8377-HASH.js gzip 5.46 kB 5.44 kB N/A
bccd1874-HASH.js gzip 52.9 kB 52.9 kB N/A
framework-HASH.js gzip 57.5 kB 57.5 kB N/A
main-app-HASH.js gzip 240 B 242 B N/A
main-HASH.js gzip 34.4 kB 34.2 kB N/A
webpack-HASH.js gzip 1.71 kB 1.71 kB N/A
Overall change 0 B 0 B
Legacy Client Bundles (polyfills)
vercel/next.js canary mohsen1/next.js add-dev-request-logging-ignoring Change
polyfills-HASH.js gzip 39.4 kB 39.4 kB
Overall change 39.4 kB 39.4 kB
Client Pages
vercel/next.js canary mohsen1/next.js add-dev-request-logging-ignoring Change
_app-HASH.js gzip 193 B 193 B
_error-HASH.js gzip 193 B 193 B
amp-HASH.js gzip 512 B 510 B N/A
css-HASH.js gzip 343 B 342 B N/A
dynamic-HASH.js gzip 1.84 kB 1.84 kB
edge-ssr-HASH.js gzip 265 B 265 B
head-HASH.js gzip 363 B 362 B N/A
hooks-HASH.js gzip 393 B 392 B N/A
image-HASH.js gzip 4.59 kB 4.57 kB N/A
index-HASH.js gzip 268 B 268 B
link-HASH.js gzip 2.35 kB 2.34 kB N/A
routerDirect..HASH.js gzip 328 B 328 B
script-HASH.js gzip 397 B 397 B
withRouter-HASH.js gzip 323 B 326 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 3.59 kB 3.59 kB
Client Build Manifests
vercel/next.js canary mohsen1/next.js add-dev-request-logging-ignoring Change
_buildManifest.js gzip 748 B 747 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary mohsen1/next.js add-dev-request-logging-ignoring Change
index.html gzip 523 B 524 B N/A
link.html gzip 538 B 538 B
withRouter.html gzip 519 B 520 B N/A
Overall change 538 B 538 B
Edge SSR bundle Size
vercel/next.js canary mohsen1/next.js add-dev-request-logging-ignoring Change
edge-ssr.js gzip 129 kB 129 kB N/A
page.js gzip 208 kB 208 kB N/A
Overall change 0 B 0 B
Middleware size
vercel/next.js canary mohsen1/next.js add-dev-request-logging-ignoring Change
middleware-b..fest.js gzip 670 B 668 B N/A
middleware-r..fest.js gzip 155 B 156 B N/A
middleware.js gzip 31.3 kB 31.3 kB N/A
edge-runtime..pack.js gzip 844 B 844 B
Overall change 844 B 844 B
Next Runtimes
vercel/next.js canary mohsen1/next.js add-dev-request-logging-ignoring Change
274-experime...dev.js gzip 322 B 322 B
274.runtime.dev.js gzip 314 B 314 B
app-page-exp...dev.js gzip 375 kB 374 kB N/A
app-page-exp..prod.js gzip 130 kB 130 kB N/A
app-page-tur..prod.js gzip 143 kB 143 kB N/A
app-page-tur..prod.js gzip 139 kB 139 kB N/A
app-page.run...dev.js gzip 363 kB 362 kB N/A
app-page.run..prod.js gzip 126 kB 126 kB N/A
app-route-ex...dev.js gzip 37.6 kB 37.6 kB N/A
app-route-ex..prod.js gzip 25.6 kB 25.6 kB N/A
app-route-tu..prod.js gzip 25.6 kB 25.6 kB N/A
app-route-tu..prod.js gzip 25.4 kB 25.4 kB N/A
app-route.ru...dev.js gzip 39.2 kB 39.2 kB
app-route.ru..prod.js gzip 25.4 kB 25.4 kB N/A
pages-api-tu..prod.js gzip 9.69 kB 9.69 kB
pages-api.ru...dev.js gzip 11.6 kB 11.6 kB
pages-api.ru..prod.js gzip 9.68 kB 9.68 kB
pages-turbo...prod.js gzip 21.9 kB 21.7 kB N/A
pages.runtim...dev.js gzip 27.7 kB 27.5 kB N/A
pages.runtim..prod.js gzip 21.9 kB 21.7 kB N/A
server.runti..prod.js gzip 916 kB 916 kB N/A
Overall change 70.8 kB 70.8 kB
build cache Overall increase ⚠️
vercel/next.js canary mohsen1/next.js add-dev-request-logging-ignoring Change
0.pack gzip 2.09 MB 2.1 MB ⚠️ +2.44 kB
index.pack gzip 74.4 kB 74.6 kB ⚠️ +231 B
Overall change 2.17 MB 2.17 MB ⚠️ +2.67 kB
Diff details
Diff for edge-ssr.js

Diff too large to display

Diff for image-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [2983],
   {
-    /***/ 3705: /***/ (
+    /***/ 8255: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(8448);
+          return __webpack_require__(8926);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 7342: /***/ (module, exports, __webpack_require__) => {
+    /***/ 4369: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,17 +40,17 @@
         __webpack_require__(6049)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(7196)
+        __webpack_require__(956)
       );
-      const _getimgprops = __webpack_require__(2661);
-      const _imageconfig = __webpack_require__(72);
-      const _imageconfigcontextsharedruntime = __webpack_require__(6386);
-      const _warnonce = __webpack_require__(4496);
-      const _routercontextsharedruntime = __webpack_require__(6443);
+      const _getimgprops = __webpack_require__(485);
+      const _imageconfig = __webpack_require__(4664);
+      const _imageconfigcontextsharedruntime = __webpack_require__(1250);
+      const _warnonce = __webpack_require__(1648);
+      const _routercontextsharedruntime = __webpack_require__(907);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(3433)
+        __webpack_require__(6489)
       );
-      const _usemergedref = __webpack_require__(1942);
+      const _usemergedref = __webpack_require__(5942);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -377,7 +377,7 @@
       /***/
     },
 
-    /***/ 1942: /***/ (module, exports, __webpack_require__) => {
+    /***/ 5942: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -391,39 +391,22 @@
       });
       const _react = __webpack_require__(8101);
       function useMergedRef(refA, refB) {
-        const cleanupA = (0, _react.useRef)(null);
-        const cleanupB = (0, _react.useRef)(null);
-        // NOTE: In theory, we could skip the wrapping if only one of the refs is non-null.
-        // (this happens often if the user doesn't pass a ref to Link/Form/Image)
-        // But this can cause us to leak a cleanup-ref into user code (e.g. via `<Link legacyBehavior>`),
-        // and the user might pass that ref into ref-merging library that doesn't support cleanup refs
-        // (because it hasn't been updated for React 19)
-        // which can then cause things to blow up, because a cleanup-returning ref gets called with `null`.
-        // So in practice, it's safer to be defensive and always wrap the ref, even on React 19.
-        return (0, _react.useCallback)(
-          (current) => {
+        const cleanupA = (0, _react.useRef)(() => {});
+        const cleanupB = (0, _react.useRef)(() => {});
+        return (0, _react.useMemo)(() => {
+          if (!refA || !refB) {
+            return refA || refB;
+          }
+          return (current) => {
             if (current === null) {
-              const cleanupFnA = cleanupA.current;
-              if (cleanupFnA) {
-                cleanupA.current = null;
-                cleanupFnA();
-              }
-              const cleanupFnB = cleanupB.current;
-              if (cleanupFnB) {
-                cleanupB.current = null;
-                cleanupFnB();
-              }
+              cleanupA.current();
+              cleanupB.current();
             } else {
-              if (refA) {
-                cleanupA.current = applyRef(refA, current);
-              }
-              if (refB) {
-                cleanupB.current = applyRef(refB, current);
-              }
+              cleanupA.current = applyRef(refA, current);
+              cleanupB.current = applyRef(refB, current);
             }
-          },
-          [refA, refB]
-        );
+          };
+        }, [refA, refB]);
       }
       function applyRef(refA, current) {
         if (typeof refA === "function") {
@@ -455,7 +438,7 @@
       /***/
     },
 
-    /***/ 2661: /***/ (
+    /***/ 485: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -471,9 +454,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(4496);
-      const _imageblursvg = __webpack_require__(4796);
-      const _imageconfig = __webpack_require__(72);
+      const _warnonce = __webpack_require__(1648);
+      const _imageblursvg = __webpack_require__(4812);
+      const _imageconfig = __webpack_require__(4664);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -881,7 +864,7 @@
       /***/
     },
 
-    /***/ 4796: /***/ (__unused_webpack_module, exports) => {
+    /***/ 4812: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -936,7 +919,7 @@
       /***/
     },
 
-    /***/ 1969: /***/ (
+    /***/ 8273: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -963,10 +946,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(173);
-      const _getimgprops = __webpack_require__(2661);
-      const _imagecomponent = __webpack_require__(7342);
+      const _getimgprops = __webpack_require__(485);
+      const _imagecomponent = __webpack_require__(4369);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(3433)
+        __webpack_require__(6489)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -998,7 +981,7 @@
       /***/
     },
 
-    /***/ 3433: /***/ (__unused_webpack_module, exports) => {
+    /***/ 6489: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -1045,7 +1028,7 @@
       /***/
     },
 
-    /***/ 8448: /***/ (
+    /***/ 8926: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -1062,8 +1045,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@19.0.0/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(5105);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/next/image.js
-      var next_image = __webpack_require__(8140);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/next/image.js
+      var next_image = __webpack_require__(5434);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -1093,12 +1076,12 @@
       /***/
     },
 
-    /***/ 8140: /***/ (
+    /***/ 5434: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(1969);
+      module.exports = __webpack_require__(8273);
 
       /***/
     },
@@ -1108,7 +1091,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(3705)
+      __webpack_exec__(8255)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for link-HASH.js
@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [4672],
   {
-    /***/ 3679: /***/ (
+    /***/ 6613: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/link",
         function () {
-          return __webpack_require__(8562);
+          return __webpack_require__(2488);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 7597: /***/ (module, exports, __webpack_require__) => {
+    /***/ 58: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -30,7 +30,7 @@
           return getDomainLocale;
         },
       });
-      const _normalizetrailingslash = __webpack_require__(4858);
+      const _normalizetrailingslash = __webpack_require__(8650);
       const basePath =
         /* unused pure expression or super */ null && (false || "");
       function getDomainLocale(path, locale, locales, domainLocales) {
@@ -54,7 +54,7 @@
       /***/
     },
 
-    /***/ 3000: /***/ (module, exports, __webpack_require__) => {
+    /***/ 9400: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -71,16 +71,16 @@
       const _react = /*#__PURE__*/ _interop_require_default._(
         __webpack_require__(8101)
       );
-      const _resolvehref = __webpack_require__(9978);
-      const _islocalurl = __webpack_require__(1762);
-      const _formaturl = __webpack_require__(9835);
-      const _utils = __webpack_require__(4781);
-      const _addlocale = __webpack_require__(5244);
-      const _routercontextsharedruntime = __webpack_require__(6443);
-      const _useintersection = __webpack_require__(1587);
-      const _getdomainlocale = __webpack_require__(7597);
-      const _addbasepath = __webpack_require__(7439);
-      const _usemergedref = __webpack_require__(1942);
+      const _resolvehref = __webpack_require__(5066);
+      const _islocalurl = __webpack_require__(5266);
+      const _formaturl = __webpack_require__(4507);
+      const _utils = __webpack_require__(3085);
+      const _addlocale = __webpack_require__(8172);
+      const _routercontextsharedruntime = __webpack_require__(907);
+      const _useintersection = __webpack_require__(9347);
+      const _getdomainlocale = __webpack_require__(58);
+      const _addbasepath = __webpack_require__(943);
+      const _usemergedref = __webpack_require__(5942);
       const prefetched = new Set();
       function prefetch(router, href, as, options) {
         if (false) {
@@ -433,7 +433,7 @@
       /***/
     },
 
-    /***/ 1587: /***/ (module, exports, __webpack_require__) => {
+    /***/ 9347: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -446,7 +446,7 @@
         },
       });
       const _react = __webpack_require__(8101);
-      const _requestidlecallback = __webpack_require__(7512);
+      const _requestidlecallback = __webpack_require__(5832);
       const hasIntersectionObserver =
         typeof IntersectionObserver === "function";
       const observers = new Map();
@@ -559,7 +559,7 @@
       /***/
     },
 
-    /***/ 1942: /***/ (module, exports, __webpack_require__) => {
+    /***/ 5942: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -573,39 +573,22 @@
       });
       const _react = __webpack_require__(8101);
       function useMergedRef(refA, refB) {
-        const cleanupA = (0, _react.useRef)(null);
-        const cleanupB = (0, _react.useRef)(null);
-        // NOTE: In theory, we could skip the wrapping if only one of the refs is non-null.
-        // (this happens often if the user doesn't pass a ref to Link/Form/Image)
-        // But this can cause us to leak a cleanup-ref into user code (e.g. via `<Link legacyBehavior>`),
-        // and the user might pass that ref into ref-merging library that doesn't support cleanup refs
-        // (because it hasn't been updated for React 19)
-        // which can then cause things to blow up, because a cleanup-returning ref gets called with `null`.
-        // So in practice, it's safer to be defensive and always wrap the ref, even on React 19.
-        return (0, _react.useCallback)(
-          (current) => {
+        const cleanupA = (0, _react.useRef)(() => {});
+        const cleanupB = (0, _react.useRef)(() => {});
+        return (0, _react.useMemo)(() => {
+          if (!refA || !refB) {
+            return refA || refB;
+          }
+          return (current) => {
             if (current === null) {
-              const cleanupFnA = cleanupA.current;
-              if (cleanupFnA) {
-                cleanupA.current = null;
-                cleanupFnA();
-              }
-              const cleanupFnB = cleanupB.current;
-              if (cleanupFnB) {
-                cleanupB.current = null;
-                cleanupFnB();
-              }
+              cleanupA.current();
+              cleanupB.current();
             } else {
-              if (refA) {
-                cleanupA.current = applyRef(refA, current);
-              }
-              if (refB) {
-                cleanupB.current = applyRef(refB, current);
-              }
+              cleanupA.current = applyRef(refA, current);
+              cleanupB.current = applyRef(refB, current);
             }
-          },
-          [refA, refB]
-        );
+          };
+        }, [refA, refB]);
       }
       function applyRef(refA, current) {
         if (typeof refA === "function") {
@@ -637,7 +620,7 @@
       /***/
     },
 
-    /***/ 8562: /***/ (
+    /***/ 2488: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -652,7 +635,7 @@
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
         __webpack_require__(5105);
       /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1__ =
-        __webpack_require__(4101);
+        __webpack_require__(4779);
       /* harmony import */ var next_link__WEBPACK_IMPORTED_MODULE_1___default =
         /*#__PURE__*/ __webpack_require__.n(
           next_link__WEBPACK_IMPORTED_MODULE_1__
@@ -683,12 +666,12 @@
       /***/
     },
 
-    /***/ 4101: /***/ (
+    /***/ 4779: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(3000);
+      module.exports = __webpack_require__(9400);
 
       /***/
     },
@@ -698,7 +681,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(3679)
+      __webpack_exec__(6613)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;
Diff for 5306-HASH.js

Diff too large to display

Diff for 8377-HASH.js
@@ -1,8 +1,8 @@
 "use strict";
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
-  [8377],
+  [2727],
   {
-    /***/ 8377: /***/ (module, exports, __webpack_require__) => {
+    /***/ 2727: /***/ (module, exports, __webpack_require__) => {
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
         value: true,
@@ -13,27 +13,27 @@
           return Image;
         },
       });
-      const _interop_require_default = __webpack_require__(2952);
-      const _interop_require_wildcard = __webpack_require__(333);
-      const _jsxruntime = __webpack_require__(3094);
+      const _interop_require_default = __webpack_require__(384);
+      const _interop_require_wildcard = __webpack_require__(4261);
+      const _jsxruntime = __webpack_require__(7048);
       const _react = /*#__PURE__*/ _interop_require_wildcard._(
-        __webpack_require__(1446)
+        __webpack_require__(228)
       );
       const _reactdom = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8307)
+        __webpack_require__(9221)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8050)
+        __webpack_require__(1116)
       );
-      const _getimgprops = __webpack_require__(3201);
-      const _imageconfig = __webpack_require__(6678);
-      const _imageconfigcontextsharedruntime = __webpack_require__(578);
-      const _warnonce = __webpack_require__(1971);
-      const _routercontextsharedruntime = __webpack_require__(7795);
+      const _getimgprops = __webpack_require__(5763);
+      const _imageconfig = __webpack_require__(6224);
+      const _imageconfigcontextsharedruntime = __webpack_require__(6720);
+      const _warnonce = __webpack_require__(894);
+      const _routercontextsharedruntime = __webpack_require__(9093);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1315)
+        __webpack_require__(2809)
       );
-      const _usemergedref = __webpack_require__(592);
+      const _usemergedref = __webpack_require__(1329);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -361,7 +361,7 @@
       /***/
     },
 
-    /***/ 592: /***/ (module, exports, __webpack_require__) => {
+    /***/ 1329: /***/ (module, exports, __webpack_require__) => {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -371,41 +371,24 @@
           return useMergedRef;
         },
       });
-      const _react = __webpack_require__(1446);
+      const _react = __webpack_require__(228);
       function useMergedRef(refA, refB) {
-        const cleanupA = (0, _react.useRef)(null);
-        const cleanupB = (0, _react.useRef)(null);
-        // NOTE: In theory, we could skip the wrapping if only one of the refs is non-null.
-        // (this happens often if the user doesn't pass a ref to Link/Form/Image)
-        // But this can cause us to leak a cleanup-ref into user code (e.g. via `<Link legacyBehavior>`),
-        // and the user might pass that ref into ref-merging library that doesn't support cleanup refs
-        // (because it hasn't been updated for React 19)
-        // which can then cause things to blow up, because a cleanup-returning ref gets called with `null`.
-        // So in practice, it's safer to be defensive and always wrap the ref, even on React 19.
-        return (0, _react.useCallback)(
-          (current) => {
+        const cleanupA = (0, _react.useRef)(() => {});
+        const cleanupB = (0, _react.useRef)(() => {});
+        return (0, _react.useMemo)(() => {
+          if (!refA || !refB) {
+            return refA || refB;
+          }
+          return (current) => {
             if (current === null) {
-              const cleanupFnA = cleanupA.current;
-              if (cleanupFnA) {
-                cleanupA.current = null;
-                cleanupFnA();
-              }
-              const cleanupFnB = cleanupB.current;
-              if (cleanupFnB) {
-                cleanupB.current = null;
-                cleanupFnB();
-              }
+              cleanupA.current();
+              cleanupB.current();
             } else {
-              if (refA) {
-                cleanupA.current = applyRef(refA, current);
-              }
-              if (refB) {
-                cleanupB.current = applyRef(refB, current);
-              }
+              cleanupA.current = applyRef(refA, current);
+              cleanupB.current = applyRef(refB, current);
             }
-          },
-          [refA, refB]
-        );
+          };
+        }, [refA, refB]);
       }
       function applyRef(refA, current) {
         if (typeof refA === "function") {
@@ -437,7 +420,7 @@
       /***/
     },
 
-    /***/ 5318: /***/ (
+    /***/ 272: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -451,9 +434,9 @@
           return AmpStateContext;
         },
       });
-      const _interop_require_default = __webpack_require__(2952);
+      const _interop_require_default = __webpack_require__(384);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1446)
+        __webpack_require__(228)
       );
       const AmpStateContext = _react.default.createContext({});
       if (false) {
@@ -462,7 +445,7 @@
       /***/
     },
 
-    /***/ 1210: /***/ (__unused_webpack_module, exports) => {
+    /***/ 1467: /***/ (__unused_webpack_module, exports) => {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -484,7 +467,7 @@
       /***/
     },
 
-    /***/ 3201: /***/ (
+    /***/ 5763: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -498,9 +481,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(1971);
-      const _imageblursvg = __webpack_require__(3482);
-      const _imageconfig = __webpack_require__(6678);
+      const _warnonce = __webpack_require__(894);
+      const _imageblursvg = __webpack_require__(5868);
+      const _imageconfig = __webpack_require__(6224);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -908,8 +891,8 @@
       /***/
     },
 
-    /***/ 8050: /***/ (module, exports, __webpack_require__) => {
-      /* provided dependency */ var process = __webpack_require__(6611);
+    /***/ 1116: /***/ (module, exports, __webpack_require__) => {
+      /* provided dependency */ var process = __webpack_require__(9829);
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
         value: true,
@@ -930,19 +913,19 @@
           return defaultHead;
         },
       });
-      const _interop_require_default = __webpack_require__(2952);
-      const _interop_require_wildcard = __webpack_require__(333);
-      const _jsxruntime = __webpack_require__(3094);
+      const _interop_require_default = __webpack_require__(384);
+      const _interop_require_wildcard = __webpack_require__(4261);
+      const _jsxruntime = __webpack_require__(7048);
       const _react = /*#__PURE__*/ _interop_require_wildcard._(
-        __webpack_require__(1446)
+        __webpack_require__(228)
       );
       const _sideeffect = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(4607)
+        __webpack_require__(4101)
       );
-      const _ampcontextsharedruntime = __webpack_require__(5318);
-      const _headmanagercontextsharedruntime = __webpack_require__(7060);
-      const _ampmode = __webpack_require__(1210);
-      const _warnonce = __webpack_require__(1971);
+      const _ampcontextsharedruntime = __webpack_require__(272);
+      const _headmanagercontextsharedruntime = __webpack_require__(1790);
+      const _ampmode = __webpack_require__(1467);
+      const _warnonce = __webpack_require__(894);
       function defaultHead(inAmpMode) {
         if (inAmpMode === void 0) inAmpMode = false;
         const head = [
@@ -1126,7 +1109,7 @@
       /***/
     },
 
-    /***/ 3482: /***/ (__unused_webpack_module, exports) => {
+    /***/ 5868: /***/ (__unused_webpack_module, exports) => {
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
        */
@@ -1180,7 +1163,7 @@
       /***/
     },
 
-    /***/ 578: /***/ (
+    /***/ 6720: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1194,11 +1177,11 @@
           return ImageConfigContext;
         },
       });
-      const _interop_require_default = __webpack_require__(2952);
+      const _interop_require_default = __webpack_require__(384);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1446)
+        __webpack_require__(228)
       );
-      const _imageconfig = __webpack_require__(6678);
+      const _imageconfig = __webpack_require__(6224);
       const ImageConfigContext = _react.default.createContext(
         _imageconfig.imageConfigDefault
       );
@@ -1208,7 +1191,7 @@
       /***/
     },
 
-    /***/ 6678: /***/ (__unused_webpack_module, exports) => {
+    /***/ 6224: /***/ (__unused_webpack_module, exports) => {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -1257,7 +1240,7 @@
       /***/
     },
 
-    /***/ 1315: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2809: /***/ (__unused_webpack_module, exports) => {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -1302,7 +1285,7 @@
       /***/
     },
 
-    /***/ 7795: /***/ (
+    /***/ 9093: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1316,9 +1299,9 @@
           return RouterContext;
         },
       });
-      const _interop_require_default = __webpack_require__(2952);
+      const _interop_require_default = __webpack_require__(384);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1446)
+        __webpack_require__(228)
       );
       const RouterContext = _react.default.createContext(null);
       if (false) {
@@ -1327,7 +1310,7 @@
       /***/
     },
 
-    /***/ 4607: /***/ (
+    /***/ 4101: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1341,7 +1324,7 @@
           return SideEffect;
         },
       });
-      const _react = __webpack_require__(1446);
+      const _react = __webpack_require__(228);
       const isServer = typeof window === "undefined";
       const useClientOnlyLayoutEffect = isServer
         ? () => {}
Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js
failed to diff
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
failed to diff
Diff for app-page.runtime.prod.js

Diff too large to display

Diff for pages-turbo...time.prod.js

Diff too large to display

Diff for pages.runtime.dev.js

Diff too large to display

Diff for pages.runtime.prod.js

Diff too large to display

Diff for server.runtime.prod.js
failed to diff
Commit: da3c2e1

@mohsen1
Copy link
Contributor Author

mohsen1 commented Jan 14, 2025

The above failure is likely unrelated to my change. It's surprisingly passing on my machine so it might be flaky.

I found a bug that is likely causing this instability. This diff should make it more stable

diff --git packages/react-refresh-utils/internal/helpers.ts packages/react-refresh-utils/internal/helpers.ts
index fd26cc0599..1f7a63b6e6 100644
--- packages/react-refresh-utils/internal/helpers.ts
+++ packages/react-refresh-utils/internal/helpers.ts
@@ -63,6 +63,11 @@ function registerExportsForReactRefresh(
   moduleExports: unknown,
   moduleID: string
 ) {
+  // Skip registration if this module was already registered
+  if (RefreshRuntime.isRegisteredForRefresh(moduleID + ' %exports%')) {
+    return
+  }
+
   RefreshRuntime.register(moduleExports, moduleID + ' %exports%')
   if (moduleExports == null || typeof moduleExports !== 'object') {
     // Exit if we can't iterate over exports.

The issue appears to be in the React Refresh implementation. When we add the default export to bar.js, it becomes a React Refresh boundary (due to exporting a component). This causes the module to be initialized twice:
Once during the initial module evaluation

@mohsen1 mohsen1 force-pushed the add-dev-request-logging-ignoring branch from 48da0ca to 362b62b Compare January 14, 2025 14:37
@ijjk ijjk added the examples Issue was opened via the examples template. label Jan 14, 2025
@mohsen1 mohsen1 force-pushed the add-dev-request-logging-ignoring branch 2 times, most recently from e072846 to edc2b65 Compare January 15, 2025 06:38
@mohsen1 mohsen1 force-pushed the add-dev-request-logging-ignoring branch from 4913050 to 908a7a5 Compare January 15, 2025 06:56
@mohsen1
Copy link
Contributor Author

mohsen1 commented Jan 15, 2025

@huozhi PTAL

@ijjk ijjk added the Documentation Related to Next.js' official documentation. label Jan 17, 2025
Co-authored-by: Zack Tanner <1939140+ztanner@users.noreply.github.com>
@huozhi huozhi merged commit 1d4a024 into vercel:canary Jan 21, 2025
109 checks passed
@github-actions github-actions bot added the locked label Feb 5, 2025
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 5, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
CI approved Approve running CI for fork Documentation Related to Next.js' official documentation. examples Issue was opened via the examples template. locked tests type: next
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants