Handling runtime errors in React - Step-by-Step Execution

Concept Flow - Handling runtime errors

Component Renders

↓

Error Occurs?

No→Normal UI Display

Yes↓

Error Boundary Catches

↓

Render Fallback UI

↓

User Interaction: Retry or Report

↓

Reset Error State or Log

This flow shows how React components render normally, but if a runtime error happens, an Error Boundary catches it and shows a fallback UI, allowing user recovery.

Execution Sample

React

function BuggyCounter() {
  const [count, setCount] = React.useState(0);
  if (count === 3) throw new Error('Crashed!');
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }

  static getDerivedStateFromError(error) {
    return { error };
  }

  componentDidCatch(error, errorInfo) {
    console.log(error.message);
  }

  render() {
    if (this.state.error) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

A component that crashes when count reaches 3, wrapped by an error boundary that catches the error and shows fallback UI.

Execution Table

Step	Action	Count State	Error State	Rendered Output	Notes
1	Initial render BuggyCounter	0	null	<button>0</button>	No error, normal render
2	Click button, count=1	1	null	<button>1</button>	No error, normal render
3	Click button, count=2	2	null	<button>2</button>	No error, normal render
4	Click button, count=3 triggers error	3	null	Error thrown	Runtime error occurs inside component
5	ErrorBoundary catches error	3	Error: Crashed!	<h1>Something went wrong.</h1>	Fallback UI shown
6	User sees fallback UI	3	Error: Crashed!	<h1>Something went wrong.</h1>	Error state prevents normal UI
7	User reloads or resets error	0	null	<button>0</button>	Error cleared, normal UI restored

💡 Execution stops normal rendering when error occurs; ErrorBoundary handles error and shows fallback UI.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
count	0	1	2	3	3	0
error	null	null	null	null	Error: Crashed!	null

Key Moments - 3 Insights

Why does the UI stop updating normally after count reaches 3?

Because at count 3, the component throws an error (see step 4 in execution_table), which interrupts normal rendering and triggers the ErrorBoundary fallback.

How does the ErrorBoundary catch errors from its child components?

It uses static getDerivedStateFromError() and componentDidCatch() to catch errors from its child components during rendering, sets an error state when an error is caught (step 5), which then switches the UI to fallback mode.

What happens if the error state is not reset?

The fallback UI remains displayed and the normal UI never returns (step 6), so resetting error state is needed to restore normal rendering (step 7).

Visual Quiz - 3 Questions

Look at the execution_table, what is the count value when the error is thrown?

A 2

B 3

C 0

D null

💡 Hint

Check step 4 in the execution_table where the error occurs.

At which step does the ErrorBoundary show the fallback UI?

A Step 5

B Step 3

C Step 2

D Step 7

💡 Hint

Look for the step where Rendered Output changes to fallback UI in execution_table.

If the error state is never reset, what will the user see?

A Normal button with count 0

B Button with count 3

C Fallback UI message

D Blank screen

💡 Hint

Refer to step 6 in execution_table where error state is set but not cleared.

Concept Snapshot

Handling runtime errors in React:
- Use Error Boundaries to catch errors in child components.
- Error Boundary sets error state and renders fallback UI.
- Normal UI stops rendering when error occurs.
- Reset error state to recover UI.
- Helps keep app stable and user informed.

Full Transcript

In React, runtime errors inside components can crash the UI. To handle this, we use Error Boundaries. These are components that catch errors thrown by their children during rendering. When an error happens, the Error Boundary sets an error state and shows a fallback UI instead of the broken component. This prevents the whole app from crashing. Users see a friendly message and can retry or reload to reset the error state. This flow keeps the app stable and improves user experience by handling unexpected errors gracefully.