Redacted text showing on android during session replay

[AndreasJJ]

Version

posthog-react-native: 3.12.0, posthog-react-native-session-replay: 1.0.5

Steps to Reproduce

Reference: https://posthog.com/questions/redacted-data-showing

Redacted text marked with accessibilityLabel="ph-no-capture" shows during session replay on Android.

MRE: https://github.com/AndreasJJ/posthog-session-replay-android-repro

Steps:

1. Add your own apiKey to the PostHogProvider inside the AnalyticsProvider in the utils folder
2. Build and run the expo app on an android phone
3. Check the session replay on posthog

posthog_android_redacted_session_replay.mp4

Expected Result

Redacted text is redacted

Actual Result

Redacted text is periodically shown as the black rectangles go out of position compared to the text on screen

[marandaneto]

@AndreasJJ this is Android only, right?

[AndreasJJ]

@marandaneto We had some other issues with iOS that was fixed in PostHog/posthog-ios#298 but our iOS recordings seems stable for now.

[AndreasJJ]

I just found a session replay from a user in PROD on iOS that had some redacted text shown after going router.back() from one page in the stack to another. Redacted text showing seems to happen a lot more rarely on iOS, but i found at least one occurrence. So i had to disable session replay for now.

[marandaneto]

@AndreasJJ sorry for the delay, I somehow missed this.
I will check the MRE

[marandaneto]

@AndreasJJ, I've managed to reproduce this issue, but I'm running out of ideas on how to improve it.

The problem is that taking the screenshot (PixelCopy.request is async) and drawing the masked elements are racing each other when the screen is constantly being redrawn.

We have already implemented throttling to prevent excessive screenshot generation when the screen is constantly being redrawn.

Doing everything in the main thread fixes the problem, but slows down the app because it's not super efficient.

I saw you set androidDebouncerDelayMs to 500, but the default is 1000, the higher the better, and the less you experience this issue, but it's still not fixing it for good.

[marandaneto]

By the time we await PixelCopy.request for the bitmap, the screen might have changed again. Therefore, scanning the view tree and looking for the maskable elements, the X and Y coordinates of those elements might have also changed.

[marandaneto]

I've made some possible improvements here #254
Hard to tell if this is gonna work for most apps but it's a bit better using my sample app

[marandaneto]

@AndreasJJ can you check if this version helps?

[marandaneto]

Closing the issue as a part of large repository cleanup, due to it being inactive and/or outdated. There's a large chance that this issue has been solved since.
Please do not hesitate to ping me if it is still relevant, and I will happily reopen and work on it.
Cheers!