Error boundaries concept in React - Step-by-Step Execution

Concept Flow - Error boundaries concept

Component Tree Rendering

↓

Child Component Throws Error?

↓

Error Boundary Catches

↓

Render Fallback UI

↓

User Sees Error Message

↓

App Continues Running

This flow shows how React renders components, catches errors in child components using error boundaries, and displays fallback UI without crashing the whole app.

Execution Sample

React

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

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

  componentDidCatch(error, info) {
    // You can also log the error to an error reporting service
    console.error('Error caught by ErrorBoundary:', error, info);
  }

  render() {
    return this.state.hasError
      ? <div>Error occurred</div>
      : this.props.children;
  }
}

A simplified class-based error boundary component that catches errors in child components during rendering and shows an error message.

Execution Table

Step	Action	Error Thrown?	State hasError	Rendered Output
1	Render ErrorBoundary with ChildComponent	No	false	ChildComponent output
2	ChildComponent throws error during render	Yes	false	No output yet
3	ErrorBoundary catches error	Yes	true	Fallback UI shown
4	User sees fallback UI	No	true	<div>Error occurred</div>
5	App continues running without crash	No	true	Fallback UI remains

💡 Error caught by boundary, fallback UI rendered, app does not crash

Variable Tracker

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

Key Moments - 3 Insights

Why doesn't the whole app crash when a child component throws an error?

Because the error boundary catches the error at Step 3 and sets hasError to true, rendering fallback UI instead of crashing (see execution_table row 3).

Does the error boundary catch errors in itself or only in child components?

It only catches errors in its child components during rendering, lifecycle methods, and constructors, not in itself.

What happens if no error boundary is present and a component throws an error?

The whole React component tree unmounts and the app crashes or shows a blank screen.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of hasError after Step 3?

A true

B false

C undefined

D null

💡 Hint

Check the 'State hasError' column at Step 3 in the execution_table.

At which step does the fallback UI start rendering?

A Step 4

B Step 2

C Step 3

D Step 1

💡 Hint

Look at the 'Rendered Output' column to see when fallback UI is shown.

If the child component never throws an error, what will the 'hasError' state be?

A true

B false

C null

D undefined

💡 Hint

Refer to the 'State hasError' column at Step 1 where no error is thrown.

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.
Class components implement them using getDerivedStateFromError and componentDidCatch.
Errors outside render lifecycle are not caught.

Full Transcript

Error boundaries in React are special components that catch errors thrown by their child components during rendering, lifecycle methods, or constructors. When an error happens, the error boundary sets a state flag to true and renders a fallback UI instead of the broken component tree. This prevents the entire app from crashing and allows users to see a friendly error message. The execution flow starts with normal rendering, then if a child throws an error, the boundary catches it, updates state, and shows fallback UI. The app continues running normally after that. Without error boundaries, any error in a component would crash the whole React tree. This concept is important for building resilient React apps.