Update client-side default error #25997

ijjk · 2021-06-11T02:38:50Z

This tweaks the default text when a client-side error occurs to clarify the error is in fact occurring on the client and also links to an error document that we can expand on tips for debugging/catching these types of errors.

Preview of new error

Bug

Related issues linked using fixes #number
Integration tests added

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.

Documentation / Examples

Make sure the linting passes

errors/client-side-exception-occurred.md

packages/next/pages/_error.tsx

ijjk · 2021-06-11T09:15:25Z

Failing test suites

Commit: 6276177

test/integration/no-page-props/test/index.test.js

Error no pageProps > dev mode > should load 404 page correctly
Error no pageProps > dev mode > should navigate between pages correctly
Error no pageProps > production mode > should load 404 page correctly
Error no pageProps > production mode > should navigate between pages correctly

Expand output

● Error no pageProps › dev mode › should load 404 page correctly

expect(received).toBe(expected) // Object.is equality

Expected: "Application error: a client-side exception has occurred (read more)."
Received: "Application error: a client-side exception has occurred (developer guidance)."

  39 |   it('should load 404 page correctly', async () => {
  40 |     const browser = await webdriver(appPort, '/non-existent')
> 41 |     expect(await browser.elementByCss('h2').text()).toBe(
     |                                                     ^
  42 |       'Application error: a client-side exception has occurred (read more).'
  43 |     )
  44 |     expect(await browser.eval('window.uncaughtErrors')).toEqual([])

  at Object.<anonymous> (integration/no-page-props/test/index.test.js:41:53)

● Error no pageProps › dev mode › should navigate between pages correctly

expect(received).toBe(expected) // Object.is equality

Expected: "Application error: a client-side exception has occurred (read more)."
Received: "Application error: a client-side exception has occurred (developer guidance)."

  74 |     await browser.waitForElementByCss('h2')
  75 |     expect(await browser.eval('window.beforeNav')).toBe(null)
> 76 |     expect(await browser.elementByCss('h2').text()).toBe(
     |                                                     ^
  77 |       'Application error: a client-side exception has occurred (read more).'
  78 |     )
  79 |     expect(await browser.eval('window.uncaughtErrors')).toEqual([])

  at Object.<anonymous> (integration/no-page-props/test/index.test.js:76:53)

● Error no pageProps › production mode › should load 404 page correctly

expect(received).toBe(expected) // Object.is equality

Expected: "Application error: a client-side exception has occurred (read more)."
Received: "Application error: a client-side exception has occurred (developer guidance)."

  39 |   it('should load 404 page correctly', async () => {
  40 |     const browser = await webdriver(appPort, '/non-existent')
> 41 |     expect(await browser.elementByCss('h2').text()).toBe(
     |                                                     ^
  42 |       'Application error: a client-side exception has occurred (read more).'
  43 |     )
  44 |     expect(await browser.eval('window.uncaughtErrors')).toEqual([])

  at Object.<anonymous> (integration/no-page-props/test/index.test.js:41:53)

● Error no pageProps › production mode › should navigate between pages correctly

expect(received).toBe(expected) // Object.is equality

Expected: "Application error: a client-side exception has occurred (read more)."
Received: "Application error: a client-side exception has occurred (developer guidance)."

  74 |     await browser.waitForElementByCss('h2')
  75 |     expect(await browser.eval('window.beforeNav')).toBe(null)
> 76 |     expect(await browser.elementByCss('h2').text()).toBe(
     |                                                     ^
  77 |       'Application error: a client-side exception has occurred (read more).'
  78 |     )
  79 |     expect(await browser.eval('window.uncaughtErrors')).toEqual([])

  at Object.<anonymous> (integration/no-page-props/test/index.test.js:76:53)

test/integration/basic/test/index.test.js

Basic Features > should polyfill Node.js modules

Expand output

● Basic Features › should polyfill Node.js modules

thrown: "Exceeded timeout of 300000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  35 |   afterAll(() => killApp(context.server))
  36 |
> 37 |   it('should polyfill Node.js modules', async () => {
     |   ^
  38 |     const browser = await webdriver(context.appPort, '/node-browser-polyfills')
  39 |
  40 |     console.error({

  at integration/basic/test/index.test.js:37:3
  at Object.<anonymous> (integration/basic/test/index.test.js:18:1)

test/integration/css/test/index.test.js

test/integration/no-page-props/test/index.test.js

ijjk · 2021-06-11T10:03:09Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js update/client-error	Change
buildDuration	11s	11s	-58ms
buildDurationCached	2.7s	2.7s	✓
nodeModulesSize	46.5 MB	46.5 MB	⚠️ +1.04 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	ijjk/next.js update/client-error	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.241	2.242	0
/ avg req/sec	1115.73	1115.03	⚠️ -0.7
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.118	1.132	⚠️ +0.01
/error-in-render avg req/sec	2236.92	2207.58	⚠️ -29.34

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ijjk/next.js update/client-error	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js update/client-error	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js update/client-error	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.18 kB	⚠️ +114 B
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.43 kB	⚠️ +114 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js update/client-error	Change
_buildManifest.js gzip	392 B	395 B	⚠️ +3 B
Overall change	392 B	395 B	⚠️ +3 B

Rendered Page Sizes

	vercel/next.js canary	ijjk/next.js update/client-error	Change
index.html gzip	573 B	573 B	✓
link.html gzip	580 B	580 B	✓
withRouter.html gzip	568 B	568 B	✓
Overall change	1.72 kB	1.72 kB	✓

Diffs

Diff for _buildManifest.js

@@ -2,7 +2,7 @@ self.__BUILD_MANIFEST = {
   __rewrites: { beforeFiles: [], afterFiles: [], fallback: [] },
   "/": ["static\u002Fchunks\u002Fpages\u002Findex-96d821e908dd023681e4.js"],
   "/_error": [
-    "static\u002Fchunks\u002Fpages\u002F_error-93cb8d6a3e74cf2fe4b2.js"
+    "static\u002Fchunks\u002Fpages\u002F_error-d72f3a5cb613472cc608.js"
   ],
   "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-7f1c918feab47667356f.js"],
   "/css": [

Diff for _error-HASH.js

@@ -739,9 +739,9 @@ Also adds support for deduplicated `key` properties
                   /*#__PURE__*/ _react["default"].createElement(
                     "title",
                     null,
-                    statusCode,
-                    ": ",
-                    title
+                    statusCode
+                      ? "".concat(statusCode, ": ").concat(title)
+                      : "Application error: a client-side exception has occurred"
                   )
                 ),
                 /*#__PURE__*/ _react["default"].createElement(
@@ -771,7 +771,22 @@ Also adds support for deduplicated `key` properties
                       {
                         style: styles.h2
                       },
-                      title,
+                      this.props.title || statusCode
+                        ? title
+                        : /*#__PURE__*/ _react["default"].createElement(
+                            _react["default"].Fragment,
+                            null,
+                            "Application error: a client-side exception has occurred (",
+                            /*#__PURE__*/ _react["default"].createElement(
+                              "a",
+                              {
+                                href:
+                                  "https://nextjs.org/docs/messages/client-side-exception-occurred"
+                              },
+                              "developer guidance"
+                            ),
+                            ")"
+                          ),
                       "."
                     )
                   )

Serverless Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js update/client-error	Change
buildDuration	12.5s	12.5s	-30ms
buildDurationCached	3.6s	3.6s	-18ms
nodeModulesSize	46.5 MB	46.5 MB	⚠️ +1.04 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ijjk/next.js update/client-error	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js update/client-error	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js update/client-error	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.18 kB	⚠️ +114 B
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.43 kB	⚠️ +114 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js update/client-error	Change
_buildManifest.js gzip	392 B	395 B	⚠️ +3 B
Overall change	392 B	395 B	⚠️ +3 B

Serverless bundles Overall decrease ✓

	vercel/next.js canary	ijjk/next.js update/client-error	Change
_error.js	16.9 kB	16.9 kB	✓
404.html	2.44 kB	2.44 kB	✓
500.html	2.43 kB	2.43 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.63 kB	1.63 kB	✓
css.html	1.81 kB	1.81 kB	✓
hooks.html	1.69 kB	1.69 kB	✓
index.js	17.2 kB	17.2 kB	✓
link.js	17.4 kB	17.4 kB	-2 B
routerDirect.js	17.4 kB	17.4 kB	✓
withRouter.js	17.4 kB	17.4 kB	-2 B
Overall change	107 kB	107 kB	-4 B

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js update/client-error	Change
buildDuration	9.7s	9.7s	-12ms
buildDurationCached	4s	3.9s	-93ms
nodeModulesSize	46.5 MB	46.5 MB	⚠️ +1.04 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	ijjk/next.js update/client-error	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.232	2.222	-0.01
/ avg req/sec	1119.88	1125.21	+5.33
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.116	1.111	-0.01
/error-in-render avg req/sec	2240.56	2250.57	+10.01

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ijjk/next.js update/client-error	Change
677f882d2ed8..HASH.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.99 kB	7.99 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	61.1 kB	61.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js update/client-error	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js update/client-error	Change
_app-HASH.js gzip	1.07 kB	1.07 kB	✓
_error-HASH.js gzip	3.74 kB	3.85 kB	⚠️ +116 B
amp-HASH.js gzip	536 B	536 B	✓
css-HASH.js gzip	339 B	339 B	✓
hooks-HASH.js gzip	887 B	887 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.63 kB	1.63 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	9.17 kB	9.28 kB	⚠️ +116 B

Client Build Manifests

	vercel/next.js canary	ijjk/next.js update/client-error	Change
_buildManifest.js gzip	420 B	420 B	✓
Overall change	420 B	420 B	✓

Rendered Page Sizes

	vercel/next.js canary	ijjk/next.js update/client-error	Change
index.html gzip	627 B	627 B	✓
link.html gzip	633 B	633 B	✓
withRouter.html gzip	620 B	620 B	✓
Overall change	1.88 kB	1.88 kB	✓

Diffs

Diff for _buildManifest.js

@@ -2,7 +2,7 @@ self.__BUILD_MANIFEST = {
   __rewrites: { beforeFiles: [], afterFiles: [], fallback: [] },
   "/": ["static\u002Fchunks\u002Fpages\u002Findex-b460df3d63326fbb06a1.js"],
   "/_error": [
-    "static\u002Fchunks\u002Fpages\u002F_error-51845a36fe9902c725c2.js"
+    "static\u002Fchunks\u002Fpages\u002F_error-f045b37d58937af1709b.js"
   ],
   "/amp": ["static\u002Fchunks\u002Fpages\u002Famp-27f75ad11120c5cdedd1.js"],
   "/css": [

Diff for _error-HASH.js

@@ -147,9 +147,9 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                   /*#__PURE__*/ _react["default"].createElement(
                     "title",
                     null,
-                    statusCode,
-                    ": ",
-                    title
+                    statusCode
+                      ? "".concat(statusCode, ": ").concat(title)
+                      : "Application error: a client-side exception has occurred"
                   )
                 ),
                 /*#__PURE__*/ _react["default"].createElement(
@@ -179,7 +179,22 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                       {
                         style: styles.h2
                       },
-                      title,
+                      this.props.title || statusCode
+                        ? title
+                        : /*#__PURE__*/ _react["default"].createElement(
+                            _react["default"].Fragment,
+                            null,
+                            "Application error: a client-side exception has occurred (",
+                            /*#__PURE__*/ _react["default"].createElement(
+                              "a",
+                              {
+                                href:
+                                  "https://nextjs.org/docs/messages/client-side-exception-occurred"
+                              },
+                              "developer guidance"
+                            ),
+                            ")"
+                          ),
                       "."
                     )
                   )

Commit: e872417

Co-authored-by: Tim Neutkens <tim@timneutkens.nl>

ijjk added 2 commits June 10, 2021 21:36

Update client-side default error

4257322

Merge remote-tracking branch 'upstream/canary' into update/client-error

da3cccf

ijjk requested review from divmain, lfades, shuding and timneutkens as code owners June 11, 2021 02:38

ijjk added type: documentation type: next labels Jun 11, 2021

This comment has been minimized.

Sign in to view

ijjk added 2 commits June 10, 2021 21:56

Merge remote-tracking branch 'upstream/canary' into update/client-error

42ac6d4

update build-output test

b9087b8

This comment has been minimized.

Sign in to view

update test

dec4f2f

This comment has been minimized.

Sign in to view