feat(replay): Skip media interaction frames for replay stepper #80681
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
When generating page HTML using replay data, we step through the entire replay as quickly as possible and take a snapshot of the DOM at specific timestamps. This was causing issues with media elements as the replayer will try to play them. Skip these frames as these interactions are not important when trying to extract page html. Fixes JAVASCRIPT-2NXM
github-actions
bot
added
the
Scope: Frontend
billyvg
commented
Nov 13, 2024
Comment on lines
496
to
502
| getRRWebFramesWithoutMediaInteractions = () => | ||
| this._sortedRRWebEvents.filter( | ||
| ({type, data}) => | ||
| type === EventType.IncrementalSnapshot && | ||
| data.source !== IncrementalSource.MediaInteraction | ||
| ); | ||
|
|
There was a problem hiding this comment.
I might actually filter this in replayStepper instead since it's pretty specific to the stepper than consumers of the reader.
michellewzhang
approved these changes
Nov 13, 2024
c298lee
approved these changes
Nov 13, 2024
billyvg
deleted the
fix-replay-ignore-media-interaction-frames-for-replay-stepper
branch
billyvg
added a commit
that referenced
this pull request
Nov 13, 2024
... and elements that do not disappear. Fixes regression introduced in #80681 The filter statement is incorrect, but beyond that, there is a larger problem in that the replayStepper is somehow affecting the replayer playback instance.
billyvg
added a commit
that referenced
this pull request
Nov 13, 2024
... and elements that do not disappear. Fixes regression introduced in #80681 The filter statement is incorrect, but beyond that, there is a larger problem in that the replayStepper is somehow affecting the replayer playback instance.
billyvg
added a commit
that referenced
this pull request
Nov 22, 2024
... due to shared object references in `replayStepper`. This happens on Replay details page where we have the replayer as well as a tab that uses `replayStepper` (e.g. Breadcrumbs). Both `Replayer` instances were access the same rrweb event object references and because `replayStepper` plays through the entire replay as fast as possible, it ends up mutating the event objects that the player instance later reads. This ends up causing issues in the playback (like screens not updating so the replay appears frozen and broken). I don't know exactly what mutations are happening that cause the playback issues, nor do I know why it only affects Firefox and not Chrome. We now deep clone the events in `createHiddenPlayer` to avoid the above situation. We first realized this was an issue with `replayStepper` due to #80681 and [its fix](#80697). The events in our hidden replayer were affecting our main playback which indicates that there was some shared state happening. h/t @ryan953 for the suggestion re: object mutations! Closes getsentry/sentry-javascript#14381 Closes getsentry/sentry-javascript#12978
harshithadurai
pushed a commit
that referenced
this pull request
Nov 25, 2024
... due to shared object references in `replayStepper`. This happens on Replay details page where we have the replayer as well as a tab that uses `replayStepper` (e.g. Breadcrumbs). Both `Replayer` instances were access the same rrweb event object references and because `replayStepper` plays through the entire replay as fast as possible, it ends up mutating the event objects that the player instance later reads. This ends up causing issues in the playback (like screens not updating so the replay appears frozen and broken). I don't know exactly what mutations are happening that cause the playback issues, nor do I know why it only affects Firefox and not Chrome. We now deep clone the events in `createHiddenPlayer` to avoid the above situation. We first realized this was an issue with `replayStepper` due to #80681 and [its fix](#80697). The events in our hidden replayer were affecting our main playback which indicates that there was some shared state happening. h/t @ryan953 for the suggestion re: object mutations! Closes getsentry/sentry-javascript#14381 Closes getsentry/sentry-javascript#12978
evanh
pushed a commit
that referenced
this pull request
Nov 25, 2024
... due to shared object references in `replayStepper`. This happens on Replay details page where we have the replayer as well as a tab that uses `replayStepper` (e.g. Breadcrumbs). Both `Replayer` instances were access the same rrweb event object references and because `replayStepper` plays through the entire replay as fast as possible, it ends up mutating the event objects that the player instance later reads. This ends up causing issues in the playback (like screens not updating so the replay appears frozen and broken). I don't know exactly what mutations are happening that cause the playback issues, nor do I know why it only affects Firefox and not Chrome. We now deep clone the events in `createHiddenPlayer` to avoid the above situation. We first realized this was an issue with `replayStepper` due to #80681 and [its fix](#80697). The events in our hidden replayer were affecting our main playback which indicates that there was some shared state happening. h/t @ryan953 for the suggestion re: object mutations! Closes getsentry/sentry-javascript#14381 Closes getsentry/sentry-javascript#12978
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
When generating page HTML using replay data, we step through the entire replay as quickly as possible and take a snapshot of the DOM at specific timestamps. This was causing issues with media elements as the replayer will try to play them. Skip these frames as these interactions are not important when trying to extract page html.
Fixes JAVASCRIPT-2NXM