Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Replay Details] Add rrweb player to render gestures #69817

Closed
Tracked by #70065
michellewzhang opened this issue Apr 26, 2024 · 1 comment · Fixed by #69927
Closed
Tracked by #70065

[Replay Details] Add rrweb player to render gestures #69817

michellewzhang opened this issue Apr 26, 2024 · 1 comment · Fixed by #69927
Assignees
@michellewzhang

Comments

@michellewzhang
Copy link
Member

michellewzhang commented Apr 26, 2024 •
edited

  • we basically need to create a rrweb player alongside the video player
  • the video events will keep going to video plugin and the other non-video events should go to rrweb (like web replays) -- in this case we should only have mouse interaction events, and no DOM
  • though we may need to fake some events to get rrweb to work

implementation details:
const inst = new Replayer(...)
inside of videoReplayer.tsx in the constructor somewhere

a new interface that wraps the existing ones:
image
@michellewzhang michellewzhang mentioned this issue Apr 26, 2024
Open
@michellewzhang michellewzhang self-assigned this Apr 26, 2024
@michellewzhang michellewzhang mentioned this issue Apr 29, 2024
Merged
@bruno-garcia bruno-garcia mentioned this issue May 1, 2024
Open
@michellewzhang
Copy link
Member Author

PR is out but there are bugs with the rrweb gestures when seeking

michellewzhang added a commit that referenced this issue May 8, 2024
@michellewzhang
feat(replay): create a wrapper class to init rrweb player alongside v…
6ed338e 
…ideo replayer (#69927)

Fixes #69817

We have a `videoReplayer`, which uses video events to create the replay
playback for mobile replays. However, in order to see the gestures
(clicks, mouse movements, etc) we need to initialize an rrweb player too
(the one that web replay uses). This PR introduces a
`videoReplayerWithInteractions` classe which initializes both, so that
mobile replays can utilize both players at once.


![image](https://github.com/getsentry/sentry/assets/56095982/8a81da2d-2f8c-4bac-acf0-988c04be08ec)


Another key change we had to make was introducing a fake full snapshot
event after every meta event in order to trick the rrweb player into
thinking we had a node to map the mouse movement to. The rrweb player
essentially fails to render any gesture if it doesn't find an element
with a matching `id` to the `id` inside the `positions` array (see below
picture), so we hardcoded the event to have `id: 0` (which is what the
SDK is sending for the mobile rrweb events). This workaround should be
safe to do since the full snapshot event doesn't affect the video
playback at all.


<img width="264" alt="SCR-20240430-nqts"
src="https://github.com/getsentry/sentry/assets/56095982/45e73a66-2740-4093-94a2-75cc1f3c2954">

Adding a snapshot event after every meta event also fixes the scrubbing
bugs we were experiencing.

Fixing mousetails not showing up involved absolutely positioning the
`replayer-wrapper`.





https://github.com/getsentry/sentry/assets/56095982/4a33cae4-ae1d-43b6-91a3-bf81fb36cf8c
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@michellewzhang michellewzhang

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(replay): create a wrapper class to init rrweb player alongside video replayer getsentry/sentry
1 participant
@michellewzhang