feat(replay): Calculate hydration diff timestamps based on related hydration breadcrumbs

static/app/components/events/eventHydrationDiff/replayDiffContent.tsx

@@ -7,6 +7,7 @@ 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 {
@@ -31,11 +32,7 @@ export default function ReplayDiffContent({event, group, orgSlug, replaySlug}: P
     return null;
   }
 
-  // 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;
+  const {leftOffsetMs, rightOffsetMs} = getReplayDiffOffsetsFromEvent(replay, event);
 
   return (
     <EventDataSection
@@ -44,9 +41,9 @@ export default function ReplayDiffContent({event, group, orgSlug, replaySlug}: P
       actions={
         <OpenReplayComparisonButton
           key="open-modal-button"
-          leftTimestamp={0}
+          leftOffsetMs={leftOffsetMs}
           replay={replay}
-          rightTimestamp={eventTimestampMs}
+          rightOffsetMs={rightOffsetMs}
           size="xs"
         >
           {t('Open Diff Viewer')}
@@ -57,9 +54,9 @@ export default function ReplayDiffContent({event, group, orgSlug, replaySlug}: P
         <ReplayGroupContextProvider groupId={group?.id} eventId={event.id}>
           <ReplayDiff
             defaultTab={DiffType.VISUAL}
-            leftTimestamp={0}
+            leftOffsetMs={leftOffsetMs}
             replay={replay}
-            rightTimestamp={eventTimestampMs}
+            rightOffsetMs={rightOffsetMs}
           />
         </ReplayGroupContextProvider>
       </ErrorBoundary>

static/app/components/replays/breadcrumbs/breadcrumbItem.tsx

@@ -17,6 +17,7 @@ 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';
@@ -63,6 +64,8 @@ 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)}
@@ -114,11 +117,8 @@ function BreadcrumbItem({
             <div>
               <OpenReplayComparisonButton
                 replay={replay}
-                leftTimestamp={frame.offsetMs}
-                rightTimestamp={
-                  (frame.data.mutations.next?.timestamp ?? 0) -
-                  (replay?.getReplay().started_at.getTime() ?? 0)
-                }
+                leftOffsetMs={leftOffsetMs}
+                rightOffsetMs={rightOffsetMs}
                 size="xs"
               >
                 {t('Open Hydration Diff')}

static/app/components/replays/breadcrumbs/openReplayComparisonButton.tsx

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

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 {
-  leftTimestamp: number;
+  leftOffsetMs: number;
   organization: Organization;
   replay: null | ReplayReader;
-  rightTimestamp: number;
+  rightOffsetMs: number;
 }
 
 export default function ReplayComparisonModal({
   Body,
   Header,
-  leftTimestamp,
+  leftOffsetMs,
   organization,
   replay,
-  rightTimestamp,
+  rightOffsetMs,
 }: Props) {
   return (
     <OrganizationContext.Provider value={organization}>
@@ -55,8 +55,8 @@ export default function ReplayComparisonModal({
         </StyledParagraph>
         <ReplayDiff
           replay={replay}
-          leftTimestamp={leftTimestamp}
-          rightTimestamp={rightTimestamp}
+          leftOffsetMs={leftOffsetMs}
+          rightOffsetMs={rightOffsetMs}
         />
       </Body>
     </OrganizationContext.Provider>

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 {
-  leftTimestamp: number;
+  leftOffsetMs: number;
   replay: null | ReplayReader;
-  rightTimestamp: number;
+  rightOffsetMs: number;
   defaultTab?: DiffType;
 }
 
@@ -33,16 +33,16 @@ export enum DiffType {
 
 export default function ReplayDiff({
   defaultTab = DiffType.VISUAL,
-  leftTimestamp,
+  leftOffsetMs,
   replay,
-  rightTimestamp,
+  rightOffsetMs,
 }: Props) {
   const fetching = false;
 
   const [leftBody, setLeftBody] = useState(null);
   const [rightBody, setRightBody] = useState(null);
 
-  let startOffset = leftTimestamp - 1;
+  let startOffset = leftOffsetMs - 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: rightTimestamp + 1}}
+                  initialTimeOffsetMs={{offsetMs: rightOffsetMs + 1}}
                   isFetching={fetching}
                   prefsStrategy={StaticReplayPreferences}
                   replay={replay}
                 >
                   <ComparisonSideWrapper id="rightSide">
-                    {rightTimestamp > 0 ? (
+                    {rightOffsetMs > 0 ? (
                       <ReplaySide
                         selector="#rightSide iframe"
-                        expectedTime={rightTimestamp + 1}
+                        expectedTime={rightOffsetMs + 1}
                         onLoad={setRightBody}
                       />
                     ) : (

static/app/utils/replays/getDiffTimestamps.spec.tsx

@@ -0,0 +1,148 @@
+import {EventFixture} from 'sentry-fixture/event';
+import {ReplayHydrationErrorFrameFixture} from 'sentry-fixture/replay/replayBreadcrumbFrameData';
+import {ReplayBreadcrumbFrameEventFixture} from 'sentry-fixture/replay/replayFrameEvents';
+import {
+  RRWebDOMFrameFixture,
+  RRWebFullSnapshotFrameEventFixture,
+  RRWebIncrementalSnapshotFrameEventFixture,
+  RRWebInitFrameEventsFixture,
+} from 'sentry-fixture/replay/rrweb';
+import {ReplayRecordFixture} from 'sentry-fixture/replayRecord';
+
+import {
+  getReplayDiffOffsetsFromEvent,
+  getReplayDiffOffsetsFromFrame,
+} from 'sentry/utils/replays/getDiffTimestamps';
+import hydrateBreadcrumbs from 'sentry/utils/replays/hydrateBreadcrumbs';
+import hydrateFrames from 'sentry/utils/replays/hydrateFrames';
+import ReplayReader from 'sentry/utils/replays/replayReader';
+import {IncrementalSource, type RawBreadcrumbFrame} from 'sentry/utils/replays/types';
+import type {ReplayError} from 'sentry/views/replays/types';
+
+const START_DATE = new Date('2022-06-15T00:40:00.000Z');
+const INIT_DATE = new Date('2022-06-15T00:40:00.100Z');
+const FULL_DATE = new Date('2022-06-15T00:40:00.200Z');
+const ERROR_DATE = new Date('2022-06-15T00:40:01.000Z'); // errors do not have ms precision
+const CRUMB_1_DATE = new Date('2022-06-15T00:40:01.350Z');
+const INCR_DATE = new Date('2022-06-15T00:40:05.000Z');
+const CRUMB_2_DATE = new Date('2022-06-15T00:40:05.350Z');
+const END_DATE = new Date('2022-06-15T00:50:00.555Z');
+
+const replayRecord = ReplayRecordFixture({
+  started_at: START_DATE,
+  finished_at: END_DATE,
+});
+
+const RRWEB_EVENTS = [
+  ...RRWebInitFrameEventsFixture({
+    timestamp: INIT_DATE,
+  }),
+  RRWebFullSnapshotFrameEventFixture({timestamp: FULL_DATE}),
+  RRWebIncrementalSnapshotFrameEventFixture({
+    timestamp: INCR_DATE,
+    data: {
+      source: IncrementalSource.Mutation,
+      adds: [
+        {
+          node: RRWebDOMFrameFixture({
+            tagName: 'canvas',
+          }),
+          parentId: 0,
+          nextId: null,
+        },
+      ],
+      removes: [],
+      texts: [],
+      attributes: [],
+    },
+  }),
+];
+
+function getMockReplay(
+  rrwebEvents: any[],
+  crumbFrame: undefined | RawBreadcrumbFrame,
+  errors: ReplayError[]
+) {
+  const attachments = [...rrwebEvents];
+
+  if (crumbFrame) {
+    attachments.push(
+      ReplayBreadcrumbFrameEventFixture({
+        timestamp: new Date(crumbFrame.timestamp),
+        data: {
+          payload: crumbFrame,
+        },
+      })
+    );
+  }
+
+  const {rrwebFrames} = hydrateFrames(attachments);
+  const [hydrationCrumb] = hydrateBreadcrumbs(
+    replayRecord,
+    crumbFrame ? [crumbFrame] : [],
+    rrwebFrames
+  );
+
+  const replay = ReplayReader.factory({
+    replayRecord,
+    errors,
+    attachments,
+  });
+
+  return {replay, hydrationCrumb};
+}
+
+describe('getReplayDiffOffsetsFromFrame', () => {
+  it('should return the offset of the requested frame, and the next frame', () => {
+    const hydrationCrumbFrame = ReplayHydrationErrorFrameFixture({
+      timestamp: CRUMB_1_DATE,
+    });
+    const {replay, hydrationCrumb} = getMockReplay(RRWEB_EVENTS, hydrationCrumbFrame, []);
+
+    expect(getReplayDiffOffsetsFromFrame(replay, hydrationCrumb)).toEqual({
+      leftOffsetMs: 1_350, // offset of CRUMB_1_DATE
+      rightOffsetMs: 5_000, // offset of the INCR_DATE
+    });
+  });
+
+  it('should return the offset of the requested frame, and 0 if there is no next frame', () => {
+    const hydrationCrumbFrame = ReplayHydrationErrorFrameFixture({
+      timestamp: CRUMB_2_DATE,
+    });
+    const {replay, hydrationCrumb} = getMockReplay(RRWEB_EVENTS, hydrationCrumbFrame, []);
+
+    expect(getReplayDiffOffsetsFromFrame(replay, hydrationCrumb)).toEqual({
+      leftOffsetMs: 5_350, // offset of CRUMB_2_DATE
+      rightOffsetMs: 0, // no next mutation date, so offset is 0
+    });
+  });
+});
+
+describe('getReplayDiffOffsetsFromEvent', () => {
+  it('should get offsets based on a hydration breadcrumb that occurs within the same second of the error', () => {
+    const hydrationCrumbFrame = ReplayHydrationErrorFrameFixture({
+      timestamp: CRUMB_1_DATE,
+    });
+    const errorEvent = EventFixture({dateCreated: ERROR_DATE.toISOString()});
+    const {replay} = getMockReplay(RRWEB_EVENTS, hydrationCrumbFrame, [
+      errorEvent as any as ReplayError,
+    ]);
+
+    expect(getReplayDiffOffsetsFromEvent(replay!, errorEvent)).toEqual({
+      leftOffsetMs: 1_350, // offset of CRUMB_1_DATE
+      rightOffsetMs: 5_000, // offset of the INCR_DATE
+    });
+  });
+
+  it('should get offsets when no hydration breadcrumb exists', () => {
+    const errorEvent = EventFixture({dateCreated: ERROR_DATE.toISOString()});
+    const {replay} = getMockReplay(RRWEB_EVENTS, undefined, [
+      errorEvent as any as ReplayError,
+    ]);
+
+    expect(getReplayDiffOffsetsFromEvent(replay!, errorEvent)).toEqual({
+      leftOffsetMs: 1_000, // offset of ERROR_DATE
+      rightOffsetMs: 5_000, // offset of the INCR_DATE
+    });
+  });
+});