javascript - Error boundary fallback ui not rendering in react? - Stack Overflow

admin管理员组

文章数量:1355654

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

Share Improve this question Follow edited Jul 15, 2022 at 12:06 yashlodhi asked Jul 15, 2022 at 11:21 yashlodhiyashlodhi 13911 silver badge1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

本文标签： javascriptError boundary fallback ui not rendering in reactStack Overflow