feat(replays): add ability to travel to previous and next replay #102583

jerryzhou196 · 2025-11-03T16:22:14Z

…imestamps Added functionality to display the start and end timestamps of replays in the ReplayTable and ReplayDetails components. This allows users to navigate between replays with context on their timing, improving the overall user experience. Updated ReplayDetailsUserBadge to include navigation buttons for previous and next replays.

codecov · 2025-11-03T16:27:38Z

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
12378	1	12377	10

View the top 1 failed test(s) by shortest run time

TransactionReplays should show a list of replays and have the correct values

Stack Traces | 0.333s run time

Error: expect(element).toHaveAttribute("href", ".../explore/replays/346789a703f6454384f1de473b8b9fcc/?project=1&query=test&referrer=replays%2F&statsPeriod=14d&yAxis=count%28%29") // element.getAttribute("href") === ".../explore/replays/346789a703f6454384f1de473b8b9fcc/?project=1&query=test&referrer=replays%2F&statsPeriod=14d&yAxis=count%28%29"

Expected the element to have attribute:
  href=".../explore/replays/346789a703f6454384f1de473b8b9fcc/?project=1&query=test&referrer=replays%2F&statsPeriod=14d&yAxis=count%28%29"
Received:
  href=".../explore/replays/346789a703f6454384f1de473b8b9fcc/?playlistEnd=2022-09-28T23%3A29%3A13&playlistStart=2022-09-14T23%3A29%3A13&project=1&query=test&referrer=replays%2F&sort=-started_at&yAxis=count%28%29"
    at Object.toHaveAttribute (.../transactionSummary/transactionReplays/index.spec.tsx:243:7)

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

…ed props for next and previous replays in the ReplayDetailsUserBadge component, streamlining the code. Adjusted the loading placeholder height for better visual consistency. This change enhances the component's clarity and performance by eliminating unnecessary complexity

…ation Refactored the ReplayDetails component to use 'undefined' instead of 'null' for next and previous replay checks, enhancing clarity. Updated ReplayDetailsPageBreadcrumbs to include navigation buttons for previous and next replays, improving user experience by allowing seamless navigation between replays. This change streamlines the code and enhances the overall functionality of the replay details view.

Replaced the 'Next' icon in ReplayPlayPauseBar with 'IconChevron' for improved clarity. Refactored ReplayDetailsPageBreadcrumbs to utilize 'ButtonBar' for previous and next replay navigation buttons, enhancing the user interface and experience. This change streamlines the navigation between replays, making it more intuitive for users.

…d components Refactored the ReplayTable component to streamline the handling of replay start times by removing the end timestamp logic. Updated related components to eliminate unnecessary props and improve clarity. This change enhances the overall performance and readability of the replay table, making it easier to manage replay data.

…ameters - Imported `encodeSort` from `eventView` to handle sorting in the replay table. - Updated the `ReplaySessionColumn` to utilize the new sorting mechanism without modifying the URL directly. - Refactored query parameters in `ReplayDetails` to include `playlistStart` and improved handling of the `sort` parameter using `useUrlParams`. - Exported `DEFAULT_SORT` from `useReplayTableSort` for broader accessibility.

static/app/components/replays/table/replayTable.tsx

static/app/views/replays/details.tsx

static/app/components/replays/table/replayTable.tsx

static/app/components/replays/table/replayTableColumns.tsx

static/app/components/replays/table/useReplayTableSort.tsx

static/app/components/replays/table/replayTable.tsx

static/app/views/replays/detail/header/replayDetailsPageBreadcrumbs.tsx

static/app/views/replays/details.tsx

static/app/components/replays/table/replayTableColumns.tsx

static/app/views/replays/details.tsx

Updated the replay table component to calculate and pass the latest replay timestamp as 'end' instead of 'start'. Adjusted related components and queries to reflect this change, ensuring consistency across the application.

static/app/views/replays/details.tsx

static/app/views/replays/detail/header/replayDetailsPageBreadcrumbs.tsx

static/app/components/replays/table/replayTable.tsx

… and end dates when stats period is provided, improving date range handling in replay links.

static/app/views/replays/detail/header/replayDetailsPageBreadcrumbs.tsx

…eplay playlist

…re provided as args

…yDetails to ensure proper sorting and playlist date management

…om location and clarify sort field retrieval

jerryzhou196 · 2025-11-08T16:47:05Z

Testing Notes:

Conditionally renders playlist buttons if feature flag is enabled
Playlists are enabled as long as start, end and sort are passed
Playlists work for:
- absolute / relative times
- differing pages in the index page (first page, second page...)
- sorted columns in desc/asc order
- queries in search bar
- most dead clicks / most rage clicks (disabled for these)
- environment filter

…with playlist_start and playlist_end and sort

