Skip to content

Invisible components on session replay (@gorhom/bottom-sheet) #4706

@Trancever

Description

@Trancever

What React Native libraries do you use?

Hermes, Expo Application Services (EAS), Expo (mobile only), React Navigation

Are you using sentry.io or on-premise?

sentry.io (SaS)

@sentry/react-native SDK Version

5.36.0

How does your development environment look like?

OS: macOS 15.1
Node: 21.1.0
Yarn: 1.22.22
Expo SDK: 52.0.26
react: 18.3.1
react-native: 0.76.7
hermesEnabled: true
newArchEnabled: false

Sentry.init()

Sentry.init({
  environment: 'development',
  enabled: true,
  dsn: 'xyz',
  tracesSampleRate: 1.0,
  profilesSampleRate: 1.0,
  integrations: [
    Sentry.reactNativeTracingIntegration({
      routingInstrumentation: navigationIntegration,
    }),
    Sentry.mobileReplayIntegration({
      maskAllText: false,
      maskAllImages: false,
      maskAllVectors: false,
    }),
  ],
  _experiments: {
    replaysOnErrorSampleRate: 1.0,
    replaysSessionSampleRate: 1.0,
  },
  enableNativeFramesTracking: true,
  normalizeDepth: 5,
});

Steps to Reproduce

  1. Init expo app
  2. Render BottomSheetModal from @gorhom/bottom-sheet package
  3. Set up sentry session replays

Expected Result

Bottom sheet component should be visible on the replay.

Actual Result

Bottom sheet is not visible at all on the replay. I guess it must be caused by the way Sentry captures and recreates the UI for the replay, maybe the bottom sheet library renders the component in non standard way and Sentry thinks it's rendered below other elements on the screen?

I understand it's not your responsibility to support all of the existing react-native UI packages, but @gorhom/bottom-sheet seems to be the most popular bottom sheet implementation right now and it would be awesome if it worked with the replays properly. Could you give some high level overview of how you capture the UI so that we could investigate @gorhom/bottom-sheet internals and try to find the root cause of the problem?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No fields configured for issues without a type.

    Projects

    Status

    Waiting for: Product Owner

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions