fix: Update session player (#395)

* Replace react-slider with mantine's slider + custom markers for better performance * Fix bug when opening a session replay with a ?ts param shows the first frame instead of correct frame at `ts` * abort loading events when navigating off the page before https://github.com/hyperdxio/hyperdx/assets/20255948/195ce791-2d31-4ae4-9700-0ff52f021171 after https://github.com/hyperdxio/hyperdx/assets/20255948/8ec31ff4-c3c1-4c0d-9f04-29c123e9444f
hyperdxio · May 12, 2024 · 6d99e3b · 6d99e3b
1 parent 9c4ef43
commit 6d99e3b
Show file tree

Hide file tree

Showing 11 changed files with 253 additions and 280 deletions.
diff --git a/.changeset/flat-cups-invite.md b/.changeset/flat-cups-invite.md
@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+New performant session replay playbar component
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -72,7 +72,6 @@
  "react-query": "^3.39.1",
  "react-reflex": "^4.0.9",
  "react-select": "^5.7.0",
- "react-slider": "^2.0.1",
  "react-sliding-pane": "^7.3.0",
  "react-sortable-hoc": "^2.0.0",
  "react-syntax-highlighter": "^15.4.5",
@@ -109,7 +108,6 @@
  "@types/react-datepicker": "^4.10.0",
  "@types/react-dom": "^18.2.18",
  "@types/react-grid-layout": "^1.3.2",
- "@types/react-slider": "^1.3.1",
  "@types/react-syntax-highlighter": "^13.5.2",
  "@types/react-table": "^7.7.14",
  "@types/react-virtualized-auto-sizer": "^1.0.1",

diff --git a/packages/app/src/AppNav.tsx b/packages/app/src/AppNav.tsx
@@ -476,7 +476,7 @@ function SearchInput({
  placeholder={placeholder}
  value={value}
  onChange={e => onChange(e.currentTarget.value)}
- leftSection={<i className="bi bi-search fs-8 ps-1" text-slate-400 />}
+ leftSection={<i className="bi bi-search fs-8 ps-1 text-slate-400" />}
  onKeyDown={handleKeyDown}
  rightSection={
  value ? (

diff --git a/packages/app/src/DOMPlayer.tsx b/packages/app/src/DOMPlayer.tsx
@@ -53,7 +53,7 @@ export default function DOMPlayer({
 
  let currentRrwebEvent = '';
 
- const { isFetching: isSearchResultsFetching } = useSearchEventStream(
+ const { isFetching: isSearchResultsFetching, abort } = useSearchEventStream(
  {
  apiUrlPath: `/sessions/${sessionId}/rrweb`,
  q: '',
@@ -219,21 +219,7 @@ export default function DOMPlayer({
  replayer.current?.setConfig({ speed: playerSpeed, skipInactive });
  }
  }
- }, [playerState, playerSpeed, skipInactive]);
-
- // Set player to the correct time based on focus
- useEffect(() => {
- if (focus?.setBy !== 'player' && replayer.current != null) {
- pause(
- focus?.ts == null
- ? 0
- : focus?.ts - replayer.current.getMetaData().startTime,
- );
- if (playerState === 'playing') {
- play();
- }
- }
- }, [focus, pause, setPlayerState, playerState, play]);
+ }, [playerState, playerSpeed, skipInactive, pause, play]);
 
  const handleResize = useCallback(() => {
  if (wrapper.current == null || playerContainer.current == null) {
@@ -262,6 +248,7 @@ export default function DOMPlayer({
  handleResize();
  }, [resizeKey, handleResize]);
 
+ const [isReplayerInitialized, setIsReplayerInitialized] = useState(false);
  // Set up player
  useEffect(() => {
  if (
@@ -281,6 +268,7 @@ export default function DOMPlayer({
  showWarning: debug,
  skipInactive: true,
  });
+ setIsReplayerInitialized(true);
 
  if (debug) {
  // @ts-ignore
@@ -334,19 +322,51 @@ export default function DOMPlayer({
  debug,
  ]);
 
+ // Set player to the correct time based on focus
+ useEffect(() => {
+ if (
+ !isInitialEventsLoaded ||
+ !isReplayerInitialized ||
+ lastEventTsLoaded < (focus?.ts ? focus.ts + 1000 : Infinity)
+ ) {
+ return;
+ }
+ if (focus?.setBy !== 'player' && replayer.current != null) {
+ pause(
+ focus?.ts == null
+ ? 0
+ : focus?.ts - replayer.current.getMetaData().startTime,
+ );
+ handleResize();
+ if (playerState === 'playing') {
+ play();
+ }
+ }
+ }, [
+ focus,
+ pause,
+ setPlayerState,
+ playerState,
+ play,
+ isInitialEventsLoaded,
+ isReplayerInitialized,
+ handleResize,
+ lastEventTsLoaded,
+ ]);
+
  useEffect(() => {
  return () => {
  if (replayer.current != null) {
  replayer.current?.destroy();
  replayer.current = null;
  }
+ abort();
  };
  }, []);
 
  const isLoading = isInitialEventsLoaded === false && isSearchResultsFetching;
  // TODO: Handle when ts is set to a value that's outside of this session
  const isBuffering =
- playerState === 'playing' &&
  isReplayFullyLoaded === false &&
  (replayer.current?.getMetaData()?.endTime ?? 0) < (focus?.ts ?? 0);