Blank screen until user interaction when replay integration is enabled

Clinik commented 1 month ago

Is there an existing issue for this?

[x] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
[x] I have reviewed the documentation https://docs.sentry.io/
[x] 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

Open the Android app which contains a webview with the angular app, with sentry enabled and with replay integration enabled
Lock the phone's screen
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)
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 commented 1 month ago

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 commented 1 month ago

@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 commented 1 month ago

@Clinik ~To clarify, where is periodicallyClear being called?~ Nevermind I see it now -- I wonder if this would help: https://github.com/rrweb-io/rrweb/pull/1328

mydea commented 1 month ago

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

chargome commented 1 month ago

@Clinik we just released @sentry/angular@8.31.0-beta.0 – could you try if this version fixes your issue?

getsantry[bot] commented 1 week ago

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

getsentry / sentry-javascript