Add experimental flag for chunk failure handling during app navigation

[ijjk]

This ensures when we encounter chunk load errors or uncaught rejections/exceptions during a client transition in app router that we properly fallback to a hard navigation which allows us to recover instead of staying in a bad state.

Currently when a chunk fails to load it in most cases hits the error boundary and that will be rendered (one bad state), another case that can occur is the chunk fails to load while react-server-dom-webpack is handling the stream and it crashes and the error boundary isn't even triggered (second bad state). Both of which aren't recovered until the user manually navigates.

This is currently behind a flag to allow testing/validating.

Closes: NDX-75

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js ijjk/app-chunk-fail	Change
buildDuration	18.8s	14.9s	N/A
buildDurationCached	9.5s	7.4s	N/A
nodeModulesSize	365 MB	366 MB	⚠️ +78 kB
nextStartRea..uration (ms)	429ms	432ms	N/A

Client Bundles (main, webpack) Overall increase ⚠️

	vercel/next.js canary	vercel/next.js ijjk/app-chunk-fail	Change
1780.HASH.js gzip	167 B	167 B	✓
5453-HASH.js gzip	37.2 kB	37.3 kB	⚠️ +135 B
7514-HASH.js gzip	5.06 kB	5.05 kB	N/A
a7a62840-HASH.js gzip	51.7 kB	51.7 kB	N/A
framework-HASH.js gzip	56.7 kB	56.7 kB	N/A
main-app-HASH.js gzip	224 B	226 B	N/A
main-HASH.js gzip	32 kB	32 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	✓
Overall change	39.1 kB	39.2 kB	⚠️ +135 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js ijjk/app-chunk-fail	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js ijjk/app-chunk-fail	Change
_app-HASH.js gzip	193 B	193 B	✓
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	508 B	510 B	N/A
css-HASH.js gzip	341 B	341 B	✓
dynamic-HASH.js gzip	2.52 kB	2.52 kB	✓
edge-ssr-HASH.js gzip	264 B	266 B	N/A
head-HASH.js gzip	362 B	363 B	N/A
hooks-HASH.js gzip	391 B	390 B	N/A
image-HASH.js gzip	4.26 kB	4.26 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.69 kB	2.69 kB	N/A
routerDirect..HASH.js gzip	326 B	325 B	N/A
script-HASH.js gzip	396 B	397 B	N/A
withRouter-HASH.js gzip	322 B	321 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	3.62 kB	3.62 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js ijjk/app-chunk-fail	Change
_buildManifest.js gzip	747 B	748 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js ijjk/app-chunk-fail	Change
index.html gzip	520 B	524 B	N/A
link.html gzip	536 B	538 B	N/A
withRouter.html gzip	518 B	520 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js ijjk/app-chunk-fail	Change
edge-ssr.js gzip	127 kB	127 kB	N/A
page.js gzip	167 kB	167 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js ijjk/app-chunk-fail	Change
middleware-b..fest.js gzip	670 B	671 B	N/A
middleware-r..fest.js gzip	156 B	155 B	N/A
middleware.js gzip	29.7 kB	29.7 kB	N/A
edge-runtime..pack.js gzip	1.03 kB	1.03 kB	✓
Overall change	1.03 kB	1.03 kB	✓

Next Runtimes Overall increase ⚠️

	vercel/next.js canary	vercel/next.js ijjk/app-chunk-fail	Change
