Make sure to handle rejection when prefetching pages

packages/next/client/link.tsx

@@ -209,7 +209,11 @@ class Link extends Component<LinkProps> {
     if (!this.p || typeof window === 'undefined') return
     // Prefetch the JSON page if asked (only in the client)
     const [href, asPath] = this.getPaths()
-    Router.prefetch(href, asPath, options)
+    // 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.prefetch(href, asPath, options).catch(() => {})
     prefetched[href] = true
   }
 

test/integration/preload-viewport/pages/invalid-prefetch.js

@@ -0,0 +1,9 @@
+import Link from 'next/link'
+
+export default () => (
+  <>
+    <Link href="/something-invalid-oops">
+      <a id="invalid-link">I'm broken...</a>
+    </Link>
+  </>
+)

test/integration/preload-viewport/test/index.test.js

@@ -163,6 +163,21 @@ describe('Prefetching Links in viewport', () => {
     }
   })
 
+  it('should not have unhandledRejection when failing to prefetch on link', async () => {
+    const browser = await webdriver(appPort, '/')
+    await browser.eval(`(function() {
+      window.addEventListener('unhandledrejection', function (err) {
+        window.hadUnhandledReject = true;
+      })
+      window.next.router.push('/invalid-prefetch');
+    })()`)
+
+    expect(await browser.eval('window.hadUnhandledReject')).toBeFalsy()
+
+    await browser.elementByCss('#invalid-link').moveTo()
+    expect(await browser.eval('window.hadUnhandledReject')).toBeFalsy()
+  })
+
   it('should not prefetch when prefetch is explicitly set to false', async () => {
     const browser = await webdriver(appPort, '/opt-out')