[Replay Details] Implement support for visualizing 'gaps' in the replay timeline #71665
Assignees
Comments
c298lee
added a commit
that referenced
this issue
Jul 2, 2024
Creates gaps in the timeline between `App in Background` and `App in Foreground` frames. If there's no `App in Foreground` frame after `App in Background`, the gap continues to the end of the replay. Example gap: <img width="1368" alt="image" src="https://github.com/getsentry/sentry/assets/55311782/53600ccf-bbf0-4360-9fcc-e211f9a340f1"> Example gap to end of replay: <img width="1368" alt="image" src="https://github.com/getsentry/sentry/assets/55311782/e59fcb34-451e-47d2-96ad-00e7a37fa1c8"> Relates to #71665 --------- Co-authored-by: Michelle Zhang <[email protected]>
c298lee
added a commit
that referenced
this issue
Jul 3, 2024
Adds tooltip to the timeline gap. Also prevents you from clicking on the timeline when there are gaps (only applies to timeline not scrubber)  Relates to #71665
c298lee
added a commit
that referenced
this issue
Jul 19, 2024
Refactors replay timeline gaps to use frame timestamps and styles `left` and `width` instead of frame columns. Using timestamps instead of the frame column makes it line up with breadcrumbs better. Switching to styling `left` and `width` instead of the range of frames also fixed the gap bug when zooming in on the timeline. Also modified the gap logic: When there's a background frame, a gap is created until the next frame that's not a background frame or error frame. In most cases it will be the foreground frame, but in cases of bad data it could be any other replay frame. Before:  After:  The gap is now a consistent `div` so there's no weird spots that the gap doesn't cover. Additionally, the gap ends as soon as there's a frame even if it isn't a foreground frame, which is more accurate. Relates to #71665
|
Gaps are currently available for Sentry for dogfooding, and it's based on timestamps of frame breadcrumbs (#74406). |
c298lee
added a commit
that referenced
this issue
Oct 17, 2024
Timeline gaps based on gaps in video events instead of background and foreground frames Example: <img width="1488" alt="image" src="https://github.com/user-attachments/assets/eb23a788-433c-442f-803d-05aeff0ead5e"> relates to #71665
|
Timeline gaps are based on video events as of #79274. Currently all gaps are visible on the timeline for the SDK team to see how often there's gaps in the video. Before releasing this feature, this would need to be revisited to ensure that the gaps shown don't cause any confusion (probably by implementing a minimum gap time) |
harshithadurai
pushed a commit
that referenced
this issue
Oct 19, 2024
Timeline gaps based on gaps in video events instead of background and foreground frames Example: <img width="1488" alt="image" src="https://github.com/user-attachments/assets/eb23a788-433c-442f-803d-05aeff0ead5e"> relates to #71665
cmanallen
pushed a commit
that referenced
this issue
Oct 23, 2024
Timeline gaps based on gaps in video events instead of background and foreground frames Example: <img width="1488" alt="image" src="https://github.com/user-attachments/assets/eb23a788-433c-442f-803d-05aeff0ead5e"> relates to #71665
|
Gaps are looking good in general but we'll verify the dev experience in react native before GA'ing |
|
Consider closing this issue if we're just waiting on GA. |
|
Closing as this has been GA'd |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Per figma: https://www.figma.com/design/LC8Uhws6ruiNYUkObfqcjv/Specs%3A-Segment-Gaps-in-Mobile-Replay?node-id=0-1&t=9GoyanWjtcULZMIX-0
There might be cases where the 'gap' still has events inside it. Therefore the gap should be rendered behind all other content, including the 'ticks' within the timeline.
Initially the gap should be merged with support for mobile
background&foregroundevents. But it should be applicable to use webfocus&blurevents just as easily, we can decide on that later.Tasks
The text was updated successfully, but these errors were encountered: