Inaccurate Replay

[lforst]

Description

The replay in this ticket was reported to be inaccurate: https://sentry.zendesk.com/agent/tickets/129896

[van-duong-d3salonsolution]

Hi,

I was told by Jordan Luse from Sentry technical support to communicate with Sentry engineers through this channel.

The issue appears to be that my app content is not being rendered in Replay videos. Here's how the app loads up: on initial page load, a loading icon is displayed while app data is fetched from backend; once app content is ready, it is placed on top of the loading screen (and icon).

Below is the screenshot of a Replay video where only loading screen is displayed even though mouse movement, user activities, logs, network calls, etc.. are being updated correctly in the side window as user interacts with the app.

Below is the index.html file served on initial load (please remove .txt extension, I appended it to be able to upload the file)

index.html.txt

Additionally, there's no blocking or masking added to the app. I also tried using incognito browser but the issue remains.

The app is built in Angular and uses Angular Material UI.

[chargome]

@van-duong-d3salonsolution can you inspect the content of your replay (you can just access it with your browser dev tools) and check if that seems to be correct?

[van-duong-d3salonsolution]

@van-duong-d3salonsolution can you inspect the content of your replay (you can just access it with your browser dev tools) and check if that seems to be correct?

The DOM appears to be correct (see screenshot) when I inspect the replay content but the video is visually mostly blank (there's mouse movement and loading icon)

[andreiborza]

@van-duong-d3salonsolution could you please share a link to the replay?

[van-duong-d3salonsolution]

@van-duong-d3salonsolution could you please share a link to the replay?

Here's the link to the replay:https://d3-salon-solution.sentry.io/replays/09ebc678a03b466c9796d7cb682af3d5/?environment=staging&project=4507742914936832&query=&referrer=%2Freplays%2F&statsPeriod=14d&yAxis=count%28%29

[andreiborza]

Yea so for some reason #fuse-splash-screen is not cleared in your replay. I wonder if you could try to extract this out into a minimal reproduction repo or stackblitz so that we can investigate further.

For now, you could inspect the replay tree and manually set display: none on the #fuse-splash-screen node. Then you'll at least see the replay.

It looks like we've had this issue in the past also with the fuse splash screen: https://github.com/getsentry/sentry-javascript/issues/7703

cc @billyvg

[van-duong-d3salonsolution]

Yea so for some reason #fuse-splash-screen is not cleared in your replay. I wonder if you could try to extract this out into a minimal reproduction repo or stackblitz so that we can investigate further.

For now, you could inspect the replay tree and manually set display: none on the #fuse-splash-screen node. Then you'll at least see the replay.

It looks like we've had this issue in the past also with the fuse splash screen: #7703

cc @billyvg

@andreiborza here's the link to stackblitz containing the code to reproduce the issue. The one thing I changed in stackblitz's project template is index.htm which I copied from my project Please add display: none to the div on line 263 of index.html to hide the fuse splash screen https://stackblitz.com/edit/angular-nfqwvb?file=src%2Findex.html

[andreiborza]

Thanks!

@billyvg could you take a look at this please?

[billyvg]

I can take a look at this later this week or early next week - @mydea, this could be something I can look at with @chargome

[billyvg]

Yea so for some reason #fuse-splash-screen is not cleared in your replay. I wonder if you could try to extract this out into a minimal reproduction repo or stackblitz so that we can investigate further. For now, you could inspect the replay tree and manually set display: none on the #fuse-splash-screen node. Then you'll at least see the replay. It looks like we've had this issue in the past also with the fuse splash screen: #7703 cc @billyvg

@andreiborza here's the link to stackblitz containing the code to reproduce the issue. The one thing I changed in stackblitz's project template is index.htm which I copied from my project Please add display: none to the div on line 263 of index.html to hide the fuse splash screen https://stackblitz.com/edit/angular-nfqwvb?file=src%2Findex.html

@van-duong-d3salonsolution In your application, what is the logic like to hide the splash?

[van-duong-d3salonsolution]

@billyvg The logic to hide the splash screen is: there is a service that fetches data from our API. The service calls fuseSplashScreenService.show() to display the splash screen before the fetch happens and then calls fuseSplashScreenService.hide() whe the fetch is done. Below is the code where these two methods are called:

Below is the method definition for show

Below is the method definition for hide

FuseSplashScreenService also hides the splash screen on initialization ( the service is initialized by App component). However, since the data fetch takes some time, the splash screen is controlled via the service that fetches the data.

Please let me know if you need anything.

Thank you for your help

[chargome]

thank you @van-duong-d3salonsolution, we'll look into that

[van-duong-d3salonsolution]

Any updates on this issue gentlemen? I just want to follow up, no rush intended.

[chargome]

@van-duong-d3salonsolution we'll keep you informed, this is on our backlog.

[billyvg]

@van-duong-d3salonsolution This is because the web Animation API is not supported by our underlying replay library.

As a workaround you could try either blocking the splash screen, or starting the replay integration after the splash screen disappears

[van-duong-d3salonsolution]

@billyvg Do you have any recommendation for web animation API alternatives that will work with replay?

[billyvg]

@van-duong-d3salonsolution I'm not very familiar with angular so can't recommend any, but anything that uses CSS animations should work.

[van-duong-d3salonsolution]

I resolved the issue by setting the splash screen div css style to display: none to hide it instead of using the animation API. Thank you all for you help!