From 42573223e8ce3c69e4eddfefe23381f6704d4bd0 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Thu, 10 Jun 2021 21:36:14 -0500 Subject: [PATCH 1/7] Update client-side default error --- errors/client-side-exception-occurred.md | 14 ++++++++++++++ packages/next/pages/_error.tsx | 19 +++++++++++++++++-- test/integration/404-page-ssg/pages/_app.js | 6 ++++-- .../404-page-ssg/test/index.test.js | 2 +- test/integration/css/test/index.test.js | 2 +- .../no-page-props/test/index.test.js | 4 ++-- .../integration/production/test/index.test.js | 4 +++- 7 files changed, 42 insertions(+), 9 deletions(-) create mode 100644 errors/client-side-exception-occurred.md diff --git a/errors/client-side-exception-occurred.md b/errors/client-side-exception-occurred.md new file mode 100644 index 0000000000000..1fab582f11126 --- /dev/null +++ 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 boundry. 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 index 1a97189842107..7a882dc4ef210 100644 --- a/packages/next/pages/_error.tsx +++ b/packages/next/pages/_error.tsx @@ -43,14 +43,29 @@ export default class Error

extends React.Component

{

- {statusCode}: {title} + {statusCode + ? `${statusCode}: ${title}` + : 'Application error: a client-side exception has occurred'}