Revert "feat(replay): Calculate hydration diff timestamps based on re…

…lated hydration breadcrumbs (#72561)" This reverts commit d29adfe. Co-authored-by: michellewzhang <56095982+michellewzhang@users.noreply.github.com>
getsentry · Jun 19, 2024 · 986296c · 986296c
1 parent d29adfe
commit 986296c
Show file tree

Hide file tree

Showing 13 changed files with 65 additions and 311 deletions.
diff --git a/static/app/components/events/eventHydrationDiff/replayDiffContent.tsx b/static/app/components/events/eventHydrationDiff/replayDiffContent.tsx
@@ -7,7 +7,6 @@ import {ReplayGroupContextProvider} from 'sentry/components/replays/replayGroupC
 import {t} from 'sentry/locale';
 import type {Event} from 'sentry/types/event';
 import type {Group} from 'sentry/types/group';
-import {getReplayDiffOffsetsFromEvent} from 'sentry/utils/replays/getDiffTimestamps';
 import useReplayReader from 'sentry/utils/replays/hooks/useReplayReader';
 
 interface Props {
@@ -32,7 +31,11 @@ export default function ReplayDiffContent({event, group, orgSlug, replaySlug}: P
     return null;
   }
 
-  const {leftOffsetMs, rightOffsetMs} = getReplayDiffOffsetsFromEvent(replay, event);
+  // TODO: base the event timestamp off the replay data itself.
+  const startTimestampMS =
+    'startTimestamp' in event ? event.startTimestamp * 1000 : undefined;
+  const timeOfEvent = event.dateCreated ?? startTimestampMS ?? event.dateReceived;
+  const eventTimestampMs = timeOfEvent ? Math.floor(new Date(timeOfEvent).getTime()) : 0;
 
   return (
     <EventDataSection
@@ -41,9 +44,9 @@ export default function ReplayDiffContent({event, group, orgSlug, replaySlug}: P
       actions={
         <OpenReplayComparisonButton
           key="open-modal-button"
-          leftOffsetMs={leftOffsetMs}
+          leftTimestamp={0}
           replay={replay}
-          rightOffsetMs={rightOffsetMs}
+          rightTimestamp={eventTimestampMs}
           size="xs"
         >
           {t('Open Diff Viewer')}
@@ -54,9 +57,9 @@ export default function ReplayDiffContent({event, group, orgSlug, replaySlug}: P
         <ReplayGroupContextProvider groupId={group?.id} eventId={event.id}>
           <ReplayDiff
             defaultTab={DiffType.VISUAL}
-            leftOffsetMs={leftOffsetMs}
+            leftTimestamp={0}
             replay={replay}
-            rightOffsetMs={rightOffsetMs}
+            rightTimestamp={eventTimestampMs}
           />
         </ReplayGroupContextProvider>
       </ErrorBoundary>

diff --git a/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx b/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx
@@ -17,7 +17,6 @@ import {Tooltip} from 'sentry/components/tooltip';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Extraction} from 'sentry/utils/replays/extractDomNodes';
-import {getReplayDiffOffsetsFromFrame} from 'sentry/utils/replays/getDiffTimestamps';
 import getFrameDetails from 'sentry/utils/replays/getFrameDetails';
 import type {ErrorFrame, FeedbackFrame, ReplayFrame} from 'sentry/utils/replays/types';
 import {isErrorFrame, isFeedbackFrame} from 'sentry/utils/replays/types';
@@ -64,8 +63,6 @@ function BreadcrumbItem({
 
   const forceSpan = 'category' in frame && FRAMES_WITH_BUTTONS.includes(frame.category);
 
-  const {leftOffsetMs, rightOffsetMs} = getReplayDiffOffsetsFromFrame(replay, frame);
-
   return (
     <CrumbItem
       data-is-error-frame={isErrorFrame(frame)}
@@ -117,8 +114,11 @@ function BreadcrumbItem({
             <div>
               <OpenReplayComparisonButton
                 replay={replay}
-                leftOffsetMs={leftOffsetMs}
-                rightOffsetMs={rightOffsetMs}
+                leftTimestamp={frame.offsetMs}
+                rightTimestamp={
+                  (frame.data.mutations.next?.timestamp ?? 0) -
+                  (replay?.getReplay().started_at.getTime() ?? 0)
+                }
                 size="xs"
               >
                 {t('Open Hydration Diff')}

diff --git a/static/app/components/replays/breadcrumbs/openReplayComparisonButton.tsx b/static/app/components/replays/breadcrumbs/openReplayComparisonButton.tsx
@@ -14,17 +14,17 @@ const LazyComparisonModal = lazy(
 
 interface Props {
   children: ReactNode;
-  leftOffsetMs: number;
+  leftTimestamp: number;
   replay: null | ReplayReader;
-  rightOffsetMs: number;
+  rightTimestamp: number;
   size?: ButtonProps['size'];
 }
 
 export function OpenReplayComparisonButton({
   children,
-  leftOffsetMs,
+  leftTimestamp,
   replay,
-  rightOffsetMs,
+  rightTimestamp,
   size,
 }: Props) {
   const organization = useOrganization();
@@ -59,8 +59,8 @@ export function OpenReplayComparisonButton({
               <LazyComparisonModal
                 replay={replay}
                 organization={organization}
-                leftOffsetMs={leftOffsetMs}
-                rightOffsetMs={rightOffsetMs}
+                leftTimestamp={leftTimestamp}
+                rightTimestamp={rightTimestamp}
                 {...deps}
               />
             </Suspense>

diff --git a/static/app/components/replays/breadcrumbs/replayComparisonModal.tsx b/static/app/components/replays/breadcrumbs/replayComparisonModal.tsx
@@ -11,19 +11,19 @@ import type ReplayReader from 'sentry/utils/replays/replayReader';
 import {OrganizationContext} from 'sentry/views/organizationContext';
 
 interface Props extends ModalRenderProps {
-  leftOffsetMs: number;
+  leftTimestamp: number;
   organization: Organization;
   replay: null | ReplayReader;
-  rightOffsetMs: number;
+  rightTimestamp: number;
 }
 
 export default function ReplayComparisonModal({
   Body,
   Header,
-  leftOffsetMs,
+  leftTimestamp,
   organization,
   replay,
-  rightOffsetMs,
+  rightTimestamp,
 }: Props) {
   return (
     <OrganizationContext.Provider value={organization}>
@@ -55,8 +55,8 @@ export default function ReplayComparisonModal({
         </StyledParagraph>
         <ReplayDiff
           replay={replay}
-          leftOffsetMs={leftOffsetMs}
-          rightOffsetMs={rightOffsetMs}
+          leftTimestamp={leftTimestamp}
+          rightTimestamp={rightTimestamp}
         />
       </Body>
     </OrganizationContext.Provider>

diff --git a/static/app/components/replays/replayDiff.tsx b/static/app/components/replays/replayDiff.tsx
@@ -20,9 +20,9 @@ import type ReplayReader from 'sentry/utils/replays/replayReader';
 const MAX_CLAMP_TO_START = 2000;
 
 interface Props {
-  leftOffsetMs: number;
+  leftTimestamp: number;
   replay: null | ReplayReader;
-  rightOffsetMs: number;
+  rightTimestamp: number;
   defaultTab?: DiffType;
 }
 
@@ -33,16 +33,16 @@ export enum DiffType {
 
 export default function ReplayDiff({
   defaultTab = DiffType.VISUAL,
-  leftOffsetMs,
+  leftTimestamp,
   replay,
-  rightOffsetMs,
+  rightTimestamp,
 }: Props) {
   const fetching = false;
 
   const [leftBody, setLeftBody] = useState(null);
   const [rightBody, setRightBody] = useState(null);
 
-  let startOffset = leftOffsetMs - 1;
+  let startOffset = leftTimestamp - 1;
   // If the error occurs close to the start of the replay, clamp the start offset to 1
   // to help compare with the html provided by the server, This helps with some errors on localhost.
   if (startOffset < MAX_CLAMP_TO_START) {
@@ -96,16 +96,16 @@ export default function ReplayDiff({
                 </ReplayContextProvider>
                 <ReplayContextProvider
                   analyticsContext="replay_comparison_modal_right"
-                  initialTimeOffsetMs={{offsetMs: rightOffsetMs + 1}}
+                  initialTimeOffsetMs={{offsetMs: rightTimestamp + 1}}
                   isFetching={fetching}
                   prefsStrategy={StaticReplayPreferences}
                   replay={replay}
                 >
                   <ComparisonSideWrapper id="rightSide">
-                    {rightOffsetMs > 0 ? (
+                    {rightTimestamp > 0 ? (
                       <ReplaySide
                         selector="#rightSide iframe"
-                        expectedTime={rightOffsetMs + 1}
+                        expectedTime={rightTimestamp + 1}
                         onLoad={setRightBody}
                       />
                     ) : (

diff --git a/static/app/utils/replays/getDiffTimestamps.spec.tsx b/static/app/utils/replays/getDiffTimestamps.spec.tsx