add hostname to default error boundary message

packages/next/src/client/components/error-boundary.tsx

@@ -155,11 +155,10 @@ export function GlobalError({ error }: { error: any }) {
         <div style={styles.error}>
           <div>
             <h2 style={styles.text}>
-              {`Application error: a ${
-                digest ? 'server' : 'client'
-              }-side exception has occurred (see the ${
-                digest ? 'server logs' : 'browser console'
-              } for more information).`}
+              Application error: a {digest ? 'server' : 'client'}-side exception
+              has occurred while loading {window.location.hostname} (see the{' '}
+              {digest ? 'server logs' : 'browser console'} for more
+              information).
             </h2>
             {digest ? <p style={styles.text}>{`Digest: ${digest}`}</p> : null}
           </div>

packages/next/src/pages/_error.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Head from '../shared/lib/head'
 import type { NextPageContext } from '../shared/lib/utils'
+import { getRequestMeta } from '../server/request-meta'
 
 const statusCodes: { [code: number]: string } = {
   400: 'Bad Request',
@@ -11,17 +12,32 @@ const statusCodes: { [code: number]: string } = {
 
 export type ErrorProps = {
   statusCode: number
+  hostname?: string
   title?: string
   withDarkMode?: boolean
 }
 
 function _getInitialProps({
+  req,
   res,
   err,
 }: NextPageContext): Promise<ErrorProps> | ErrorProps {
   const statusCode =
     res && res.statusCode ? res.statusCode : err ? err.statusCode! : 404
-  return { statusCode }
+
+  let hostname
+
+  if (typeof window !== 'undefined') {
+    hostname = window.location.hostname
+  } else if (req) {
+    const initUrl = getRequestMeta(req, 'initURL')
+    if (initUrl) {
+      const url = new URL(initUrl)
+      hostname = url.hostname
+    }
+  }
+
+  return { statusCode, hostname }
 }
 
 const styles: Record<string, React.CSSProperties> = {
@@ -121,8 +137,11 @@ export default class Error<P = {}> extends React.Component<P & ErrorProps> {
                 title
               ) : (
                 <>
-                  Application error: a client-side exception has occurred (see
-                  the browser console for more information)
+                  Application error: a client-side exception has occurred{' '}
+                  {Boolean(this.props.hostname) && (
+                    <>while loading {this.props.hostname}</>
+                  )}{' '}
+                  (see the browser console for more information)
                 </>
               )}
               .

test/development/app-dir/serialize-circular-error/serialize-circular-error.test.ts

@@ -35,7 +35,7 @@ describe('serialize-circular-error', () => {
 
     const bodyText = await browser.elementByCss('body').text()
     expect(bodyText).toContain(
-      'Application error: a client-side exception has occurred (see the browser console for more information).'
+      'Application error: a client-side exception has occurred while loading localhost (see the browser console for more information).'
     )
 
     const output = next.cliOutput

test/e2e/app-dir/errors/index.test.ts

@@ -153,7 +153,7 @@ describe('app-dir - errors', () => {
         expect(
           await browser.waitForElementByCss('body').elementByCss('h2').text()
         ).toBe(
-          'Application error: a client-side exception has occurred (see the browser console for more information).'
+          'Application error: a client-side exception has occurred while loading localhost (see the browser console for more information).'
         )
       }
     })
@@ -168,7 +168,7 @@ describe('app-dir - errors', () => {
         expect(
           await browser.waitForElementByCss('body').elementByCss('h2').text()
         ).toBe(
-          'Application error: a server-side exception has occurred (see the server logs for more information).'
+          'Application error: a server-side exception has occurred while loading localhost (see the server logs for more information).'
         )
         expect(
           await browser.waitForElementByCss('body').elementByCss('p').text()

test/integration/css/test/css-rendering.test.js

@@ -274,7 +274,7 @@ module.exports = {
               await browser.waitForElementByCss('#link-other').click()
               await check(
                 () => browser.eval(`document.body.innerText`),
-                'Application error: a client-side exception has occurred (see the browser console for more information).',
+                'Application error: a client-side exception has occurred while loading localhost (see the browser console for more information).',
                 true
               )
 

test/production/next-link-legacybehavior-ref-merging/index.test.ts

@@ -19,7 +19,7 @@ describe('Link with legacyBehavior - handles buggy userspace ref merging', () =>
     // shouldn't cause a crash
     expect(await browser.elementByCss('h1').text()).toEqual('Home')
     expect(await browser.elementByCss('body').text()).not.toContain(
-      'Application error: a client-side exception has occurred (see the browser console for more information).'
+      'Application error: a client-side exception has occurred'
     )
   })
 })