feat(replays): add ability to travel to previous and next replay #102583
+200
−35
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…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.
github-actions
bot
added
the
Scope: Frontend
jerryzhou196
changed the title
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #102583 +/- ##
===========================================
+ Coverage 79.46% 80.66% +1.19%
===========================================
Files 9225 9241 +16
Lines 394205 393373 -832
Branches 25104 25052 -52
===========================================
+ Hits 313252 317311 +4059
+ Misses 80505 75600 -4905
- Partials 448 462 +14 |
…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.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
billyvg
reviewed
Nov 5, 2025
billyvg
reviewed
Nov 5, 2025
static/app/views/replays/detail/header/replayDetailsPageBreadcrumbs.tsx
Outdated
Show resolved
Hide resolved
billyvg
reviewed
Nov 5, 2025
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/detail/header/replayDetailsPageBreadcrumbs.tsx
Outdated
Show resolved
Hide resolved
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
static/app/views/replays/detail/body/replayDetailsProviders.tsx
Outdated
Show resolved
Hide resolved
…adcrumbs - Replaced direct usage of location with useRef to store the initial location. - Updated query object construction to utilize the ref, enhancing consistency in query handling.
- Replaced `StyledFlex` with `Flex` for consistency in component usage. - Introduced `StyledDiv` for better styling of the replay link.
…istency - Changed `queryReferrer` from 'replayList' to 'playlist' to align with updated naming conventions. - This change enhances clarity in the query handling logic.
billyvg
reviewed
Nov 13, 2025
static/app/views/replays/detail/body/replayDetailsProviders.tsx
Outdated
Show resolved
Hide resolved
static/app/views/replays/detail/body/replayDetailsProviders.tsx
Outdated
Show resolved
Hide resolved
static/app/views/replays/detail/body/replayDetailsProviders.tsx
Outdated
Show resolved
Hide resolved
static/app/views/replays/detail/header/replayDetailsPageBreadcrumbs.tsx
Outdated
Show resolved
Hide resolved
…yDetailsProviders - Updated query construction in `ReplaySessionColumn` to include `start` and `end` parameters for better playlist navigation. - Renamed `queryReferrer` from 'playlist' to 'replaysPlayList' for consistency across components. - Improved clarity in query handling by explicitly managing playlist parameters in `ReplayDetailsProviders`. - Streamlined the query object to avoid confusion with regular parameters, enhancing maintainability.
- Updated query construction to use `DEFAULT_REPLAY_LIST_SORT` for sorting, ensuring consistent default behavior. - Removed conditional check for `playlistSort` to streamline query handling logic. - Enhanced the `enabled` flag in the query to focus on essential parameters, improving clarity in data fetching.
…sPageBreadcrumbs - Replaced `StyledDiv` with `ShortId` to better represent the component's purpose. - Updated the component usage in the breadcrumb section to maintain consistency and improve readability.
- Modified the query sorting logic to use `DEFAULT_REPLAY_LIST_SORT` when `playlistSort` is an empty string, ensuring consistent default behavior. - This change enhances the clarity of the query construction process in the component.
static/app/views/replays/detail/body/replayDetailsProviders.tsx
Outdated
Show resolved
Hide resolved
…ter clarity - Updated the query sorting logic to handle cases where `playlistSort` is undefined or an empty string, ensuring consistent default behavior with `DEFAULT_REPLAY_LIST_SORT`. - This change enhances the clarity and robustness of the query construction process.
|
|
||
| // We use a ref to store the initial location so that we can use it to navigate to the previous and next replays | ||
| // without dirtying the URL with the URL params from the tabs navigation. | ||
| const initialLocation = useRef(location); |
Contributor
There was a problem hiding this comment.
Bug: Replay Navigation Loses Query Context
The initialLocation ref captures the location only on component mount and never updates. When navigating between replays using next/previous buttons, the component doesn't remount (only the route param changes), so subsequent navigations will incorrectly use query parameters from the very first replay viewed rather than preserving the query context as you move through the playlist.
Member
There was a problem hiding this comment.
We talked about this offline and agreed this is fine - I'm re-thinking this because I think this will be a maintenance nightmare down the road. It might be better to be explicit about the query params we want to preserve. Let's not change anything on this PR for now, but let's talk about it some more after this gets merged.
- Updated the parseStatsPeriod function to include an optional UTC parameter, allowing for more flexible date handling. - Adjusted the ReplaySessionColumn to utilize the new UTC functionality when parsing the stats period, improving the accuracy of date calculations.
| true | ||
| ); | ||
| detailsTabQuery.playlistStart = playlistStart; | ||
| detailsTabQuery.playlistEnd = playlistEnd; |
Contributor
There was a problem hiding this comment.
Bug: Time Zone Mismatch Causes Data Errors
When statsPeriod is converted to absolute timestamps using UTC via parseStatsPeriod(..., undefined, true), the resulting playlistStart and playlistEnd are UTC timestamps. However, the code doesn't set a corresponding utc parameter in detailsTabQuery to indicate this. Without explicitly setting utc: 'true', the API might misinterpret these UTC timestamps as local time, potentially returning incorrect replays from the wrong time range.
…handling - Updated comment in `ReplaySessionColumn` to improve clarity on the manual addition of fields to the query, enhancing code readability.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.