Error Boundary with Fallback UI

Showcase an Error Boundary that catches errors and renders a fallback UI to gracefully inform the user.
class ErrorBoundary extends React.Component {
  constructor(props) {
    this.state = { hasError: false };

  static getDerivedStateFromError(error) {
    // Update state so next render shows fallback UI
    return { hasError: true };

  componentDidCatch(error, errorInfo) {
    // Log the error to an error reporting service
    logErrorToMyService(error, errorInfo);

  render() {
    if (this.state.hasError) {
      // Render any custom fallback UI
      return <h1>Something went wrong.</h1>;

    return this.props.children;
This is an Error Boundary component that catches JavaScript errors in its child component tree, logs the error, and displays a fallback UI instead of the component tree that crashed. 'getDerivedStateFromError' is used to render the fallback UI when an error is caught.
const MyComponent = () => {
  // This component is meant to be wrapped in ErrorBoundary
  // It intentionally throws an error for demonstration
  throw new Error('I crashed!');
  return <div>This will not render</div>;
This is a component that simulates a JavaScript error by throwing an error when it's rendered.
const logErrorToMyService = (error, errorInfo) => {
  // Send the error to an error reporting service
  console.error('Logging to my service:', error, errorInfo);
This function simulates logging the error to an external error reporting service. Replace the `console.error` call with integration to a real service.
    <MyComponent />
This is the root of the application where 'ErrorBoundary' wraps 'MyComponent'. If 'MyComponent' crashes, 'ErrorBoundary' will display a fallback UI to the user.