Error handling with error.tsx in NextJS - Step-by-Step Execution

Concept Flow - Error handling with error.tsx

App runs normally

↓

Error occurs in component

↓

Next.js detects error

↓

Render error.tsx component

↓

Show user friendly error UI

↓

User can retry or navigate away

When an error happens in the app, Next.js shows error.tsx to display a friendly message instead of crashing.

Execution Sample

NextJS

'use client';

export default function Error() {
  return <h1>Oops! Something went wrong.</h1>;
}

This code shows a simple error page with a message when an error occurs.

Execution Table

Step	Event	Action	Component Rendered	User Sees
1	App loads normally	Render main page	Main page component	Main page content
2	Error thrown in component	Next.js catches error	Error boundary triggers	No change yet
3	Next.js renders error.tsx	Show error UI	Error component	<h1>Oops! Something went wrong.</h1>
4	User sees error page	User can retry or navigate	Error component	Error message displayed

💡 Error handled by rendering error.tsx, preventing app crash

Variable Tracker

Variable	Start	After Error	Final
errorState	null	Error object	Error object
componentRendered	Main page	Switch to error.tsx	error.tsx

Key Moments - 2 Insights

Why does the app show error.tsx instead of crashing?

Next.js catches errors in components and renders error.tsx as a fallback UI, as shown in execution_table step 3.

Can error.tsx access the error details?

Yes, error.tsx can receive error info via props or hooks, but the simple example just shows a static message (execution_table step 3).

Visual Quiz - 3 Questions

Look at the execution table, what component is rendered right after an error occurs?

A Error component

B Loading spinner

C Main page component

D 404 Not Found page

💡 Hint

Check execution_table row 3 under 'Component Rendered'

At which step does the user first see the error message?

A Step 4

B Step 3

C Step 2

D Step 1

💡 Hint

Check execution_table row 3 under 'User Sees'

If no error occurs, which component remains rendered?

A Error component

B Loading spinner

C Main page component

D Error boundary

💡 Hint

See execution_table row 1 under 'Component Rendered'

Concept Snapshot

Error handling with error.tsx in Next.js:
- When a component throws an error, Next.js catches it.
- Next.js renders error.tsx as a fallback UI.
- error.tsx shows a friendly error message.
- Prevents app crash and improves user experience.
- Customize error.tsx to show details or retry options.

Full Transcript

In Next.js, when an error happens inside a component, the framework catches it and shows a special error page called error.tsx. This prevents the whole app from crashing and gives users a friendly message instead. The flow starts with the app running normally. If an error occurs, Next.js detects it and switches to render error.tsx. The user then sees the error message and can choose to retry or navigate away. The error.tsx component can be simple, like showing a heading with a message. This approach helps keep the app stable and user-friendly even when unexpected problems happen.