[Epic] Replay Trace/Perf View: Better Connecting Replays to Transactions

[jas-kas]

https://www.notion.so/FY-24-Q2-Trace-View-Better-Connecting-Replays-to-Transactions-b32f110233c145bbb5c963d4d692de07

Figma:

• Exploring extensions to the existing trace view: https://www.figma.com/file/BkgpCdPfr9AreSIUZLRrWk/Specs%3A-Tracing-Waterfall-View?type=design&node-id=29-14271&mode=design&t=w38JI2CU6CcsK0F3-0

Related:

• Tracing tab should have an Upsell (SaaS) when tracing is disabled #37054

[ryan953]

First version implemented in #54518

[ryan953]

Update:

You may notice that we shipped something very different from what is in the figma.

I think though the new design solves all the problem statements which were identified in that figma, and in a simpler to understand way. What does it solve?

1. Pending time index: we have a purple horizontal line that moves with the player, showing which crumb you’re before/after. Just like the other tabs do.
   (The old trace tab has a vertical purple line that tracks from left to right, following the player)
2. Fast-forward or rewinding: We’ve got timestamps next to each breadcrumb to jump to specific times.
3. Scrolling to catch up to a playing replay: We’re going to have the “back/more” buttons that catherine is building ([Replay Details] Implement 'Jump to current timestamp' buttons on the Console/Network/Error/etc tabs #52926) and since each waterfall is smaller in scope, each span is easier to see (more than 1px wide)
4. Cause of a trace: easier to see beacuse we’re correlating traces to breadcrumbs (based on timestamp, it’s not perfect)
5. Supertrace Duration != replay durtaion: There’s no more supertrace. The supertrace was really full of a lot of empty space. Instead we zoom in on each area where something is happening, and the spaces between are not shown

For the next milestone/iteration, there's still lots to do:

• Add ability to click through to open Trace Details page, show the Event & Trace ID's
• Each trace takes up 100% of the width, so it’s hard to spot that one trace is 5000ms, and another is 300ms. Explore using color to distingish slow/fast transactions?
• There are more interesting filters to add to zoom in on the data:
  • find/exclude txn name
  • show txns that include a specific span
  • show txns above/below specific durations
• expand/collapse spans
  • maybe even limit the number/depth of spans that we show
• page render/performance improvements
  • could do more virtual rendering to better handle scrolling and large waterfalls

cc @Jesse-Box