…o IconChevron (#102985) In prep for #102583, swap the `IconNext` logo with `IconChevron` to free up for the replay playlist buttons.

github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Nov 3, 2025

jerryzhou196 changed the title ~~feat(replays): Enhance replay details navigation with start and end timestamps~~ feat(replays): add ability to travel to previous and next replay Nov 3, 2025

vercel bot deployed to Preview November 3, 2025 16:24 View deployment

jerryzhou196 added 2 commits November 3, 2025 16:49

vercel bot deployed to Preview November 3, 2025 21:53 View deployment

jerryzhou196 added 2 commits November 3, 2025 17:19

vercel bot deployed to Preview November 3, 2025 22:39 View deployment

jerryzhou196 added 2 commits November 4, 2025 10:09

Merge branch 'master' into replay-carousal

dda816f

Merge branch 'master' into replay-carousal

411821b

vercel bot deployed to Preview November 5, 2025 16:32 View deployment

jerryzhou196 marked this pull request as ready for review November 5, 2025 21:31

jerryzhou196 requested a review from a team as a code owner November 5, 2025 21:31

Merge branch 'master' into replay-carousal

24c97a4

cursor bot reviewed Nov 5, 2025

View reviewed changes

static/app/components/replays/table/replayTable.tsx Outdated Show resolved Hide resolved

vercel bot deployed to Preview November 5, 2025 21:36 View deployment

fix(replay): fix typo in DEFAULT_SORT

d2ecfbf

cursor bot reviewed Nov 5, 2025

View reviewed changes

static/app/views/replays/details.tsx Show resolved Hide resolved

vercel bot deployed to Preview November 5, 2025 22:08 View deployment

billyvg reviewed Nov 5, 2025

View reviewed changes

static/app/components/replays/table/replayTable.tsx Outdated Show resolved Hide resolved

billyvg reviewed Nov 5, 2025

View reviewed changes

static/app/views/replays/details.tsx Show resolved Hide resolved

jerryzhou196 added 2 commits November 6, 2025 10:02

Merge remote-tracking branch 'origin/master' into replay-carousal

8f60afe

cursor bot reviewed Nov 6, 2025

View reviewed changes

vercel bot deployed to Preview November 6, 2025 15:51 View deployment

jerryzhou196 mentioned this pull request Nov 7, 2025

chore(replay): Update icon for next breadcrumb button from IconNext to IconChevron #102985

Merged

jerryzhou196 added 3 commits November 7, 2025 15:58

undo replayController

8d8da21

Merge branch 'master' into replay-carousal

c5ae428

remove export

40b2262

vercel bot deployed to Preview November 7, 2025 21:02 View deployment

vercel bot deployed to Preview November 7, 2025 21:09 View deployment

fix(replayTable): Refactor query generation to include playlist start…

a2646bb

… and end dates when stats period is provided, improving date range handling in replay links.

cursor bot reviewed Nov 7, 2025

View reviewed changes

static/app/views/replays/detail/header/replayDetailsPageBreadcrumbs.tsx Outdated Show resolved Hide resolved

vercel bot deployed to Preview November 7, 2025 21:24 View deployment

feat(replayDetails): move hover state to only be in copy button for r…

3c2e433

…eplay playlist

vercel bot deployed to Preview November 7, 2025 21:37 View deployment

fix(replayTable): move sort fowarding back to index page

525f5d8

vercel bot deployed to Preview November 7, 2025 21:59 View deployment

fix(replayTable): move sort fowarding back to index page

afab360

vercel bot deployed to Preview November 8, 2025 15:28 View deployment

feat(replay): conditionally render if playlIstStart and playlistEnd a…

1682740

…re provided as args

vercel bot deployed to Preview November 8, 2025 15:44 View deployment

jerryzhou196 added 3 commits November 8, 2025 11:06

fix(replay): refactor query handling in ReplaySessionColumn and Repla…

c0c6c01

…yDetails to ensure proper sorting and playlist date management

fix(replayDetails): conditionally render playlistView buttons

cc6b7d0

fix(replaySessionColumn): enhance query handling to include cursor fr…

f5347d6

…om location and clarify sort field retrieval

jerryzhou196 and others added 2 commits November 8, 2025 13:58

fix(groupReplays.spec): update expected query, replacing statsPeriod …

89e9577

…with playlist_start and playlist_end and sort

Merge branch 'master' into replay-carousal

e4d9d75

jerryzhou196 added a commit that referenced this pull request Nov 8, 2025

chore(replay): Update icon for next breadcrumb button from IconNext t…

2d28dad

…o IconChevron (#102985) In prep for #102583, swap the `IconNext` logo with `IconChevron` to free up for the replay playlist buttons.

vercel bot deployed to Preview November 8, 2025 19:03 View deployment

chore(replay): Update icon for next breadcrumb button from IconNext t…

6561e90

…o IconChevron (#102985) In prep for #102583, swap the `IconNext` logo with `IconChevron` to free up for the replay playlist buttons.

vercel bot deployed to Preview November 8, 2025 19:06 View deployment

jerryzhou196 mentioned this pull request Nov 8, 2025

feat(replays) - add playlist support from Issue Details and Insights #103007

Draft

Merge remote-tracking branch 'origin/master' into replay-carousal

0d4f502

vercel bot deployed to Preview November 8, 2025 21:18 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(replays): add ability to travel to previous and next replay #102583

feat(replays): add ability to travel to previous and next replay #102583

jerryzhou196 commented Nov 3, 2025 •

edited

Loading

Uh oh!

codecov bot commented Nov 3, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jerryzhou196 commented Nov 8, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

feat(replays): add ability to travel to previous and next replay #102583

Are you sure you want to change the base?

feat(replays): add ability to travel to previous and next replay #102583

Conversation

jerryzhou196 commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ 1 Tests Failed:

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jerryzhou196 commented Nov 8, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jerryzhou196 commented Nov 3, 2025 •

edited

Loading

codecov bot commented Nov 3, 2025 •

edited

Loading