Session Replay - react-native-webview maskAllText

[ph8nt0m]

OS:

• Windows
• [O] MacOS
• Linux

Platform:

• [O] iOS
• [O] Android

SDK:

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

SDK version: ^5.31.1

react-native version: 0.74.5

Are you using Expo?

• [O] Yes (Bare Workflow)
• No

Are you using sentry.io or on-premise?

• [O] 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:

ReactNativeSentry.init({
dsn: 'https://e96105128d654a5681e011b4be3e29cd@o4504245640232960.ingest.sentry.io/4504245656420352',
_experiments: {
replaysSessionSampleRate: 1.0,
replaysOnErrorSampleRate: 1.0,
profilesSampleRate: 1.0,
},

  environment: envs.envName,
  release: envs.version,

  debug: false,
  maxBreadcrumbs: 150,

  enableAutoSessionTracking: true,
  sessionTrackingIntervalMillis: 10000,

  integrations: [
    Sentry.mobileReplayIntegration({
      maskAllText: true,
      maskAllImages: true,
    }),
    new Sentry.ReactNativeTracing({
      idleTimeout: 5000,
      routingInstrumentation: reactNavigationInstrumentation,
      tracingOrigins: ['localhost', /^\//, /^https:\/\//],
    }),
  ],
  tracesSampleRate: 1.0,
}),

---
If I use react-native-webview, Text and images within the web view are not hidden.

Text and images outside the web view are easily obscured.

[krystofwoldrich]

Hi @ph8nt0m,
thank you for the message,

this seems like a bug, the WebViews in RN Replays should be completely redacted by default.

As we are not able to read the web elements from the native Android and iOS layers where the RN replays is recorded we decided to completely redact WebViews.

[krystofwoldrich]

As a park of reproducing the issue let's add https://github.com/react-native-webview/react-native-webview to our sample app.

[hjonasson]

I see the same in my app but not always. @krystofwoldrich . Did this end up being a bug that has since been fixed. Do you have more insights into it. Would adding data-sentry-mask do anything to guard against this happening again?

[romtsn]

@hjonasson we currently have no mechanism of masking elements within the webviews, what we do instead is we mask the entire webview for now. Did you encounter this issue running on iOS or Android?

[ph8nt0m]

@romtsn Both ...

How can I mask the entire webview?

[romtsn]

@ph8nt0m if you're using SDK version 5.34.0 at least, they should be masked by default for both ios and android

[ph8nt0m]

Thanks, I will check it.

[krystofwoldrich]

We have added a webview to our sample app in #4215

And both on iOS and Android the webviews are redacted.

Currently we do not offer option to disable the webview redaction in RN.

---

If your webviews are not redacted on the latest version of the SDK (both V5 or V6) please share with us an example of the JS code you use to create the webviews.

[hjonasson]

@romtsn This was on Android. I can't see if it was all Androids if that matters but it looks to appear pretty consistently on Samsung phones. What is the best way to address it ASAP? I already filed a Zendesk ticket for it.

[romtsn]

@hjonasson please see #4126 (comment), it should already work in the latest versions of the RN sdk. If not please provide a reproducible sample.

[hjonasson]

Thanks @romtsn. It should work, I know. We assumed that when we put it into production. However, it doesn't work. It doesn't reproduce locally but I have many production logs where I can see the full webview from the client. We have turned it off and deleted the logs as we should not be storing them in the first place. I can give you device types this was working on to investigate further.

[romtsn]

@hjonasson can you post a link to your project in sentry?

[hjonasson]

Not here. We will take it through the higher-ups, they are reaching out to Sentry now. I will keep you updated.

[romtsn]

@hjonasson Alright, but please make sure to update to version 5.34.0 at least, that's where webview masking was introduced. Also, feel free to reach out to [email protected] directly if you feel it's better to discuss this p2p. Thanks!

[krystofwoldrich]

Since the last message, we released new Session Replay updates and improvements in https://github.com/getsentry/sentry-react-native/releases/tag/6.3.0-beta.2

Please try the latest beta and report any issues.