vercel · timneutkens · Jun 11, 2021 · Jun 11, 2021 · Jun 11, 2021 · Jun 11, 2021
diff --git a/errors/client-side-exception-occurred.md b/errors/client-side-exception-occurred.md
@@ -0,0 +1,14 @@
+# Client-side Exception Occurred
+
+#### Why This Error Occurred
+
+In your production application a client-side error occurred that was not caught by an error boundary. Additional information should be visible in the console tab of your browser.
+
+#### Possible Ways to Fix It
+
+Add error boundaries in your react tree to gracefully handle client-side errors and render a fallback view when they occur.
+
+### Useful Links
+
+- [Error Boundaries Documentation](https://reactjs.org/docs/error-boundaries.html)
+- [Custom Error Page Documentation](https://nextjs.org/docs/advanced-features/custom-error-page#more-advanced-error-page-customizing)
diff --git a/packages/next/pages/_error.tsx b/packages/next/pages/_error.tsx
@@ -43,14 +43,29 @@ export default class Error<P = {}> extends React.Component<P & ErrorProps> {
       <div style={styles.error}>
         <Head>
           <title>
-            {statusCode}: {title}
+            {statusCode
+              ? `${statusCode}: ${title}`
+              : 'Application error: a client-side exception has occurred'}
           </title>
         </Head>
         <div>
           <style dangerouslySetInnerHTML={{ __html: 'body { margin: 0 }' }} />
           {statusCode ? <h1 style={styles.h1}>{statusCode}</h1> : null}
           <div style={styles.desc}>
-            <h2 style={styles.h2}>{title}.</h2>
+            <h2 style={styles.h2}>
+              {this.props.title || statusCode ? (
+                title
+              ) : (
+                <>
+                  Application error: a client-side exception has occurred (
+                  <a href="https://nextjs.org/docs/messages/client-side-exception-occurred">
+                    read more
+                  </a>
+                  )
+                </>
+              )}
+              .
+            </h2>
           </div>
         </div>
       </div>

diff --git a/test/integration/404-page-ssg/pages/_app.js b/test/integration/404-page-ssg/pages/_app.js
@@ -1,11 +1,13 @@
 const App = ({ Component, pageProps }) => <Component {...pageProps} />
 
 App.getInitialProps = async ({ Component, ctx }) => {
+  let pageProps = {}
+
   if (Component.getInitialProps) {
-    await Component.getInitialProps(ctx)
+    pageProps = await Component.getInitialProps(ctx)
   }
   return {
-    pageProps: {},
+    pageProps,
   }
 }
 

diff --git a/test/integration/404-page-ssg/test/index.test.js b/test/integration/404-page-ssg/test/index.test.js
@@ -34,7 +34,7 @@ const runTests = (isDev) => {
 
   it('should render error correctly', async () => {
     const text = await renderViaHTTP(appPort, '/err')
-    expect(text).toContain(isDev ? 'oops' : 'An unexpected error has occurred')
+    expect(text).toContain(isDev ? 'oops' : 'Internal Server Error')
   })
 
   it('should not show an error in the logs for 404 SSG', async () => {

diff --git a/test/integration/build-output/test/index.test.js b/test/integration/build-output/test/index.test.js
@@ -126,10 +126,10 @@ describe('Build Output', () => {
           expect(parseFloat(indexFirstLoad)).toBeCloseTo(gz ? 64 : 196, 1)
           expect(indexFirstLoad.endsWith('kB')).toBe(true)
 
-          expect(parseFloat(err404Size)).toBeCloseTo(gz ? 3.06 : 8.15, 1)
+          expect(parseFloat(err404Size)).toBeCloseTo(gz ? 3.17 : 8.51, 1)
           expect(err404Size.endsWith('kB')).toBe(true)
 
-          expect(parseFloat(err404FirstLoad)).toBeCloseTo(gz ? 66.8 : 204, 1)
+          expect(parseFloat(err404FirstLoad)).toBeCloseTo(gz ? 66.9 : 205, 1)
           expect(err404FirstLoad.endsWith('kB')).toBe(true)
 
           expect(parseFloat(sharedByAll)).toBeCloseTo(gz ? 63.7 : 196, 1)

diff --git a/test/integration/css/test/index.test.js b/test/integration/css/test/index.test.js
@@ -1509,7 +1509,7 @@ describe('CSS Support', () => {
           await browser.waitForElementByCss('#link-other').click()
           await check(
             () => browser.eval(`document.body.innerText`),
-            'An unexpected error has occurred.',
+            'Application error: a client-side exception has occurred (read more).',
             true
           )
 

diff --git a/test/integration/no-page-props/test/index.test.js b/test/integration/no-page-props/test/index.test.js
@@ -39,7 +39,7 @@ const runTests = () => {
   it('should load 404 page correctly', async () => {
     const browser = await webdriver(appPort, '/non-existent')
     expect(await browser.elementByCss('h2').text()).toBe(
-      'An unexpected error has occurred.'
+      'Application error: a client-side exception has occurred (read more).'
     )
     expect(await browser.eval('window.uncaughtErrors')).toEqual([])
   })
@@ -74,7 +74,7 @@ const runTests = () => {
     await browser.waitForElementByCss('h2')
     expect(await browser.eval('window.beforeNav')).toBe(null)
     expect(await browser.elementByCss('h2').text()).toBe(
-      'An unexpected error has occurred.'
+      'Application error: a client-side exception has occurred (read more).'
     )
     expect(await browser.eval('window.uncaughtErrors')).toEqual([])
   })

diff --git a/test/integration/production/test/index.test.js b/test/integration/production/test/index.test.js
@@ -530,7 +530,9 @@ describe('Production Usage', () => {
       const browser = await webdriver(appPort, '/error-in-browser-render')
       await waitFor(2000)
       const text = await browser.elementByCss('body').text()
-      expect(text).toMatch(/An unexpected error has occurred\./)
+      expect(text).toMatch(
+        /Application error: a client-side exception has occurred/
+      )
       await browser.close()
     })