928-experime...dev.js gzip	310 B	310 B	✓
928.runtime.dev.js gzip	301 B	301 B	✓
app-page-exp...dev.js gzip	232 kB	232 kB	⚠️ +147 B
app-page-exp..prod.js gzip	119 kB	119 kB	⚠️ +115 B
app-page-tur..prod.js gzip	130 kB	131 kB	⚠️ +118 B
app-page-tur..prod.js gzip	126 kB	126 kB	⚠️ +112 B
app-page.run...dev.js gzip	227 kB	227 kB	⚠️ +125 B
app-page.run..prod.js gzip	115 kB	115 kB	⚠️ +125 B
app-route-ex...dev.js gzip	23.4 kB	23.4 kB	✓
app-route-ex..prod.js gzip	18.7 kB	18.7 kB	✓
app-route-tu..prod.js gzip	18.7 kB	18.7 kB	✓
app-route-tu..prod.js gzip	18.5 kB	18.5 kB	✓
app-route.ru...dev.js gzip	24.7 kB	24.7 kB	✓
app-route.ru..prod.js gzip	18.5 kB	18.5 kB	✓
pages-api-tu..prod.js gzip	9.6 kB	9.6 kB	✓
pages-api.ru...dev.js gzip	9.87 kB	9.87 kB	✓
pages-api.ru..prod.js gzip	9.59 kB	9.59 kB	✓
pages-turbo...prod.js gzip	21.6 kB	21.6 kB	✓
pages.runtim...dev.js gzip	22.1 kB	22.1 kB	✓
pages.runtim..prod.js gzip	21.6 kB	21.6 kB	✓
server.runti..prod.js gzip	56.7 kB	56.7 kB	✓
Overall change	1.22 MB	1.22 MB	⚠️ +742 B

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js ijjk/app-chunk-fail	Change
0.pack gzip	1.41 MB	1.42 MB	⚠️ +5.91 kB
index.pack gzip	119 kB	120 kB	⚠️ +579 B
Overall change	1.53 MB	1.54 MB	⚠️ +6.49 kB

Diff details

Diff for page.js

Diff too large to display

Diff for middleware.js

Diff too large to display

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([
   [8358],
   {
-    /***/ 1362: /***/ (
+    /***/ 9618: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(2160);
+          return __webpack_require__(699);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 537: /***/ (module, exports, __webpack_require__) => {
+    /***/ 9451: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,15 +40,15 @@
         __webpack_require__(3537)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(7092)
+        __webpack_require__(6490)
       );
-      const _getimgprops = __webpack_require__(9834);
-      const _imageconfig = __webpack_require__(5676);
-      const _imageconfigcontextsharedruntime = __webpack_require__(387);
-      const _warnonce = __webpack_require__(451);
-      const _routercontextsharedruntime = __webpack_require__(5357);
+      const _getimgprops = __webpack_require__(3646);
+      const _imageconfig = __webpack_require__(535);
+      const _imageconfigcontextsharedruntime = __webpack_require__(4724);
+      const _warnonce = __webpack_require__(6321);
+      const _routercontextsharedruntime = __webpack_require__(1759);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(3945)
+        __webpack_require__(1882)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -376,7 +376,7 @@
       /***/
     },
 
-    /***/ 9834: /***/ (
+    /***/ 3646: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -392,9 +392,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(451);
-      const _imageblursvg = __webpack_require__(3547);
-      const _imageconfig = __webpack_require__(5676);
+      const _warnonce = __webpack_require__(6321);
+      const _imageblursvg = __webpack_require__(8297);
+      const _imageconfig = __webpack_require__(535);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -766,7 +766,7 @@
       /***/
     },
 
-    /***/ 3547: /***/ (__unused_webpack_module, exports) => {
+    /***/ 8297: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -821,7 +821,7 @@
       /***/
     },
 
-    /***/ 6850: /***/ (
+    /***/ 973: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -848,10 +848,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(4345);
-      const _getimgprops = __webpack_require__(9834);
-      const _imagecomponent = __webpack_require__(537);
+      const _getimgprops = __webpack_require__(3646);
+      const _imagecomponent = __webpack_require__(9451);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(3945)
+        __webpack_require__(1882)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -883,7 +883,7 @@
       /***/
     },
 
-    /***/ 3945: /***/ (__unused_webpack_module, exports) => {
+    /***/ 1882: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -918,7 +918,7 @@
       /***/
     },
 
-    /***/ 2160: /***/ (
+    /***/ 699: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -935,8 +935,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@19.0.0-rc-6230622a1a-20240610/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(898);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-6230622a1a-20240610__zehaskxadtwcczqqbmt6koh6bq/node_modules/next/image.js
-      var next_image = __webpack_require__(6793);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/next@file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-rc-6230622a1a-20240610__uulzbengwsfwhwaa2ambxampcy/node_modules/next/image.js
+      var next_image = __webpack_require__(1428);
       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",
@@ -966,12 +966,12 @@
       /***/
     },
 
-    /***/ 6793: /***/ (
+    /***/ 1428: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(6850);
+      module.exports = __webpack_require__(973);
 
       /***/
     },
@@ -981,7 +981,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(1362)
+      __webpack_exec__(9618)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 5453-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

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

Commit: 6a6c6e1