Properly support custom 500 page in the web server (#33729)

shuding · web-flow · commit 7b524c1b97c7 · 2022-01-27T16:20:16.000Z
In the web runtime, currently we use `absolute500Path || absoluteErrorPath` to act like `/_error`. This PR fixes the behavior to use the `/pages/500.js` for 500 errors and `/pages/_error.js` for 500 fallback and other errors.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
diff --git a/packages/next/build/webpack/loaders/next-middleware-ssr-loader/index.ts b/packages/next/build/webpack/loaders/next-middleware-ssr-loader/index.ts
@@ -14,28 +14,26 @@ export default async function middlewareSSRLoader(this: any) {
     stringifiedConfig,
   } = this.getOptions()
 
-  const stringifiedAbsolutePagePath = stringifyRequest(this, absolutePagePath)
-  const stringifiedAbsoluteAppPath = stringifyRequest(this, absoluteAppPath)
-  const stringifiedAbsolute500PagePath = stringifyRequest(
-    this,
-    absolute500Path || absoluteErrorPath
-  )
-  const stringifiedAbsoluteDocumentPath = stringifyRequest(
-    this,
-    absoluteDocumentPath
-  )
+  const stringifiedPagePath = stringifyRequest(this, absolutePagePath)
+  const stringifiedAppPath = stringifyRequest(this, absoluteAppPath)
+  const stringifiedErrorPath = stringifyRequest(this, absoluteErrorPath)
+  const stringifiedDocumentPath = stringifyRequest(this, absoluteDocumentPath)
+  const stringified500Path = absolute500Path
+    ? stringifyRequest(this, absolute500Path)
+    : 'null'
 
   const transformed = `
     import { adapter } from 'next/dist/server/web/adapter'
     import { RouterContext } from 'next/dist/shared/lib/router-context'
 
-    import App from ${stringifiedAbsoluteAppPath}
-    import Document from ${stringifiedAbsoluteDocumentPath}
-
     import { getRender } from 'next/dist/build/webpack/loaders/next-middleware-ssr-loader/render'
 
-    const pageMod = require(${stringifiedAbsolutePagePath})
-    const errorMod = require(${stringifiedAbsolute500PagePath})
+    import App from ${stringifiedAppPath}
+    import Document from ${stringifiedDocumentPath}
+
+    const pageMod = require(${stringifiedPagePath})
+    const errorMod = require(${stringifiedErrorPath})
+    const error500Mod = ${stringified500Path} ? require(${stringified500Path}) : null
 
     const buildManifest = self.__BUILD_MANIFEST
     const reactLoadableManifest = self.__REACT_LOADABLE_MANIFEST
@@ -62,6 +60,7 @@ export default async function middlewareSSRLoader(this: any) {
 
       // components
       errorMod,
+      error500Mod,
 
       // renderOpts
       buildId: ${JSON.stringify(buildId)},
diff --git a/packages/next/server/web-server.ts b/packages/next/server/web-server.ts
@@ -169,8 +169,26 @@ export default class NextWebServer extends BaseServer {
       }
     }
 
+    const { errorMod, error500Mod } = (globalThis as any).__server_context
+
+    // If there is a custom 500 page.
+    if (pathname === '/500' && error500Mod) {
+      return {
+        query: {
+          ...(query || {}),
+          ...(params || {}),
+        },
+        components: {
+          ...(globalThis as any).__server_context,
+          Component: error500Mod.default,
+          getStaticProps: error500Mod.getStaticProps,
+          getServerSideProps: error500Mod.getServerSideProps,
+          getStaticPaths: error500Mod.getStaticPaths,
+        } as LoadComponentsReturnType,
+      }
+    }
+
     if (pathname === '/_error') {
-      const errorMod = (globalThis as any).__server_context.errorMod
       return {
         query: {
           ...(query || {}),
