search

getsentry / sentry

Developer-first error tracking and performance monitoring
https://sentry.io
Other
38.55k stars 4.12k forks source link

[Replay Details] Implement support for visualizing 'gaps' in the replay timeline #71665

Open ryan953 opened 3 months ago

ryan953 commented 3 months ago

Per figma: https://www.figma.com/design/LC8Uhws6ruiNYUkObfqcjv/Specs%3A-Segment-Gaps-in-Mobile-Replay?node-id=0-1&t=9GoyanWjtcULZMIX-0

Image

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
- [ ] 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
bruno-garcia commented 1 month ago

Gaps are currently available for Sentry for dogfooding, and it's based on timestamps of frame breadcrumbs (https://github.com/getsentry/sentry/pull/74406). We'll still look at adding support for gaps when segments are missing.