Call Error.getInitialProps for the top level error (#21240)

* fix: Call Error.getInitialProps to pass `err`

* test: Call Error.getInitialPropsfoe the top level error

* test: Update build output limit

* test: Add tests for top level error

* Revert "test: Call Error.getInitialPropsfoe the top level error"

This reverts commit 81fa0c3.

* test: Fix failing test

packages/next/client/index.tsx

@@ -521,7 +521,7 @@ function renderError(renderErrorProps: RenderErrorProps): Promise<any> {
         },
       }
       return Promise.resolve(
-        renderErrorProps.props
+        renderErrorProps.props?.err
           ? renderErrorProps.props
           : loadGetInitialProps(App, appCtx)
       ).then((initProps) =>

test/integration/render-error-on-top-level-error/with-get-initial-props/pages/_error.js

@@ -0,0 +1,11 @@
+const Error = ({ message }) => {
+  return <p id="error-p">Error Rendered with: {message}</p>
+}
+
+Error.getInitialProps = ({ err }) => {
+  return {
+    message: err && err.message,
+  }
+}
+
+export default Error

test/integration/render-error-on-top-level-error/with-get-initial-props/pages/index.js

@@ -0,0 +1,7 @@
+if (typeof window !== 'undefined') {
+  throw new Error('top level error')
+}
+
+const Page = () => 'page'
+
+export default Page

test/integration/render-error-on-top-level-error/with-get-initial-props/test/index.test.js

@@ -0,0 +1,37 @@
+/* eslint-env jest */
+
+import { nextBuild, nextServer, startApp, stopApp } from 'next-test-utils'
+import webdriver from 'next-webdriver'
+import { join } from 'path'
+
+jest.setTimeout(1000 * 60 * 2)
+
+let appPort
+let app
+let server
+
+describe('Top Level Error', () => {
+  beforeAll(async () => {
+    const appDir = join(__dirname, '../')
+    await nextBuild(appDir)
+    app = nextServer({
+      dir: appDir,
+      dev: false,
+      quiet: true,
+    })
+
+    server = await startApp(app)
+    appPort = server.address().port
+  })
+  afterAll(() => stopApp(server))
+
+  it('should render error page with getInitialProps', async () => {
+    const browser = await webdriver(appPort, '/')
+    try {
+      const text = await browser.waitForElementByCss('#error-p').text()
+      expect(text).toBe('Error Rendered with: top level error')
+    } finally {
+      await browser.close()
+    }
+  })
+})

test/integration/render-error-on-top-level-error/without-get-initial-props/pages/_error.js

@@ -0,0 +1,5 @@
+const Error = () => {
+  return <p id="error-p">Error Rendered</p>
+}
+
+export default Error

test/integration/render-error-on-top-level-error/without-get-initial-props/pages/index.js

@@ -0,0 +1,7 @@
+if (typeof window !== 'undefined') {
+  throw new Error('top level error')
+}
+
+const Page = () => 'page'
+
+export default Page

test/integration/render-error-on-top-level-error/without-get-initial-props/test/index.test.js

@@ -0,0 +1,37 @@
+/* eslint-env jest */
+
+import { nextBuild, nextServer, startApp, stopApp } from 'next-test-utils'
+import webdriver from 'next-webdriver'
+import { join } from 'path'
+
+jest.setTimeout(1000 * 60 * 2)
+
+let appPort
+let app
+let server
+
+describe('Top Level Error', () => {
+  beforeAll(async () => {
+    const appDir = join(__dirname, '../')
+    await nextBuild(appDir)
+    app = nextServer({
+      dir: appDir,
+      dev: false,
+      quiet: true,
+    })
+
+    server = await startApp(app)
+    appPort = server.address().port
+  })
+  afterAll(() => stopApp(server))
+
+  it('should render error page', async () => {
+    const browser = await webdriver(appPort, '/')
+    try {
+      const text = await browser.waitForElementByCss('#error-p').text()
+      expect(text).toBe('Error Rendered')
+    } finally {
+      await browser.close()
+    }
+  })
+})