sentry
sentry copied to clipboard
Published
20 hours ago •
getsentry
getsentry
[Replay Details] Implement support for visualizing 'gaps' in the replay timeline
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 & foreground events. But it should be applicable to use web focus & blur events just as easily, we can decide on that later.
### Tasks
- [x] Create gaps in timeline
- [x] Add in tooltip
- [x] Implement gap in segments visualization
- [ ] Refactor tooltip to look like designs (tooltip with time is on top of the timeline + scrubber & hovering on scrubber has same behaviour as timeline))
- [x] [BUG] zooming timeline breaks in https://sentry-sdks.sentry.io/replays/2298b9c818db427cae385baf7945dc5b/?project=5428559&project=5428557&project=5428561&query=&referrer=%2Freplays%2F&statsPeriod=14d&yAxis=count%28%29
