Error Boundries How do Error Boundaries work in React?

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.
class ErrorBoundary extends React.Component {
  constructor(props) {
    this.state = { hasError: false };

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

  componentDidCatch(error, errorInfo) {
    console.log('something went horribly wrong', error, errorInfo);

  render() {
    if (this.state.hasError) {
      return <h1>Fallback UI</h1>;

    return this.props.children;

// Example Usage

function Main() {
  return (
        <Orders />


Create an ErrorBoundary class component that provides a fallback UI in the event an error occurs.



Ask questions via GitHub below OR chat on Slack #questions