React Error Boundary does not catch errors

Question

I have my react app created from vite and there I have my Custom React Error Boundary Component wrap from Components the thing is it cannot catch errors.i debug my error component but it cannot recieve any value in getDerivedStateFromError not componentDidCatch

Here is my Error Boundary Code:

/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { Component } from 'react';

interface IState {
  hasError: boolean;
  eventId?: string;
}

// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface IProps {
  children: any;
}

export default class ErrorBoundary extends Component<IProps, IState> {
  constructor(props: Readonly<{}>) {
    super(props);
    this.state = { eventId: '', hasError: false };
  }

  static getDerivedStateFromError(error: any) {
    console.log('here get Derived');
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error: any, errorInfo: any) {
    console.log('My errors', error);
  
  }

  render() {
    // const { children } = this.props;
    console.log('errors');
    if (this.state.hasError) {
      console.log('errors found', this.state.hasError);
      return (
        <button
          onClick={() =>
            console.log("Error Found)
          }
        >
          Report feedback
        </button>
      );
    }

    return this.props.children;
  }
}

and my app.js code:

import './App.css';
function App() {


  return (
    <div className="App">
      <header className="App-header">
        <ErrorBoundary>
          <button
            onClick={() => {
              throw new Error('Im new Error');
            }}
          >
            Click Me
          </button>
        </ErrorBoundary>
      </header>
    </div>
  );
}

export default App;

does anyone knows what is the issue ?

Answer 1

Error boundaries do not catch errors for:

• Event handlers
• Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
• Server side rendering
• Errors thrown in the error boundary itself (rather than its children)

https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries

To simulate an error, you need to create a component, make it a child of ErrorBoundary class and click on the button 2 times

   function Button() {
    
      const [count, setCount] = useState(0);
      const onClick = () => {
        setCount(count + 1);
      };
      useEffect(() => {
        if (count === 2) {
          throw new Error('I crashed!');
        }
      });
        
      return (
          <button
              onClick={onClick}
           >
              Click Me
           </button>
       );
    }
        
    export default Button;