Screenshot and Error Boundary features conflict

[rodolfoBee]

OS:

• [ ] Windows
• [ ] MacOS
• [ ] Linux

Platform:

• [x] iOS
• [x] Android

SDK:

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

SDK version: 5.22.0

react-native version: 0.73.6

Are you using Expo?

• [ ] Yes
• [ ] No

Are you using sentry.io or on-premise?

• [x] sentry.io (SaaS)
• [ ] on-premise

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

In the synced Jira issue.

Configuration:

import * as Sentry from '@sentry/react-native';

Sentry.init({
  dsn: '_MY_DSN_',
  debug: true,
  attachScreenshot: true,
});

---

The attach screenshot feature will add a screenshot of the Fallback component configured in a React Error Boundary instead of a screenshot of the screen where the error originally happened.

Steps to reproduce:

1. Configure the SDK with attachScreenshot: true
2. Create a component that intentionally throws an unhandled error.
3. Create an error boundary component or use Sentry's React error boundary. with a fallback component
4. Wrap the Component created in step2 with the error boundary created in step3

Actual result: Sentry captures the error with a screenshot showing the fallback component from step3

Expected result: Sentry captures an error with a screenshot showing the component/screen from step2

┆Issue is synchronized with this Jira Improvement by Unito

[krystofwoldrich]

Hi @rodolfoBee, thank you for the message, you are right, the screenshot capture is best effort, the SDK initiates the capture right when the error is captured, but because it's not a blocking call the captured frame might be a few (1-2) frames delayed.

If this is not reflected in the current documentation, we should update it. https://docs.sentry.io/platforms/react-native/enriching-events/screenshots/#enabling-screenshots

We will need to evaluate if blocking the JS thread is acceptable for capturing the screenshot.