Error boundary fallback ui not rendering in react?

Question

I am trying to create an error boundary but it not working. The componentDidCatch 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("./componentJsx/SimpleBtn.jsx"));
const SimpleBtn2 = lazy(() => import("./componentJsx/SimpleBtn2.jsx"));

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

  static getDerivedStateFromError(error) {
    return error;
  }

  componentDidCatch(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.

adsy · Accepted Answer · 2022-07-15 12:09:07Z

7

This is because error boundaries only work for errors thrown during render. If you throw an error in a component 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 component render instead and conditionally load that component if you like.

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

answered Jul 15, 2022 at 12:09

adsy

12k2 gold badges28 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yashlodhi Over a year ago

So, instead of using error state in ErrorBoundary i pass it as a prop and then change it using button. everything works fine!.

KhaledMohamedP · Accepted Answer · 2025-02-06 01:28:56Z

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 component 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);
});

Collectives™ on Stack Overflow

Error boundary fallback ui not rendering in react?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related