Using error boundaries in React - Step-by-Step Execution

Concept Flow - Using error boundaries

Render Parent Component

↓

Render Child Component

↓

Error Occurs in Child?

No→Display Child Output

Yes↓

Error Boundary Catches Error

↓

Render Fallback UI

↓

User Interaction or Retry

↓

Try Rendering Child Again

The parent renders a child component. If the child throws an error, the error boundary catches it and shows fallback UI instead of crashing the whole app.

Execution Sample

React

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  handleRetry = () => {
    this.setState({ hasError: false });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          Error occurred
          <button onClick={this.handleRetry}>Retry</button>
        </div>
      );
    }

    return this.props.children;
  }
}

A simple error boundary component that catches errors in its children and shows a fallback message.

Execution Table

Step	Action	Error Thrown?	Error Boundary State	Rendered Output
1	Render ErrorBoundary with Child	No	hasError = false	Child component output
2	Child throws error during render	Yes	hasError = false	No output yet
3	ErrorBoundary catches error	Yes	hasError = true	Fallback UI shown: 'Error occurred'
4	User triggers retry (re-render)	No	hasError = false	Child component output
5	No error on retry	No	hasError = false	Child component output
6	Execution ends	No	hasError = false	Normal UI displayed

💡 Execution stops when no error occurs and UI renders normally.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
hasError	false	false	false	true	false	false

Key Moments - 3 Insights

Why does the error boundary show fallback UI instead of crashing the whole app?

Because in step 3 of the execution_table, the error boundary catches the error and sets hasError to true, which triggers rendering the fallback UI instead of the broken child.

Does the error boundary catch errors thrown inside event handlers?

No, error boundaries only catch errors during rendering, lifecycle methods, and constructors of child components, as shown in step 2 where the error occurs during render.

How does the error boundary reset to try rendering the child again?

In step 4, user interaction triggers a re-render that resets hasError to false, allowing the child to render again.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of hasError after step 3?

A false

B undefined

C true

D null

💡 Hint

Check the variable_tracker row for hasError at After Step 3.

At which step does the fallback UI first appear?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the Rendered Output column in the execution_table.

If the child component never throws an error, what will the error boundary render?

A Nothing

B Child component output

C Fallback UI

D Error message in console

💡 Hint

Refer to Step 1 and Step 6 in the execution_table where no error occurs.

Concept Snapshot

Error boundaries catch errors in child components during rendering.
They prevent the whole app from crashing.
Use state to track if an error occurred.
Render fallback UI when error happens.
Reset state to retry rendering children.

Full Transcript

This visual execution shows how React error boundaries work. First, the parent component renders a child. If the child throws an error during rendering, the error boundary catches it and sets a state variable hasError to true. This causes the error boundary to render fallback UI instead of the broken child. When the user triggers a retry, the error boundary resets hasError to false and tries rendering the child again. If no error occurs, the child renders normally. Error boundaries only catch errors during rendering, lifecycle methods, and constructors of child components, not in event handlers. This prevents the entire app from crashing and improves user experience.