feat(replay): Gap in replay timeline #73475
Conversation
github-actions
bot
added
the
Scope: Frontend
Bundle ReportChanges will decrease total bundle size by 41.91kB ⬇️
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #73475 +/- ##
==========================================
+ Coverage 78.01% 78.06% +0.04%
==========================================
Files 6635 6645 +10
Lines 296747 296932 +185
Branches 51109 51140 +31
==========================================
+ Hits 231512 231790 +278
+ Misses 58851 58827 -24
+ Partials 6384 6315 -69
|
There was a problem hiding this comment.
new logic & comments look good to me - seems like we have all the cases covered.
- no background/foreground fames --> skip the big while loop, no gaps rendered.
- only background frames for some reason --> we'll only set
start, and it'll be a gap fromstartto the end. - only foreground frames for some reason -->
startnever gets set, and we'll reach the end ofgapFrames. we don't push anything togapCol, so we don't render any gaps. - mix of background/foreground frames --> iterate through the
gapFramesmatching upstartandendto render the gaps, until we reach one of the cases above
(lmk if any of those sound wrong)
|
would be good to test with a few more replays (especially those with multiple gaps) before merging - you can ping @romtsn or @brustolin or @krystofwoldrich to generate some! |
Co-authored-by: Michelle Zhang <[email protected]>
| const totalColumns = Math.floor(width / markerWidth); | ||
| const framesByCol = getFramesByColumn( | ||
| durationMs, | ||
| frames.filter(f => isBackgroundFrame(f) || isForegroundFrame(f)), |
There was a problem hiding this comment.
This type of filter could be put into ReplayReader and memoized. replayTimeline.tsx could call something like replay.getFooFrames() to fetch just the list we need here.
| export function isBackgroundFrame(frame: ReplayFrame): frame is BreadcrumbFrame { | ||
| return frame && 'category' in frame && frame.category === 'app.background'; | ||
| } | ||
|
|
||
| export function isForegroundFrame(frame: ReplayFrame): frame is BreadcrumbFrame { |
There was a problem hiding this comment.
It could be useful if we had more specific types instead of frame is BreadcrumbFrame
There was a problem hiding this comment.
I get type issues when I try to use BackgroundFrame instead :(
|
Here is an Android example replay with multiple app suspensions. Looks good. |
Creates gaps in the timeline between
App in BackgroundandApp in Foregroundframes. If there's noApp in Foregroundframe afterApp in Background, the gap continues to the end of the replay.Example gap:
Example gap to end of replay:
Relates to #71665