Unhandled React Error Crashing App

1. No error boundary in component tree
2. Error occurs outside component (event handler, async)
3. Error boundary can't catch itself's errors
4. Error thrown in child but not caught
5. No fallback UI for error state

Create Error Boundary component:

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

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

  render() {
    if (this.state.hasError) {
      return 
Error: {this.state.error?.message}
;
    }
    return this.props.children;
  }
}