I am trying to create an error boundary but it not working. The ponentDidCatch not firing.

I expected that the fallback UI will render but actually the original UI is still there and nothing is happening.

const SimpleBtn = lazy(() => import("./ponentJsx/SimpleBtn.jsx"));
const SimpleBtn2 = lazy(() => import("./ponentJsx/SimpleBtn2.jsx"));

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

  static getDerivedStateFromError(error) {
    return error;
  }

  ponentDidCatch(error, errorInfo) {
    this.setState({ error, errorInfo });
    console.log(error, errorInfo);
  }

  render() {
    return this.state.errorInfo ? (
      <>
        <h3>Something is wrong!</h3>
        <details>{this.state.error}</details>
      </>
    ) : (
      this.props.children
    );
  }
}

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

  toggleBtn = () => {
    // use transition
    startTransition(() => {
      this.setState((state) => ({
        toggle: !state.toggle,
      }));
    });
  };

  render() {
    const { toggle } = this.state;
    return (
      <ErrorBoundary>
        <Suspense fallback={<div>...Loading</div>}>
          <h1> Sample file </h1>
          {toggle && <SimpleBtn toggleBtn={this.toggleBtn} />}
          <SimpleBtn2 toggleBtn={this.toggleBtn} />
          <button
            onClick={() => {
              throw new Error("i am error!");
            }}
          >
            Throw Error
          </button>
        </Suspense>
      </ErrorBoundary>
    );
  }
}

I found a similar question but it not answered.

I tried to write code as in official react documentation but still not working and i can't figure out the problem also!.

After using Components tab i got to know that the error state is not changing.

I am trying to create an error boundary but it not working. The ponentDidCatch not firing.

I expected that the fallback UI will render but actually the original UI is still there and nothing is happening.

const SimpleBtn = lazy(() => import("./ponentJsx/SimpleBtn.jsx"));
const SimpleBtn2 = lazy(() => import("./ponentJsx/SimpleBtn2.jsx"));

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

  static getDerivedStateFromError(error) {
    return error;
  }

  ponentDidCatch(error, errorInfo) {
    this.setState({ error, errorInfo });
    console.log(error, errorInfo);
  }

  render() {
    return this.state.errorInfo ? (
      <>
        <h3>Something is wrong!</h3>
        <details>{this.state.error}</details>
      </>
    ) : (
      this.props.children
    );
  }
}

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

  toggleBtn = () => {
    // use transition
    startTransition(() => {
      this.setState((state) => ({
        toggle: !state.toggle,
      }));
    });
  };

  render() {
    const { toggle } = this.state;
    return (
      <ErrorBoundary>
        <Suspense fallback={<div>...Loading</div>}>
          <h1> Sample file </h1>
          {toggle && <SimpleBtn toggleBtn={this.toggleBtn} />}
          <SimpleBtn2 toggleBtn={this.toggleBtn} />
          <button
            onClick={() => {
              throw new Error("i am error!");
            }}
          >
            Throw Error
          </button>
        </Suspense>
      </ErrorBoundary>
    );
  }
}

I found a similar question but it not answered.

I tried to write code as in official react documentation but still not working and i can't figure out the problem also!.

After using Components tab i got to know that the error state is not changing.

• javascript
• reactjs

2 Answers 2

This is because error boundaries only work for errors thrown during render. If you throw an error in a ponent render function instead it will work.

If you want to capture errors in event handlers you'll need to register an error handler on the window or do local error handling.

If youre just trying to test your error boundary throw in a ponent render instead and conditionally load that ponent if you like.

See https://reactjs/docs/error-boundaries.html#how-about-event-handlers

According to the react doc "Error boundaries do not catch errors inside event handlers."

If you want to trigger an error inside an error boundary, you can use the following example:

function ErrorExample() {
    throw new Error("Test Error");
    return <div>Your Broken Component</div>;
}

// Render this inside an error boundary
<ErrorBoundary>
    <ErrorExample />
</ErrorBoundary>

This will be caught by the ErrorBoundary ponent since it happens during rendering. However, if an error occurs inside an event handler, it won’t be caught by the error boundary. If you need to globally catch errors inside event handlers you must handle them manually on the global error event listener, see example below

window.addEventListener('error', (event) => {
    console.error("Global error caught:", event.error);
});