Bug: ErrorBoundary won't caught error in useEffect callback while ErrorBoundary unmount with it's children

[Chen-jj]

React version: 18.2.0

Steps To Reproduce

function App() {
  const [isShow, setIsShow] = React.useState(true);
  function setError() {
    setIsShow(false);
  }
  return (
    <div>
      {isShow && <PageWrapper />}
      <div onClick={setError}>setError</div>
    </div>
  );
}

class PageWrapper extends React.Component {
  static getDerivedStateFromError() {}
  componentDidCatch(err) {
    console.log("catch err: ", err);
  }
  render() {
    return <Page />;
  }
}

function Page() {
  React.useEffect(() => {
    return () => {
      throw new Error("sorry!");
    };
  });
  return <div>I m page</div>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />)

1. click setError.Unmount <PageWrapper> along with <Page>, then <Page> threw an error in useEffect callback.

The current behavior

ErrorBoundary <PageWrapper> won't caught error thrown by <Page> useEffect callback.So all the React Tree is dropped.

But in React 17, <PageWrapper> caught the error.And the React Tree remain exists.

The expected behavior

Catch the error like React 17.

So, is that React18 new behavior? Or is a bug？

[sadiki-o]

can you please tell me why are you mixing class components with function components?

[Chen-jj]

sadiki-o

Because ErrorBoundary only work with class components.

[sadiki-o]

oh my apology since i worked mostly with function components i never get to use such feature

[creamidea]

~~This may be related to the change in the commitRoot phase traversal. v17 traverses the effect list. v18 traverses the entire tree. When dealing with PassiveUnmountEffects, the connection to child is removed. v18 does not have a way to call PageWrapper's Page's destroy, while v17 can handle the destroy function through the effect list.~~

[creamidea]

Maybe I find the problem, here is set skipUnmountedBoundaries to be true.

https://github.com/facebook/react/blob/9e3b772b8cabbd8cadc7522ebe3dde3279e79d9e/packages/react-reconciler/src/ReactFiberWorkLoop.new.js#L2598

So, the compiler's output

Why? https://github.com/facebook/react/blob/9e3b772b8cabbd8cadc7522ebe3dde3279e79d9e/packages/shared/ReactFeatureFlags.js#L30

// This rolled out to 10% public in www, so we should be able to land, but some
// internal tests need to be updated. The open source behavior is correct.
export const skipUnmountedBoundaries = true;

[tgohn]

I did encountered the same error as mentioned. Digging through PRs history, the above behaviour change in ErrorBoundary is expected. The details were described in PR #19627

There were quite a number of commits and reverts related to this change. I could be wrong, but I think these are the main ones:

• The original PR that started this ErrorBoundary change. There are helpful discussions here.
• The PR that moves the above change under skipUnmountedBoundaries feature flag: default to off
• The PRs (1, 2) that enable the flag to true always. This lands in React v18 public.

I wish the change in ErrorBoundary has been mentioned in React v18 changelog.

Hope this helps.

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!