Summary - Error boundary

Write a boundary that wraps a widget and shows a fallback on error.

Summary - Error boundary

In this group you learned what an error boundary is, its class component structure, and fallback UI design. The boundary catches errors in its subtree and switches to a fallback.

Three key parts: getDerivedStateFromError updates state, componentDidCatch logs, render draws fallback or children. In the last step you combine all parts.

Exercise Full error boundary

Complete the skeleton below. Write an ErrorBoundary class; include getDerivedStateFromError, componentDidCatch methods and a render that returns <h1>Error</h1> if hasError is true. Export it.

Show example solution

import { Component } from "react";

class ErrorBoundary extends Component {
  state = { hasError: false };
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  componentDidCatch(error, info) {
    console.log(error, info);
  }
  render() {
    if (this.state.hasError) return <h1>Error</h1>;
    return this.props.children;
  }
}

export default ErrorBoundary;

Test yourself

What does componentDidCatch do?
- Cancels rendering
- Yan etki yapar
- Render eder
- Updates state
Show answer

Yan etki yapar — componentDidCatch performs side effects, like logging.
Summary match

getDerivedStateFromError

Updates state
componentDidCatch

Logs
hasError

Error state
fallback UI

Friendly message

Next lesson: What is React.lazy?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies