Development
Write some stuff here. Heading 1 should be highlighted yellow and underlined.
When an error occurs in development, the following happens:
- The Next.js development server detects the error while rendering the requested page.
- The development server captures the error and generates an error page with a stack trace and error message.
- The error page is displayed in the browser, overlaying the actual content of the application.
The error page displayed in the browser is known as an overlay. The overlay will only appear when the server is run via pnpm dev, npm run dev, or yarn dev.
Several features of the overlay include:
- You can click on the stack trace to jump directly to the corresponding line of code in your code editor, making it easier to find and fix the error.
- Hot module replacement (HMR) is often enabled during development. This means in most cases, refreshing the entire page to see changes in the code. Instead, Next.js attempts to preserve the application's state while applying code changes incrementally.
The overlay is automatically removed when the bug is fixed.
Server
When an error occurs while processing a server-side operation, by default Next.js will provide a custom error page. The server error page displays a generic error message and the 500 status code. The error message can be customized by creating a pages/500.js file.
We have the option to create our own custom error pages to handle specific error scenarios. We can customize the error message and UI based on the error type, for example 404.js for a 404 Not Found error or 500.js for a generic server error.
Client
When an error occurs within a component's
render method or in any of its child components' lifecycle methods, the error propagates up the component tree until it's caught by an error boundary. Error boundaries are React components that use the componentDidCatch lifecycle method to capture errors within their children.Error boundaries are a feature in React that allow you to handle errors during the rendering of components. They act as a safety net to catch and handle unexpected errors, preventing the entire application from crashing and providing a way to display a fallback UI or error message to users.
Instead of displaying a blank or broken page, error boundaries let a developer inform users that something went wrong and offer options to recover from the error.
You can define multiple error boundaries at different levels in the component tree to handle errors in different sections of the app. Once an error is caught by an error boundary, the
setState method can display a fallback UI or an error message.Error boundaries are particularly useful in production to prevent the entire application from crashing when an unexpected error occurs.
To configure an error boundary in a React application, we can do the following:
- Create a new component to act as the error boundary. Create a class component that extends React.Component and implements the componentDidCatch lifecycle method.
- Wrap ErrorBoundary Around Components: Wrap the parts of the app that should be covered by the error boundary with the ErrorBoundary component.
In the example, the ExampleComp and its child components will be covered by the error boundary provided by ErrorBoundary.
Copyright © 2021 Code 4 Tomorrow. All rights reserved.
The code in this course is licensed under the MIT License.
If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact classes@code4tomorrow.org for inquiries.