Fallback UI

Learn to write the fallback UI shown on error.

Fallback UI

The UI shown to the user when an error is caught is called the fallback UI. It can be a simple message or include a 'try again' button.

The fallback offers a gentle explanation, not technical details. Phrases like 'Something went wrong' are common. A support link may be added if needed.

A 'try again' button resets state and re-renders; this helps with transient errors.

Fallback UI design

A good fallback UI offers three things: what happened (short message), what to do (try again or go home) and a support link if needed. Not leaving the user alone matters.

In large apps the fallback is regional: a header error shows in the header bar, a sidebar error in the sidebar. The rest of the app keeps working.

Debug info is shown only in development; it is hidden in production.

Exercise Fallback UI with button

Complete the skeleton below. Write an ErrorBoundary class; if hasError is true return <h1>Error</h1> and <button onClick={() => this.setState({ hasError: false })}>Try again</button>, otherwise this.props.children. Export it.

Show example solution

import { Component } from "react";

class ErrorBoundary extends Component {
  state = { hasError: false };
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>Error</h1>
          <button onClick={() => this.setState({ hasError: false })}>Try again</button>
        </div>
      );
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

Test yourself

What does the fallback UI show?
- Kod listesi
- The error stack
- Teknik detay
- Nazik mesaj
Show answer

Nazik mesaj — The fallback UI shows a gentle message.

Try again button

<button onClick={() => this.setState({ hasError: ____ })}>Tekrar dene</button>

Show answer

<button onClick={() => this.setState({ hasError: false })}>Tekrar dene</button>

Fallback UI: match the terms

Fallback UI

Friendly message
Try again

Resets state
hasError

Error state
development

Shows details

Next lesson: Summary - Error boundary

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies