Do not assign to readonly property in Safari (#16051)

packages/next/client/page-loader.js

 import mitt from '../next-server/lib/mitt'
+import { addBasePath, markLoadingError } from '../next-server/lib/router/router'
+import escapePathDelimiters from '../next-server/lib/router/utils/escape-path-delimiters'
+import getAssetPathFromRoute from './../next-server/lib/router/utils/get-asset-path-from-route'
 import { isDynamicRoute } from './../next-server/lib/router/utils/is-dynamic'
+import { parseRelativeUrl } from './../next-server/lib/router/utils/parse-relative-url'
+import { searchParamsToUrlQuery } from './../next-server/lib/router/utils/querystring'
 import { getRouteMatcher } from './../next-server/lib/router/utils/route-matcher'
 import { getRouteRegex } from './../next-server/lib/router/utils/route-regex'
-import { searchParamsToUrlQuery } from './../next-server/lib/router/utils/querystring'
-import { parseRelativeUrl } from './../next-server/lib/router/utils/parse-relative-url'
-import escapePathDelimiters from '../next-server/lib/router/utils/escape-path-delimiters'
-import getAssetPathFromRoute from './../next-server/lib/router/utils/get-asset-path-from-route'
-import { addBasePath } from '../next-server/lib/router/router'
 
 function hasRel(rel, link) {
   try {
@@ -16,9 +16,7 @@ function hasRel(rel, link) {
 }
 
 function pageLoadError(route) {
-  const error = new Error(`Error loading ${route}`)
-  error.code = 'PAGE_LOAD_ERROR'
-  return error
+  return markLoadingError(new Error(`Error loading ${route}`))
 }
 
 const relPrefetch =

packages/next/next-server/lib/router/router.ts

@@ -98,6 +98,11 @@ export function resolveHref(currentPath: string, href: Url): string {
   }
 }
 
+const PAGE_LOAD_ERROR = Symbol('PAGE_LOAD_ERROR')
+export function markLoadingError(err: Error): Error {
+  return Object.defineProperty(err, PAGE_LOAD_ERROR, {})
+}
+
 function prepareUrlAs(router: NextRouter, url: Url, as: Url) {
   // If url and as provided as an object representation,
   // we'll format them into the string version here.
@@ -205,7 +210,7 @@ function fetchNextData(dataHref: string, isServerRender: boolean) {
     // on a client-side transition. Otherwise, we'd get into an infinite
     // loop.
     if (!isServerRender) {
-      ;(err as any).code = 'PAGE_LOAD_ERROR'
+      markLoadingError(err)
     }
     throw err
   })
@@ -641,7 +646,7 @@ export default class Router implements BaseRouter {
       throw err
     }
 
-    if (err.code === 'PAGE_LOAD_ERROR' || loadErrorFail) {
+    if (PAGE_LOAD_ERROR in err || loadErrorFail) {
       Router.events.emit('routeChangeError', err, as)
 
       // If we can't load the page it could be one of following reasons

test/integration/production/next.config.js

@@ -10,6 +10,16 @@ module.exports = {
         destination: '/:lang/about',
         permanent: false,
       },
+      {
+        source: '/nonexistent',
+        destination: '/about',
+        permanent: false,
+      },
+      {
+        source: '/shadowed-page',
+        destination: '/about',
+        permanent: false,
+      },
     ]
   },
 }

test/integration/production/pages/shadowed-page.js

+export function getServerSideProps() {
+  throw new Error('oops!')
+}
+
+export default function ShadowedPage() {
+  return <div id="shadowed-page">Not routable!</div>
+}

test/integration/production/pages/to-nonexistent.js

+import Link from 'next/link'
+
+export default function ToNonexistent() {
+  return (
+    <div id="blackhole-page">
+      <Link href="/nonexistent">
+        <a id="to-nonexistent-page">Nonexistent Page</a>
+      </Link>
+    </div>
+  )
+}

test/integration/production/pages/to-shadowed-page.js

+import Link from 'next/link'
+
+export default function ToShadowed() {
+  return (
+    <div id="shadowed-page-gateway">
+      <Link href="/shadowed-page">
+        <a id="to-shadowed-page">Shadowed Page</a>
+      </Link>
+    </div>
+  )
+}

test/integration/production/test/index.test.js

@@ -373,6 +373,31 @@ describe('Production Usage', () => {
       expect(title).toBe('hello from title')
       expect(url).toBe('/with-title')
     })
+
+    it('should reload page successfully (on bad link)', async () => {
+      const browser = await webdriver(appPort, '/to-nonexistent')
+      await browser.eval(function setup() {
+        window.__DATA_BE_GONE = 'true'
+      })
+      await browser.waitForElementByCss('#to-nonexistent-page')
+      await browser.click('#to-nonexistent-page')
+      await browser.waitForElementByCss('.about-page')
+
+      const oldData = await browser.eval(`window.__DATA_BE_GONE`)
+      expect(oldData).toBeFalsy()
+    })
+
+    it('should reload page successfully (on bad data fetch)', async () => {
+      const browser = await webdriver(appPort, '/to-shadowed-page')
+      await browser.eval(function setup() {
+        window.__DATA_BE_GONE = 'true'
+      })
+      await browser.waitForElementByCss('#to-shadowed-page').click()
+      await browser.waitForElementByCss('.about-page')
+
+      const oldData = await browser.eval(`window.__DATA_BE_GONE`)
+      expect(oldData).toBeFalsy()
+    })
   })
 
   it('should navigate to external site and back', async () => {