Blank screen until user interaction when replay integration is enabled

[Clinik]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Self-hosted/on-premise

Which SDK are you using?

@sentry/angular

SDK Version

8.27.0

Framework Version

Angular 16 (in React Native Webview 13)

Link to Sentry event

No response

Reproduction Example/SDK Setup

I have a basic sentry setup like:

Sentry.init({
    release: 'my-version',
    environment: 'my-env',
    dsn: 'my-dsn',
    integrations [ Sentry.replayIntegration() ],
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0
})

The issue only happens with replayIntegration enabled!

If the application is used in a WebView on Android the bug is present with some specific (but popular) devices eg. Pixel (Android 14) and only sometimes (like in 50% of the reproductions).

Steps to Reproduce

1. Open the Android app which contains a webview with the angular app, with sentry enabled and with replay integration enabled
2. Lock the phone's screen
3. Wait for 2-3 minutes (the issue occurs if the screen is locked for this duration—locking it for too long or too short may not trigger the issue)
4. Unlock the phone's screen

Expected Result

Sentry, with Replay integration enabled, should not cause rendering issues when the phone screen is unlocked.

Actual Result

The webview is blank white (or the background color of the webview) but the page is still interactive. This seems to be a visual bug only:

• If i tap inside the webview and tap on an (now invisible) button, the button works, the rendering glitch is "fixed" and everything is visible again normally
• If i tap anywhere the page (or make any interaction which forces a re-render) the issue is "fixed" and everything is visible again normally

Things i discovered throughout debugging:

• The issue only occurs when Replay integration is enabled. I've tried adjusting Replay parameters, but it didn’t resolve the issue.
• The problem seems to be related to the ProcessedNodeManager's periodicallyClear function.
• When I commented out the body of the periodicallyClear function, the issue was resolved.
• Initially, I suspected that the onRequestAnimationFrame (called within periodicallyClear) was causing the issue, but it seems more likely related to the creation of a new WeakMap() on every frame, even when it is unnecessary (?) (i.e., when the map is empty).

While this seems to be an edge case and WebView is notorious for weird issues, it still affects usability.

Question

Is there a way to override, disable, or control the periodicallyClear function through the API, or any workaround to fix this issue?

[mydea]

Hey, thanks for raising this with so much detail!

Looking at the code, it seems fine - there isn't really a way to clear a weak map, as it by design does not hold references to it's entries, so there is no map.clear() type functionality 🤔 Also, I don't really see how/why this would lead to failure like this.

Just to rule this out, could you try running this with adjusted code like this:

private nodeMap = new Map();
// ...
private clear() {
  this.nodeMap.clear();
}

That's the only thing I could really think of there 🤔

[Clinik]

@mydea Thanks for the answer!
Yes, the code seems to be fine, also i didn't see any relevant error/logs on native side. Maybe the issue is not even with the WeakMap itself, but some usage, but i couldn't understand that part of the code.

I will try this when i get back to the office and let you know.

[billyvg]

@Clinik To clarify, where is periodicallyClear being called? Nevermind I see it now -- I wonder if this would help: rrweb-io/rrweb#1328

[mydea]

this makes sense, seems like a good improvement to get in!