Ensure stalled CSS triggers fallback navigation #24488

ijjk · 2021-04-27T01:47:23Z

This ensures when CSS requests stall that they are included in the route load timeout so that stalled CSS requests don't block us from falling back to a hard navigation. This handles a rare case noticed by @pacocoursey where a transition did not complete while attempting to load CSS assets.

Bug

Related issues linked using fixes #number
Integration tests added

ijjk · 2021-04-27T01:59:12Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
buildDuration	14.9s	14.9s	-1ms
buildDurationCached	4.8s	4.7s	-175ms
nodeModulesSize	46.6 MB	46.6 MB	⚠️ +468 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.501	2.503	0
/ avg req/sec	999.52	998.97	⚠️ -0.55
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.255	1.325	⚠️ +0.07
/error-in-render avg req/sec	1991.41	1886.41	⚠️ -105

Client Bundles (main, webpack, commons) Overall decrease ✓

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
597-HASH.js gzip	13.3 kB	13.2 kB	-96 B
778-HASH.js gzip	7.12 kB	7.12 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.7 kB	-96 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
css-HASH.js gzip	363 B	363 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
99a142a5cfae..804.css gzip	125 B	125 B	✓
Overall change	9.52 kB	9.52 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
_buildManifest.js gzip	390 B	390 B	✓
Overall change	390 B	390 B	✓

Rendered Page Sizes

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
index.html gzip	611 B	610 B	-1 B
link.html gzip	615 B	616 B	⚠️ +1 B
withRouter.html gzip	606 B	606 B	✓
Overall change	1.83 kB	1.83 kB	✓

Diffs

Diff for 597-HASH.js

