Error Boundary fallback not rendering

[frozencap]

OS:

• Windows
• MacOS
• Linux

Platform:

• iOS
• Android

SDK:

• @sentry/react-native (>= 1.0.0)
• react-native-sentry (<= 0.43.2)

SDK version: ~5.22.0

react-native version: 0.74.1 and 0.73.6

Are you using Expo?

• Yes
• No

Are you using sentry.io or on-premise?

• sentry.io (SaaS)
• on-premise

If you are using sentry.io, please post a link to your issue so we can take a look:

[Link to issue]

Configuration:

(@sentry/react-native)

Sentry.init({
  dsn: "YOUR DSN HERE",
  debug: true, 
});

const App = () => {
  return (
    <Sentry.ErrorBoundary fallback={<p>An error has occurred</p>}>
      <View style={styles.container}>
        <Text>Open up App.tsx to start working on your app!</Text>
        <Button
          title="Test Error Boundary fallback"
          onPress={() => {
            throw new Error("Hello, again, Sentry!");
          }}
        />
      </View>
    </Sentry.ErrorBoundary>
  );
};

---

I have the following issue:
Error Boundary doesn't render the fallback component

Steps to reproduce:

• Step 1: click on the button

Actual result:

No Error Boundary fallback is rendered

Expected result:

Error Boundary fallback is rendered

[krystofwoldrich]

Hi @frozencap,
thank you for the message,

the error boundaries only catch rendering errors. The error from your code snippet happens after the components were rendered. This is expected behaviour. The error from your snipped will cause a crash which will be reported by Sentry. To avid the crash you will have to use try/catch.

The Sentry error boundary is implemented using the React componentDidCatch API https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary

Let us know if this was helpful, if you have any other question feel free to post it here or open a new issue.