Graceful Error Handling with Error Boundaries

Snippet

Graceful Error Handling with Error Boundaries

Error Boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

snippet.js
javascript
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
 
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
 
  componentDidCatch(error, errorInfo) {
    console.error('Logged error:', error, errorInfo);
  }
 
  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

react

Breakdown

static getDerivedStateFromError(error)

This lifecycle method is invoked after an error has been thrown by a descendant component.

componentDidCatch(error, errorInfo)

Used to log error information to an external service.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Graceful Error Handling with Error Boundaries

Related