@@ -500,12 +500,6 @@
     ) {
       "use strict";
 
-      var _regeneratorRuntime = __webpack_require__(7757);
-
-      var _slicedToArray = __webpack_require__(3038);
-
-      var _asyncToGenerator = __webpack_require__(8926);
-
       var _interopRequireDefault = __webpack_require__(5318);
 
       exports.__esModule = true;
@@ -776,94 +770,51 @@
           loadRoute: function loadRoute(route) {
             var _this = this;
 
-            return withFuture(
-              route,
-              routes,
-              /*#__PURE__*/ _asyncToGenerator(
-                /*#__PURE__*/ _regeneratorRuntime.mark(function _callee() {
-                  var _yield$getFilesForRou,
-                    scripts,
-                    css,
-                    _yield$Promise$all,
-                    _yield$Promise$all2,
-                    styles,
-                    entrypoint,
-                    res;
-
-                  return _regeneratorRuntime.wrap(
-                    function _callee$(_context) {
-                      while (1) {
-                        switch ((_context.prev = _context.next)) {
-                          case 0:
-                            _context.prev = 0;
-                            _context.next = 3;
-                            return getFilesForRoute(assetPrefix, route);
-
-                          case 3:
-                            _yield$getFilesForRou = _context.sent;
-                            scripts = _yield$getFilesForRou.scripts;
-                            css = _yield$getFilesForRou.css;
-                            _context.next = 8;
-                            return Promise.all([
-                              entrypoints.has(route)
-                                ? []
-                                : Promise.all(scripts.map(maybeExecuteScript)),
-                              Promise.all(css.map(fetchStyleSheet))
-                            ]);
-
-                          case 8:
-                            _yield$Promise$all = _context.sent;
-                            _yield$Promise$all2 = _slicedToArray(
-                              _yield$Promise$all,
-                              2
-                            );
-                            styles = _yield$Promise$all2[1];
-                            _context.next = 13;
-                            return resolvePromiseWithTimeout(
-                              _this.whenEntrypoint(route),
-                              MS_MAX_IDLE_DELAY,
-                              markAssetError(
-                                new Error(
-                                  "Route did not complete loading: ".concat(
-                                    route
-                                  )
-                                )
-                              )
-                            );
-
-                          case 13:
-                            entrypoint = _context.sent;
-                            res = Object.assign(
-                              {
-                                styles: styles
-                              },
-                              entrypoint
-                            );
-                            return _context.abrupt(
-                              "return",
-                              "error" in entrypoint ? entrypoint : res
-                            );
-
-                          case 18:
-                            _context.prev = 18;
-                            _context.t0 = _context["catch"](0);
-                            return _context.abrupt("return", {
-                              error: _context.t0
-                            });
-
-                          case 21:
-                          case "end":
-                            return _context.stop();
-                        }
-                      }
+            return withFuture(route, routes, function() {
+              return resolvePromiseWithTimeout(
+                getFilesForRoute(assetPrefix, route)
+                  .then(function(_ref) {
+                    var scripts = _ref.scripts,
+                      css = _ref.css;
+                    return Promise.all([
+                      entrypoints.has(route)
+                        ? []
+                        : Promise.all(scripts.map(maybeExecuteScript)),
+                      Promise.all(css.map(fetchStyleSheet))
+                    ]);
+                  })
+                  .then(function(res) {
+                    return _this
+                      .whenEntrypoint(route)
+                      .then(function(entrypoint) {
+                        return {
+                          entrypoint: entrypoint,
+                          styles: res[1]
+                        };
+                      });
+                  }),
+                MS_MAX_IDLE_DELAY,
+                markAssetError(
+                  new Error("Route did not complete loading: ".concat(route))
+                )
+              )
+                .then(function(_ref2) {
+                  var entrypoint = _ref2.entrypoint,
+                    styles = _ref2.styles;
+                  var res = Object.assign(
+                    {
+                      styles: styles
                     },
-                    _callee,
-                    null,
-                    [[0, 18]]
+                    entrypoint
                   );
+                  return "error" in entrypoint ? entrypoint : res;
                 })
-              )
-            );
+                ["catch"](function(err) {
+                  return {
+                    error: err
+                  };
+                });
+            });
           },
           prefetch: function prefetch(route) {
             var _this2 = this;

Diff for index.html

@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-ed1890aadeae3a71879e.js"
+      href="/_next/static/chunks/webpack-92877ce082310350cc22.js"
       as="script"
     />
     <link
@@ -17,7 +17,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/597-c155dff4a57343f91259.js"
+      href="/_next/static/chunks/597-6e56554ba0aabf710362.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-ed1890aadeae3a71879e.js"
+      src="/_next/static/chunks/webpack-92877ce082310350cc22.js"
       async=""
     ></script>
     <script
@@ -66,7 +66,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/597-c155dff4a57343f91259.js"
+      src="/_next/static/chunks/597-6e56554ba0aabf710362.js"
       async=""
     ></script>
     <script

Diff for link.html

@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-ed1890aadeae3a71879e.js"
+      href="/_next/static/chunks/webpack-92877ce082310350cc22.js"
       as="script"
     />
     <link
@@ -17,7 +17,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/597-c155dff4a57343f91259.js"
+      href="/_next/static/chunks/597-6e56554ba0aabf710362.js"
       as="script"
     />
     <link
@@ -63,7 +63,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-ed1890aadeae3a71879e.js"
+      src="/_next/static/chunks/webpack-92877ce082310350cc22.js"
       async=""
     ></script>
     <script
@@ -71,7 +71,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/597-c155dff4a57343f91259.js"
+      src="/_next/static/chunks/597-6e56554ba0aabf710362.js"
       async=""
     ></script>
     <script

Diff for withRouter.html

@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-ed1890aadeae3a71879e.js"
+      href="/_next/static/chunks/webpack-92877ce082310350cc22.js"
       as="script"
     />
     <link
@@ -17,7 +17,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/597-c155dff4a57343f91259.js"
+      href="/_next/static/chunks/597-6e56554ba0aabf710362.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-ed1890aadeae3a71879e.js"
+      src="/_next/static/chunks/webpack-92877ce082310350cc22.js"
       async=""
     ></script>
     <script
@@ -66,7 +66,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/597-c155dff4a57343f91259.js"
+      src="/_next/static/chunks/597-6e56554ba0aabf710362.js"
       async=""
     ></script>
     <script

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
buildDuration	18.4s	18.3s	-73ms
buildDurationCached	7s	6.9s	-96ms
nodeModulesSize	46.6 MB	46.6 MB	⚠️ +468 B

Client Bundles (main, webpack, commons) Overall decrease ✓

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
597-HASH.js gzip	13.3 kB	13.2 kB	-96 B
778-HASH.js gzip	7.12 kB	7.12 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.7 kB	-96 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
css-HASH.js gzip	363 B	363 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
99a142a5cfae..804.css gzip	125 B	125 B	✓
Overall change	9.52 kB	9.52 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
_buildManifest.js gzip	390 B	390 B	✓
Overall change	390 B	390 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
_error.js	1.39 MB	1.39 MB	✓
404.html	2.76 kB	2.76 kB	✓
500.html	2.75 kB	2.75 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.96 kB	1.96 kB	✓
css.html	2.13 kB	2.13 kB	✓
hooks.html	2.01 kB	2.01 kB	✓
index.js	1.39 MB	1.39 MB	✓
link.js	1.45 MB	1.45 MB	⚠️ +138 B
routerDirect.js	1.44 MB	1.44 MB	⚠️ +138 B
withRouter.js	1.44 MB	1.44 MB	⚠️ +138 B
Overall change	7.14 MB	7.14 MB	⚠️ +414 B

Webpack 4 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
buildDuration	12.4s	12.4s	⚠️ +11ms
buildDurationCached	5.2s	5.2s	-69ms
nodeModulesSize	46.6 MB	46.6 MB	⚠️ +468 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.482	2.503	⚠️ +0.02
/ avg req/sec	1007.35	998.88	⚠️ -8.47
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.286	1.335	⚠️ +0.05
/error-in-render avg req/sec	1944.71	1873.35	⚠️ -71.36

Client Bundles (main, webpack, commons) Overall decrease ✓

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
677f882d2ed8..HASH.js gzip	13.4 kB	13.3 kB	-98 B
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.19 kB	7.19 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.3 kB	60.2 kB	-98 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
_app-HASH.js gzip	1.28 kB	1.28 kB	✓
_error-HASH.js gzip	3.71 kB	3.71 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
css-HASH.js gzip	339 B	339 B	✓
hooks-HASH.js gzip	887 B	887 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.65 kB	1.65 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
21c68fa65a48..217.css gzip	125 B	125 B	✓
Overall change	9.36 kB	9.36 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
_buildManifest.js gzip	419 B	419 B	✓
Overall change	419 B	419 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
index.html gzip	612 B	611 B	-1 B
link.html gzip	619 B	619 B	✓
withRouter.html gzip	606 B	605 B	-1 B
Overall change	1.84 kB	1.83 kB	-2 B

Diffs

Diff for 677f882d2ed8..c4df.HASH.js

@@ -465,12 +465,6 @@
     /***/ Nh2W: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
-      var _regeneratorRuntime = __webpack_require__("o0o1");
-
-      var _slicedToArray = __webpack_require__("J4zp");
-
-      var _asyncToGenerator = __webpack_require__("yXPU");
-
       var _interopRequireDefault = __webpack_require__("TqRt");
 
       exports.__esModule = true;
@@ -741,94 +735,51 @@
           loadRoute: function loadRoute(route) {
             var _this = this;
 
-            return withFuture(
-              route,
-              routes,
-              /*#__PURE__*/ _asyncToGenerator(
-                /*#__PURE__*/ _regeneratorRuntime.mark(function _callee() {
-                  var _yield$getFilesForRou,
-                    scripts,
-                    css,
-                    _yield$Promise$all,
-                    _yield$Promise$all2,
-                    styles,
-                    entrypoint,
-                    res;
-
-                  return _regeneratorRuntime.wrap(
-                    function _callee$(_context) {
-                      while (1) {
-                        switch ((_context.prev = _context.next)) {
-                          case 0:
-                            _context.prev = 0;
-                            _context.next = 3;
-                            return getFilesForRoute(assetPrefix, route);
-
-                          case 3:
-                            _yield$getFilesForRou = _context.sent;
-                            scripts = _yield$getFilesForRou.scripts;
-                            css = _yield$getFilesForRou.css;
-                            _context.next = 8;
-                            return Promise.all([
-                              entrypoints.has(route)
-                                ? []
-                                : Promise.all(scripts.map(maybeExecuteScript)),
-                              Promise.all(css.map(fetchStyleSheet))
-                            ]);
-
-                          case 8:
-                            _yield$Promise$all = _context.sent;
-                            _yield$Promise$all2 = _slicedToArray(
-                              _yield$Promise$all,
-                              2
-                            );
-                            styles = _yield$Promise$all2[1];
-                            _context.next = 13;
-                            return resolvePromiseWithTimeout(
-                              _this.whenEntrypoint(route),
-                              MS_MAX_IDLE_DELAY,
-                              markAssetError(
-                                new Error(
-                                  "Route did not complete loading: ".concat(
-                                    route
-                                  )
-                                )
-                              )
-                            );
-
-                          case 13:
-                            entrypoint = _context.sent;
-                            res = Object.assign(
-                              {
-                                styles: styles
-                              },
-                              entrypoint
-                            );
-                            return _context.abrupt(
-                              "return",
-                              "error" in entrypoint ? entrypoint : res
-                            );
-
-                          case 18:
-                            _context.prev = 18;
-                            _context.t0 = _context["catch"](0);
-                            return _context.abrupt("return", {
-                              error: _context.t0
-                            });
-
-                          case 21:
-                          case "end":
-                            return _context.stop();
-                        }
-                      }
+            return withFuture(route, routes, function() {
+              return resolvePromiseWithTimeout(
+                getFilesForRoute(assetPrefix, route)
+                  .then(function(_ref) {
+                    var scripts = _ref.scripts,
+                      css = _ref.css;
+                    return Promise.all([
+                      entrypoints.has(route)
+                        ? []
+                        : Promise.all(scripts.map(maybeExecuteScript)),
+                      Promise.all(css.map(fetchStyleSheet))
+                    ]);
+                  })
+                  .then(function(res) {
+                    return _this
+                      .whenEntrypoint(route)
+                      .then(function(entrypoint) {
+                        return {
+                          entrypoint: entrypoint,
+                          styles: res[1]
+                        };
+                      });
+                  }),
+                MS_MAX_IDLE_DELAY,
+                markAssetError(
+                  new Error("Route did not complete loading: ".concat(route))
+                )
+              )
+                .then(function(_ref2) {
+                  var entrypoint = _ref2.entrypoint,
+                    styles = _ref2.styles;
+                  var res = Object.assign(
+                    {
+                      styles: styles
                     },
-                    _callee,
-                    null,
-                    [[0, 18]]
+                    entrypoint
                   );
+                  return "error" in entrypoint ? entrypoint : res;
                 })
-              )
-            );
+                ["catch"](function(err) {
+                  return {
+                    error: err
+                  };
+                });
+            });
           },
           prefetch: function prefetch(route) {
             var _this2 = this;

Diff for index.html

@@ -17,7 +17,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.127ad5cf3a03e6dbd20b.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.ed64d2bc4eb56e916ab7.js"
       as="script"
     />
     <link
@@ -61,7 +61,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.127ad5cf3a03e6dbd20b.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.ed64d2bc4eb56e916ab7.js"
       async=""
     ></script>
     <script

Diff for link.html

@@ -17,7 +17,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.127ad5cf3a03e6dbd20b.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.ed64d2bc4eb56e916ab7.js"
       as="script"
     />
     <link
@@ -66,7 +66,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.127ad5cf3a03e6dbd20b.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.ed64d2bc4eb56e916ab7.js"
       async=""
     ></script>
     <script

Diff for withRouter.html

@@ -17,7 +17,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.127ad5cf3a03e6dbd20b.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.ed64d2bc4eb56e916ab7.js"
       as="script"
     />
     <link
@@ -61,7 +61,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.127ad5cf3a03e6dbd20b.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.ed64d2bc4eb56e916ab7.js"
       async=""
     ></script>
     <script

Commit: d1de035

ijjk · 2021-04-27T03:14:08Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
buildDuration	16.7s	16.4s	-286ms
buildDurationCached	5.4s	5.2s	-165ms
nodeModulesSize	46.6 MB	46.6 MB	⚠️ +900 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.972	2.946	-0.03
/ avg req/sec	841.05	848.68	+7.63
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.761	1.816	⚠️ +0.06
/error-in-render avg req/sec	1419.83	1376.51	⚠️ -43.32

Client Bundles (main, webpack, commons) Overall decrease ✓

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
597-HASH.js gzip	13.3 kB	13.2 kB	-86 B
778-HASH.js gzip	7.12 kB	7.12 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.7 kB	-86 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
css-HASH.js gzip	363 B	363 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
99a142a5cfae..804.css gzip	125 B	125 B	✓
Overall change	9.52 kB	9.52 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
_buildManifest.js gzip	390 B	390 B	✓
Overall change	390 B	390 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
index.html gzip	611 B	610 B	-1 B
link.html gzip	615 B	616 B	⚠️ +1 B
withRouter.html gzip	606 B	605 B	-1 B
Overall change	1.83 kB	1.83 kB	-1 B

Diffs

Diff for 597-HASH.js

@@ -500,12 +500,6 @@
     ) {
       "use strict";
 
-      var _regeneratorRuntime = __webpack_require__(7757);
-
-      var _slicedToArray = __webpack_require__(3038);
-
-      var _asyncToGenerator = __webpack_require__(8926);
-
       var _interopRequireDefault = __webpack_require__(5318);
 
       exports.__esModule = true;
@@ -773,97 +767,59 @@
                 if (old && "resolve" in old) old.resolve(input);
               });
           },
-          loadRoute: function loadRoute(route) {
+          loadRoute: function loadRoute(route, prefetch) {
             var _this = this;
 
-            return withFuture(
-              route,
-              routes,
-              /*#__PURE__*/ _asyncToGenerator(
-                /*#__PURE__*/ _regeneratorRuntime.mark(function _callee() {
-                  var _yield$getFilesForRou,
-                    scripts,
-                    css,
-                    _yield$Promise$all,
-                    _yield$Promise$all2,
-                    styles,
-                    entrypoint,
-                    res;
-
-                  return _regeneratorRuntime.wrap(
-                    function _callee$(_context) {
-                      while (1) {
-                        switch ((_context.prev = _context.next)) {
-                          case 0:
-                            _context.prev = 0;
-                            _context.next = 3;
-                            return getFilesForRoute(assetPrefix, route);
-
-                          case 3:
-                            _yield$getFilesForRou = _context.sent;
-                            scripts = _yield$getFilesForRou.scripts;
-                            css = _yield$getFilesForRou.css;
-                            _context.next = 8;
-                            return Promise.all([
-                              entrypoints.has(route)
-                                ? []
-                                : Promise.all(scripts.map(maybeExecuteScript)),
-                              Promise.all(css.map(fetchStyleSheet))
-                            ]);
-
-                          case 8:
-                            _yield$Promise$all = _context.sent;
-                            _yield$Promise$all2 = _slicedToArray(
-                              _yield$Promise$all,
-                              2
-                            );
-                            styles = _yield$Promise$all2[1];
-                            _context.next = 13;
-                            return resolvePromiseWithTimeout(
-                              _this.whenEntrypoint(route),
-                              MS_MAX_IDLE_DELAY,
-                              markAssetError(
-                                new Error(
-                                  "Route did not complete loading: ".concat(
-                                    route
-                                  )
-                                )
-                              )
-                            );
-
-                          case 13:
-                            entrypoint = _context.sent;
-                            res = Object.assign(
-                              {
-                                styles: styles
-                              },
-                              entrypoint
-                            );
-                            return _context.abrupt(
-                              "return",
-                              "error" in entrypoint ? entrypoint : res
-                            );
-
-                          case 18:
-                            _context.prev = 18;
-                            _context.t0 = _context["catch"](0);
-                            return _context.abrupt("return", {
-                              error: _context.t0
-                            });
-
-                          case 21:
-                          case "end":
-                            return _context.stop();
-                        }
-                      }
+            return withFuture(route, routes, function() {
+              return resolvePromiseWithTimeout(
+                getFilesForRoute(assetPrefix, route)
+                  .then(function(_ref) {
+                    var scripts = _ref.scripts,
+                      css = _ref.css;
+                    return Promise.all([
+                      entrypoints.has(route)
+                        ? []
+                        : Promise.all(scripts.map(maybeExecuteScript)),
+                      Promise.all(css.map(fetchStyleSheet))
+                    ]);
+                  })
+                  .then(function(res) {
+                    return _this
+                      .whenEntrypoint(route)
+                      .then(function(entrypoint) {
+                        return {
+                          entrypoint: entrypoint,
+                          styles: res[1]
+                        };
+                      });
+                  }),
+                MS_MAX_IDLE_DELAY,
+                markAssetError(
+                  new Error("Route did not complete loading: ".concat(route))
+                )
+              )
+                .then(function(_ref2) {
+                  var entrypoint = _ref2.entrypoint,
+                    styles = _ref2.styles;
+                  var res = Object.assign(
+                    {
+                      styles: styles
                     },
-                    _callee,
-                    null,
-                    [[0, 18]]
+                    entrypoint
                   );
+                  return "error" in entrypoint ? entrypoint : res;
                 })
-              )
-            );
+                ["catch"](function(err) {
+                  if (prefetch) {
+                    // we don't want to cache errors during prefetch
+                    throw err;
+                  }
+
+                  return {
+                    error: err
+                  };
+                });
+            });
           },
           prefetch: function prefetch(route) {
             var _this2 = this;
@@ -890,7 +846,7 @@
               })
               .then(function() {
                 (0, _requestIdleCallback.requestIdleCallback)(function() {
-                  return _this2.loadRoute(route);
+                  return _this2.loadRoute(route, true)["catch"](function() {});
                 });
               })
               ["catch"](

Diff for index.html

@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-ed1890aadeae3a71879e.js"
+      href="/_next/static/chunks/webpack-08b6c0674e9dc892df80.js"
       as="script"
     />
     <link
@@ -17,7 +17,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/597-c155dff4a57343f91259.js"
+      href="/_next/static/chunks/597-ae440a7286b9272ad989.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-ed1890aadeae3a71879e.js"
+      src="/_next/static/chunks/webpack-08b6c0674e9dc892df80.js"
       async=""
     ></script>
     <script
@@ -66,7 +66,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/597-c155dff4a57343f91259.js"
+      src="/_next/static/chunks/597-ae440a7286b9272ad989.js"
       async=""
     ></script>
     <script

Diff for link.html

@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-ed1890aadeae3a71879e.js"
+      href="/_next/static/chunks/webpack-08b6c0674e9dc892df80.js"
       as="script"
     />
     <link
@@ -17,7 +17,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/597-c155dff4a57343f91259.js"
+      href="/_next/static/chunks/597-ae440a7286b9272ad989.js"
       as="script"
     />
     <link
@@ -63,7 +63,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-ed1890aadeae3a71879e.js"
+      src="/_next/static/chunks/webpack-08b6c0674e9dc892df80.js"
       async=""
     ></script>
     <script
@@ -71,7 +71,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/597-c155dff4a57343f91259.js"
+      src="/_next/static/chunks/597-ae440a7286b9272ad989.js"
       async=""
     ></script>
     <script

Diff for withRouter.html

@@ -7,7 +7,7 @@
     <noscript data-n-css=""></noscript>
     <link
       rel="preload"
-      href="/_next/static/chunks/webpack-ed1890aadeae3a71879e.js"
+      href="/_next/static/chunks/webpack-08b6c0674e9dc892df80.js"
       as="script"
     />
     <link
@@ -17,7 +17,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/597-c155dff4a57343f91259.js"
+      href="/_next/static/chunks/597-ae440a7286b9272ad989.js"
       as="script"
     />
     <link
@@ -58,7 +58,7 @@
       src="/_next/static/chunks/polyfills-8683bd742a84c1edd48c.js"
     ></script>
     <script
-      src="/_next/static/chunks/webpack-ed1890aadeae3a71879e.js"
+      src="/_next/static/chunks/webpack-08b6c0674e9dc892df80.js"
       async=""
     ></script>
     <script
@@ -66,7 +66,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/597-c155dff4a57343f91259.js"
+      src="/_next/static/chunks/597-ae440a7286b9272ad989.js"
       async=""
     ></script>
     <script

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
buildDuration	20.6s	20.2s	-414ms
buildDurationCached	7.5s	7.5s	⚠️ +43ms
nodeModulesSize	46.6 MB	46.6 MB	⚠️ +900 B

Client Bundles (main, webpack, commons) Overall decrease ✓

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
597-HASH.js gzip	13.3 kB	13.2 kB	-86 B
778-HASH.js gzip	7.12 kB	7.12 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.7 kB	-86 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
css-HASH.js gzip	363 B	363 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
99a142a5cfae..804.css gzip	125 B	125 B	✓
Overall change	9.52 kB	9.52 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
_buildManifest.js gzip	390 B	390 B	✓
Overall change	390 B	390 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
_error.js	1.39 MB	1.39 MB	✓
404.html	2.76 kB	2.76 kB	✓
500.html	2.75 kB	2.75 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.96 kB	1.96 kB	✓
css.html	2.13 kB	2.13 kB	✓
hooks.html	2.01 kB	2.01 kB	✓
index.js	1.39 MB	1.39 MB	⚠️ +2 B
link.js	1.45 MB	1.45 MB	⚠️ +293 B
routerDirect.js	1.44 MB	1.44 MB	⚠️ +293 B
withRouter.js	1.44 MB	1.44 MB	⚠️ +291 B
Overall change	7.14 MB	7.14 MB	⚠️ +879 B

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
buildDuration	13.6s	13.6s	⚠️ +64ms
buildDurationCached	5.9s	5.9s	⚠️ +59ms
nodeModulesSize	46.6 MB	46.6 MB	⚠️ +900 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.924	2.903	-0.02
/ avg req/sec	855.04	861.3	+6.26
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.774	1.753	-0.02
/error-in-render avg req/sec	1409.61	1425.8	+16.19

Client Bundles (main, webpack, commons) Overall decrease ✓

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
677f882d2ed8..HASH.js gzip	13.4 kB	13.3 kB	-86 B
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.19 kB	7.19 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.3 kB	60.2 kB	-86 B

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
_app-HASH.js gzip	1.28 kB	1.28 kB	✓
_error-HASH.js gzip	3.71 kB	3.71 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
css-HASH.js gzip	339 B	339 B	✓
hooks-HASH.js gzip	887 B	887 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.65 kB	1.65 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
21c68fa65a48..217.css gzip	125 B	125 B	✓
Overall change	9.36 kB	9.36 kB	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
_buildManifest.js gzip	419 B	419 B	✓
Overall change	419 B	419 B	✓

Rendered Page Sizes Overall decrease ✓

	vercel/next.js canary	ijjk/next.js fix/no-css-timout	Change
index.html gzip	612 B	611 B	-1 B
link.html gzip	619 B	619 B	✓
withRouter.html gzip	606 B	605 B	-1 B
Overall change	1.84 kB	1.83 kB	-2 B

Diffs

Diff for 677f882d2ed8..c4df.HASH.js

@@ -465,12 +465,6 @@
     /***/ Nh2W: /***/ function(module, exports, __webpack_require__) {
       "use strict";
 
-      var _regeneratorRuntime = __webpack_require__("o0o1");
-
-      var _slicedToArray = __webpack_require__("J4zp");
-
-      var _asyncToGenerator = __webpack_require__("yXPU");
-
       var _interopRequireDefault = __webpack_require__("TqRt");
 
       exports.__esModule = true;
@@ -738,97 +732,59 @@
                 if (old && "resolve" in old) old.resolve(input);
               });
           },
-          loadRoute: function loadRoute(route) {
+          loadRoute: function loadRoute(route, prefetch) {
             var _this = this;
 
-            return withFuture(
-              route,
-              routes,
-              /*#__PURE__*/ _asyncToGenerator(
-                /*#__PURE__*/ _regeneratorRuntime.mark(function _callee() {
-                  var _yield$getFilesForRou,
-                    scripts,
-                    css,
-                    _yield$Promise$all,
-                    _yield$Promise$all2,
-                    styles,
-                    entrypoint,
-                    res;
-
-                  return _regeneratorRuntime.wrap(
-                    function _callee$(_context) {
-                      while (1) {
-                        switch ((_context.prev = _context.next)) {
-                          case 0:
-                            _context.prev = 0;
-                            _context.next = 3;
-                            return getFilesForRoute(assetPrefix, route);
-
-                          case 3:
-                            _yield$getFilesForRou = _context.sent;
-                            scripts = _yield$getFilesForRou.scripts;
-                            css = _yield$getFilesForRou.css;
-                            _context.next = 8;
-                            return Promise.all([
-                              entrypoints.has(route)
-                                ? []
-                                : Promise.all(scripts.map(maybeExecuteScript)),
-                              Promise.all(css.map(fetchStyleSheet))
-                            ]);
-
-                          case 8:
-                            _yield$Promise$all = _context.sent;
-                            _yield$Promise$all2 = _slicedToArray(
-                              _yield$Promise$all,
-                              2
-                            );
-                            styles = _yield$Promise$all2[1];
-                            _context.next = 13;
-                            return resolvePromiseWithTimeout(
-                              _this.whenEntrypoint(route),
-                              MS_MAX_IDLE_DELAY,
-                              markAssetError(
-                                new Error(
-                                  "Route did not complete loading: ".concat(
-                                    route
-                                  )
-                                )
-                              )
-                            );
-
-                          case 13:
-                            entrypoint = _context.sent;
-                            res = Object.assign(
-                              {
-                                styles: styles
-                              },
-                              entrypoint
-                            );
-                            return _context.abrupt(
-                              "return",
-                              "error" in entrypoint ? entrypoint : res
-                            );
-
-                          case 18:
-                            _context.prev = 18;
-                            _context.t0 = _context["catch"](0);
-                            return _context.abrupt("return", {
-                              error: _context.t0
-                            });
-
-                          case 21:
-                          case "end":
-                            return _context.stop();
-                        }
-                      }
+            return withFuture(route, routes, function() {
+              return resolvePromiseWithTimeout(
+                getFilesForRoute(assetPrefix, route)
+                  .then(function(_ref) {
+                    var scripts = _ref.scripts,
+                      css = _ref.css;
+                    return Promise.all([
+                      entrypoints.has(route)
+                        ? []
+                        : Promise.all(scripts.map(maybeExecuteScript)),
+                      Promise.all(css.map(fetchStyleSheet))
+                    ]);
+                  })
+                  .then(function(res) {
+                    return _this
+                      .whenEntrypoint(route)
+                      .then(function(entrypoint) {
+                        return {
+                          entrypoint: entrypoint,
+                          styles: res[1]
+                        };
+                      });
+                  }),
+                MS_MAX_IDLE_DELAY,
+                markAssetError(
+                  new Error("Route did not complete loading: ".concat(route))
+                )
+              )
+                .then(function(_ref2) {
+                  var entrypoint = _ref2.entrypoint,
+                    styles = _ref2.styles;
+                  var res = Object.assign(
+                    {
+                      styles: styles
                     },
-                    _callee,
-                    null,
-                    [[0, 18]]
+                    entrypoint
                   );
+                  return "error" in entrypoint ? entrypoint : res;
                 })
-              )
-            );
+                ["catch"](function(err) {
+                  if (prefetch) {
+                    // we don't want to cache errors during prefetch
+                    throw err;
+                  }
+
+                  return {
+                    error: err
+                  };
+                });
+            });
           },
           prefetch: function prefetch(route) {
             var _this2 = this;
@@ -855,7 +811,7 @@
               })
               .then(function() {
                 (0, _requestIdleCallback.requestIdleCallback)(function() {
-                  return _this2.loadRoute(route);
+                  return _this2.loadRoute(route, true)["catch"](function() {});
                 });
               })
               ["catch"](

Diff for index.html

@@ -17,7 +17,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.127ad5cf3a03e6dbd20b.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.93bc6152317c318ec255.js"
       as="script"
     />
     <link
@@ -61,7 +61,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.127ad5cf3a03e6dbd20b.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.93bc6152317c318ec255.js"
       async=""
     ></script>
     <script

Diff for link.html

@@ -17,7 +17,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.127ad5cf3a03e6dbd20b.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.93bc6152317c318ec255.js"
       as="script"
     />
     <link
@@ -66,7 +66,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.127ad5cf3a03e6dbd20b.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.93bc6152317c318ec255.js"
       async=""
     ></script>
     <script

Diff for withRouter.html

@@ -17,7 +17,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.127ad5cf3a03e6dbd20b.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.93bc6152317c318ec255.js"
       as="script"
     />
     <link
@@ -61,7 +61,7 @@
       async=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.127ad5cf3a03e6dbd20b.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.93bc6152317c318ec255.js"
       async=""
     ></script>
     <script

Commit: 1a6cd90

Ensure stalled CSS times out

d1de035

ijjk added the type: next label Apr 27, 2021

This comment has been minimized.

Sign in to view

ijjk added 2 commits April 26, 2021 21:04

Update test

2525246

prevent caching prefetch error

1a6cd90

ijjk marked this pull request as ready for review April 27, 2021 03:39

ijjk requested review from divmain, lfades, shuding and timneutkens as code owners April 27, 2021 03:39

shuding approved these changes Apr 27, 2021

View reviewed changes

kodiakhq bot merged commit efa58ef into vercel:canary Apr 27, 2021

ijjk deleted the fix/no-css-timout branch April 27, 2021 11:02

sync-by-unito bot mentioned this pull request May 18, 2021

chore(deps): bump next from 10.0.7 to 10.2.0 filecoin-project/slate#736

Closed

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ensure stalled CSS triggers fallback navigation #24488

Ensure stalled CSS triggers fallback navigation #24488

ijjk commented Apr 27, 2021

ijjk commented Apr 27, 2021

Diffs

Diffs

This comment has been minimized.

ijjk commented Apr 27, 2021

Diffs

Diffs

Ensure stalled CSS triggers fallback navigation #24488

Ensure stalled CSS triggers fallback navigation #24488

Conversation

ijjk commented Apr 27, 2021

Bug

ijjk commented Apr 27, 2021

Stats from current PR

Diffs

Diffs

This comment has been minimized.

ijjk commented Apr 27, 2021

Stats from current PR

Diffs

Diffs