Client-side error boundaries in NextJS - Step-by-Step Execution

Concept Flow - Client-side error boundaries

Component Renders

↓

Error Occurs?

No→Show Normal UI

Yes↓

Error Boundary Catches

↓

Render Fallback UI

↓

User Interaction

↓

Reset Error Boundary?

Yes→Retry Render

No↓

Stay on Fallback UI

The component tries to render. If an error happens, the error boundary catches it and shows fallback UI. User can retry to reset the error and render again.

Execution Sample

NextJS

'use client';

import { Component } from 'react';

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

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

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

  render() {
    if (this.state.hasError) {
      return (
        <div>
          Something went wrong.
          <button onClick={this.resetError}>Retry</button>
        </div>
      );
    }

    return this.props.children;
  }
}

A simple error boundary component that catches errors during rendering and shows fallback UI.

Execution Table

Step	Action	State Before	Error Occurs?	State After	UI Rendered
1	Render child component	hasError = false	No	hasError = false	Child UI
2	Render child component	hasError = false	Yes (error thrown)	hasError = true	Fallback UI: Something went wrong.
3	User clicks retry (reset)	hasError = true	No	hasError = false	Child UI
4	Render child component	hasError = false	No	hasError = false	Child UI
5	Render child component	hasError = false	No	hasError = false	Child UI

💡 Execution stops when UI renders without error or fallback UI is shown after error.

Variable Tracker

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

Key Moments - 2 Insights

Why does the UI switch to fallback after an error?

Because the error boundary sets hasError to true when catching an error (see execution_table step 2), causing fallback UI to render.

How can the error boundary try rendering the child component again?

By resetting hasError to false (step 3), usually triggered by user action, allowing normal UI to render again.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of hasError after step 2?

A true

B false

C undefined

D null

💡 Hint

Check the 'State After' column in row for step 2 in execution_table.

At which step does the UI show the fallback message?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'UI Rendered' column in execution_table for fallback UI.

If the user never resets the error, what UI will continue to show?

A Child UI

B Blank screen

C Fallback UI

D Error message in console only

💡 Hint

Refer to variable_tracker and execution_table steps after error occurs.

Concept Snapshot

Client-side error boundaries catch errors during rendering.
They show fallback UI instead of crashing the app.
Use state to track error occurrence.
Provide a way to reset and retry rendering.
In Next.js, use React error boundaries in client components.

Full Transcript

Client-side error boundaries in Next.js catch errors that happen during rendering of components. When an error occurs, the boundary sets a state variable to true and shows fallback UI instead of the broken component. The user can trigger a reset to clear the error state and try rendering the component again. This prevents the whole app from crashing and improves user experience by showing a friendly message. The execution table shows how the error state changes step-by-step and how the UI switches between normal and fallback views.