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.

Sign up for GitHub

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

Jump to bottom

Make sure to handle rejection when prefetching pages #10579

Merged
merged 3 commits into from Feb 18, 2020
Merged

Make sure to handle rejection when prefetching pages #10579

merged 3 commits into from Feb 18, 2020

Conversation

ijjk
Copy link
Member

@ijjk ijjk commented Feb 18, 2020

Since we now do high priority loading of pages on hovering a link we need to handle the prefetch being rejected so that an unhandledrejection isn't thrown. This fixes it by adding a .catch(() => {}) on our automatic prefetch in next/link and adds a regression test to our preload-viewport suite

x-ref: #10560

@ijjk ijjk added the kind: bug Confirmed bug that is on the backlog label Feb 18, 2020
@ijjk ijjk added this to the 9.3.0 milestone Feb 18, 2020
@ijjk
Copy link
Member Author

ijjk commented Feb 18, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
buildDuration 10.2s 9.9s -325ms
nodeModulesSize 53.8 MB 53.8 MB ⚠️ +552 B
Client Bundles (main, webpack, commons)
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
main-HASH.js gzip 5.05 kB 5.05 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..abdd.js gzip 12.2 kB 12.2 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57.2 kB 57.2 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
main-HASH.module.js gzip 4.13 kB 4.13 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 9.2 kB 9.2 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 53.2 kB 53.2 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
polyfills-HASH.js gzip 20.3 kB 20.3 kB ✓
Overall change 20.3 kB 20.3 kB ✓
Client Pages Overall increase ⚠️
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
_app.js gzip 1.06 kB 1.06 kB ✓
_error.js gzip 2.98 kB 2.98 kB ✓
hooks.js gzip 664 B 664 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 1.89 kB 1.9 kB ⚠️ +7 B
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.37 kB 7.38 kB ⚠️ +7 B
Client Pages Modern Overall increase ⚠️
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
_app.module.js gzip 577 B 577 B ✓
_error.module.js gzip 2.08 kB 2.08 kB ✓
hooks.module.js gzip 370 B 370 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 1.47 kB 1.48 kB ⚠️ +5 B
routerDirect..dule.js gzip 271 B 271 B ✓
withRouter.m..dule.js gzip 270 B 270 B ✓
Overall change 5.25 kB 5.25 kB ⚠️ +5 B
Client Build Manifests
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Rendered Page Sizes
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
index.html gzip 926 B 926 B ✓
link.html gzip 933 B 933 B ✓
withRouter.html gzip 923 B 923 B ✓
Overall change 2.78 kB 2.78 kB ✓

Diffs

