Error handling with error.tsx in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the error.tsx file in Next.js?

The error.tsx file is used to create a custom error page that handles unexpected errors in your Next.js app, showing friendly messages instead of default error screens.

beginner

How do you trigger an error to be caught by error.tsx in Next.js?

You can throw an error inside your components or server functions. Next.js will catch it and render the error.tsx page automatically.

intermediate

Which React hook is commonly used inside error.tsx to log error details?

The useEffect hook is often used to log or handle side effects when an error occurs, but Next.js passes error info as props to error.tsx for display.

beginner

What is a good user experience practice when designing an error page in error.tsx?

Show a clear message explaining something went wrong, provide a way to go back or reload, and keep the design consistent with the rest of your app.

intermediate

Can error.tsx handle both client-side and server-side errors in Next.js?

Yes, error.tsx handles errors from both client and server, providing a unified way to show error messages across your app.

What file name does Next.js use by default for custom error pages?

A app-error.tsx

B 404.tsx

C custom-error.tsx

D error.tsx

Next.js uses error.tsx as the default file for custom error pages.

How does Next.js know to show your custom error page?

A When you call a special Next.js API

B When you import <code>error.tsx</code> manually

C When an error is thrown in your app

D When you refresh the page

Next.js automatically shows the custom error page when an error is thrown anywhere in your app.

Which of these is NOT a good practice for error pages?

A Display raw error stack to users

B Show a friendly message

C Provide navigation options

D Keep design consistent with app

Showing raw error stacks can confuse users and expose sensitive info; better to show friendly messages.

Can error.tsx receive error details as props?

A Yes, Next.js passes error info as props

B No, it only shows static content

C Only if you use a special hook

D Only on client side

Next.js passes error details as props to error.tsx so you can display or log them.

What happens if you don't create an error.tsx file?

A App crashes without message

B Next.js shows a default error page

C Errors are ignored

D App reloads automatically

Without error.tsx, Next.js shows its default error page.

Explain how Next.js uses error.tsx to handle errors in your app.

Think about what happens when your app crashes.

Describe best practices for designing a user-friendly error page in error.tsx.

Imagine you are helping a friend who sees an error.