React 18: Error boundaries actually catches errors in effects

[eps1lon]

Given

function ThrowInEffect() {
  React.useEffect(() => {
    throw new Error('passive effect')
  }, [])
  return null;
}

In React 17 this error got logged to the console (and triggered the error overlay in create-react-app) regardless of whether ThrowInEffect was a child of an Error Boundary or not.

In React 18 (createRoot and legacy root API) an Error Boundary will prevent logging that error to the console (and not trigger the error overlay in create-react-app).

Errors during render work like they did in React 17.

Behavior in React 17: https://codesandbox.io/s/react-17-error-boundaries-vp21e?file=/src/index.js
Behavior in React 18: https://codesandbox.io/s/react-18-error-boundaries-psd56?file=/src/index.js

Recording of effect errors in React 17 and 18 and with and without Error Boundaries_

react18-error-boundaries.mp4

[eps1lon]

Update: React 18 behaved as 17 in dbe3363 but changed in 7ec4c55. Looking at dbe3363...7ec4c55 I suspect #21666 changed the behavior. The error is no longer logged when I try the codesandbox build from #21666

[gaearon]

Thanks for catching this. Pun intended. Fix is in #21723.