Diff for link.module.js 
@@ -252,9 +252,12 @@ class Link extends _react.Component {
   prefetch(options) {
     if (!this.p || false) return; // Prefetch the JSON page if asked (only in the client)
 
-    var [href, asPath] = this.getPaths();
+    var [href, asPath] = this.getPaths(); // make sure to catch here since we should handle an unhandledRejection
+    // since we're doing this automatically and we don't want to reload the
+    // page while automatically prefetching for the user and this only occurs
+    // when doing an actual navigation
 
-    _router.default.prefetch(href, asPath, options);
+    _router.default.prefetch(href, asPath, options).catch(() => {});
 
     prefetched[href] = true;
   }
Diff for link.js 
@@ -350,9 +350,13 @@ function (_react$Component) {
       var _this$getPaths = this.getPaths(),
           _this$getPaths2 = _slicedToArray(_this$getPaths, 2),
           href = _this$getPaths2[0],
-          asPath = _this$getPaths2[1];
+          asPath = _this$getPaths2[1]; // make sure to catch here since we should handle an unhandledRejection
+      // since we're doing this automatically and we don't want to reload the
+      // page while automatically prefetching for the user and this only occurs
+      // when doing an actual navigation
 
-      _router["default"].prefetch(href, asPath, options);
+
+      _router["default"].prefetch(href, asPath, options)["catch"](function () {});
 
       prefetched[href] = true;
     }
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
buildDuration 10.3s 10.5s ⚠️ +278ms
nodeModulesSize 53.8 MB 53.8 MB ⚠️ +552 B
Client Bundles (main, webpack, commons)
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
main-HASH.js gzip 5.05 kB 5.05 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..abdd.js gzip 12.2 kB 12.2 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57.2 kB 57.2 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
main-HASH.module.js gzip 4.13 kB 4.13 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 9.2 kB 9.2 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 53.2 kB 53.2 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
polyfills-HASH.js gzip 20.3 kB 20.3 kB ✓
Overall change 20.3 kB 20.3 kB ✓
Client Pages Overall increase ⚠️
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
_app.js gzip 1.06 kB 1.06 kB ✓
_error.js gzip 2.98 kB 2.98 kB ✓
hooks.js gzip 664 B 664 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 1.89 kB 1.9 kB ⚠️ +7 B
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.37 kB 7.38 kB ⚠️ +7 B
Client Pages Modern Overall increase ⚠️
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
_app.module.js gzip 577 B 577 B ✓
_error.module.js gzip 2.08 kB 2.08 kB ✓
hooks.module.js gzip 370 B 370 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 1.47 kB 1.48 kB ⚠️ +5 B
routerDirect..dule.js gzip 271 B 271 B ✓
withRouter.m..dule.js gzip 270 B 270 B ✓
Overall change 5.25 kB 5.25 kB ⚠️ +5 B
Client Build Manifests
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles Overall increase ⚠️
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
_error.js gzip 289 kB 289 kB ⚠️ +15 B
404.html gzip 1.33 kB 1.33 kB ✓
hooks.html gzip 965 B 965 B ✓
index.js gzip 289 kB 290 kB ⚠️ +800 B
link.js gzip 298 kB 297 kB -522 B
routerDirect.js gzip 298 kB 298 kB -32 B
withRouter.js gzip 296 kB 298 kB ⚠️ +1.38 kB
Overall change 1.47 MB 1.47 MB ⚠️ +1.64 kB

Commit: c5508c4

@ijjk
Copy link
Member Author

ijjk commented Feb 18, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
buildDuration 9.9s 9.8s -96ms
nodeModulesSize 53.8 MB 53.8 MB ⚠️ +605 B
Client Bundles (main, webpack, commons)
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
main-HASH.js gzip 5.05 kB 5.05 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..abdd.js gzip 12.2 kB 12.2 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57.2 kB 57.2 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
main-HASH.module.js gzip 4.13 kB 4.13 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 9.2 kB 9.2 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 53.2 kB 53.2 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
polyfills-HASH.js gzip 20.3 kB 20.3 kB ✓
Overall change 20.3 kB 20.3 kB ✓
Client Pages Overall increase ⚠️
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
_app.js gzip 1.06 kB 1.06 kB ✓
_error.js gzip 2.98 kB 2.98 kB ✓
hooks.js gzip 664 B 664 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 1.89 kB 1.9 kB ⚠️ +8 B
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.37 kB 7.38 kB ⚠️ +8 B
Client Pages Modern Overall increase ⚠️
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
_app.module.js gzip 577 B 577 B ✓
_error.module.js gzip 2.08 kB 2.08 kB ✓
hooks.module.js gzip 370 B 370 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 1.47 kB 1.48 kB ⚠️ +8 B
routerDirect..dule.js gzip 271 B 271 B ✓
withRouter.m..dule.js gzip 270 B 270 B ✓
Overall change 5.25 kB 5.26 kB ⚠️ +8 B
Client Build Manifests
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Rendered Page Sizes
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
index.html gzip 926 B 926 B ✓
link.html gzip 933 B 933 B ✓
withRouter.html gzip 923 B 923 B ✓
Overall change 2.78 kB 2.78 kB ✓

Diffs

Diff for link.js 
@@ -350,9 +350,14 @@ function (_react$Component) {
       var _this$getPaths = this.getPaths(),
           _this$getPaths2 = _slicedToArray(_this$getPaths, 2),
           href = _this$getPaths2[0],
-          asPath = _this$getPaths2[1];
+          asPath = _this$getPaths2[1]; // We need to handle a prefetch error here since we may be
+      // loading with priority which can reject but we don't
+      // want to force navigation since this is only a prefetch
 
-      _router["default"].prefetch(href, asPath, options);
+
+      _router["default"].prefetch(href, asPath, options)["catch"](function (err) {
+        if (false) {}
+      });
 
       prefetched[href] = true;
     }
Diff for link.module.js 
@@ -252,9 +252,13 @@ class Link extends _react.Component {
   prefetch(options) {
     if (!this.p || false) return; // Prefetch the JSON page if asked (only in the client)
 
-    var [href, asPath] = this.getPaths();
+    var [href, asPath] = this.getPaths(); // We need to handle a prefetch error here since we may be
+    // loading with priority which can reject but we don't
+    // want to force navigation since this is only a prefetch
 
-    _router.default.prefetch(href, asPath, options);
+    _router.default.prefetch(href, asPath, options).catch(err => {
+      if (false) {}
+    });
 
     prefetched[href] = true;
   }
Serverless Mode (Increase detected ⚠️)
General Overall increase ⚠️
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
buildDuration 10.3s 10.5s ⚠️ +163ms
nodeModulesSize 53.8 MB 53.8 MB ⚠️ +605 B
Client Bundles (main, webpack, commons)
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
main-HASH.js gzip 5.05 kB 5.05 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..abdd.js gzip 12.2 kB 12.2 kB ✓
framework.HASH.js gzip 39.1 kB 39.1 kB ✓
Overall change 57.2 kB 57.2 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
main-HASH.module.js gzip 4.13 kB 4.13 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 9.2 kB 9.2 kB ✓
framework.HA..dule.js gzip 39.1 kB 39.1 kB ✓
Overall change 53.2 kB 53.2 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
polyfills-HASH.js gzip 20.3 kB 20.3 kB ✓
Overall change 20.3 kB 20.3 kB ✓
Client Pages Overall increase ⚠️
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
_app.js gzip 1.06 kB 1.06 kB ✓
_error.js gzip 2.98 kB 2.98 kB ✓
hooks.js gzip 664 B 664 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 1.89 kB 1.9 kB ⚠️ +8 B
routerDirect.js gzip 279 B 279 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.37 kB 7.38 kB ⚠️ +8 B
Client Pages Modern Overall increase ⚠️
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
_app.module.js gzip 577 B 577 B ✓
_error.module.js gzip 2.08 kB 2.08 kB ✓
hooks.module.js gzip 370 B 370 B ✓
index.module.js gzip 212 B 212 B ✓
link.module.js gzip 1.47 kB 1.48 kB ⚠️ +8 B
routerDirect..dule.js gzip 271 B 271 B ✓
withRouter.m..dule.js gzip 270 B 270 B ✓
Overall change 5.25 kB 5.26 kB ⚠️ +8 B
Client Build Manifests
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles Overall increase ⚠️
zeit/next.js canary ijjk/next.js handle/prefetch-error Change
_error.js gzip 289 kB 290 kB ⚠️ +692 B
404.html gzip 1.33 kB 1.33 kB ✓
hooks.html gzip 965 B 965 B ✓
index.js gzip 290 kB 289 kB -710 B
link.js gzip 297 kB 298 kB ⚠️ +744 B
routerDirect.js gzip 296 kB 298 kB ⚠️ +1.69 kB
withRouter.js gzip 298 kB 298 kB ⚠️ +2 B
Overall change 1.47 MB 1.47 MB ⚠️ +2.42 kB

Commit: a5f13f2

@ijjk ijjk merged commit db04cc5 into vercel:canary Feb 18, 2020
@ijjk ijjk deleted the handle/prefetch-error branch February 18, 2020 21:28
@snyk-bot snyk-bot mentioned this pull request Apr 9, 2020
Open
@vercel vercel locked as resolved and limited conversation to collaborators Jan 31, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@timneutkens timneutkens timneutkens approved these changes

@lfades lfades Awaiting requested review from lfades

@Timer Timer Awaiting requested review from Timer

Assignees
No one assigned
Labels
kind: bug Confirmed bug that is on the backlog
Projects
None yet
Milestone
9.3.0
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@ijjk @timneutkens