Screenshot and Error Boundary features conflict

[rodolfoBee]

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.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:

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.