Invoking Error from button doesnt get catched from the getDerivedStateFromError or componentDidCatch

[moribaleta]

Describe the bug

Hi i Found this issue with a button throwing an error not catched by the getDerivedStateFromError or componentDidCatch

const ComponentWithError = () => {
  React.useEffect(() => {
    throw new Error('This is a test error thrown by ComponentWithError.');
  }, []);

  return (
    <View>
      <Button
        title="Throw error"
        onPress={() => {
          setTimeout(() => {
            throw new Error(
              'This is a test error thrown by ComponentWithError.',
            );
          });
        }}
      />
    </View>
  );
};

Reproduction

const ComponentWithError = () => {
React.useEffect(() => {
throw new Error('This is a test error thrown by ComponentWithError.');
}, []);

return (

<Button
title="Throw error"
onPress={() => {
setTimeout(() => {
throw new Error(
'This is a test error thrown by ComponentWithError.',
);
});
}}
/>

);
};

System Info

System:
    OS: macOS 12.5
    CPU: (8) arm64 Apple M1 Pro
    Memory: 167.03 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - /usr/local/bin/node
    Yarn: 3.2.2 - /opt/homebrew/bin/yarn
    npm: 8.15.0 - /opt/homebrew/bin/npm
  Browsers:
    Safari: 16.

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating duplicates.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[carloscuesta]

Hey!

First of all you need to wrap the component that is throwing the error with the ErrorBoundary component, setTimeouts are not catched by error boundaries as mentioned in the official React documentation

Please check the documentation to see how you can use this, there's an Expo example here 😊

https://react-native-error-boundary.js.org/usage/recovering-errors

Thanks