ref(replay): Cleanup dead replay code related to non-frame types and utils (#54066)

fixtures/js-stubs/replaySegments.ts

@@ -1,255 +0,0 @@
-import {EventType} from '@sentry-internal/rrweb';
-import {serializedNodeWithId} from '@sentry-internal/rrweb-snapshot';
-
-import type {ReplaySpan as TReplaySpan} from 'sentry/views/replays/types';
-
-type FullSnapshotEvent = {
-  data: {
-    initialOffset: {
-      left: number;
-      top: number;
-    };
-    node: serializedNodeWithId;
-  };
-  timestamp: number;
-  type: EventType.FullSnapshot;
-};
-
-type BaseReplayProps = {
-  timestamp: Date;
-};
-
-export function ReplaySegmentInit({
-  height = 600,
-  href = 'http://localhost/',
-  timestamp = new Date(),
-  width = 800,
-}: BaseReplayProps & {
-  height: number;
-  href: string;
-  width: number;
-}) {
-  return [
-    {
-      type: EventType.DomContentLoaded,
-      timestamp: timestamp.getTime(), // rrweb timestamps are in ms
-    },
-    {
-      type: EventType.Load,
-      timestamp: timestamp.getTime(), // rrweb timestamps are in ms
-    },
-    {
-      type: EventType.Meta,
-      data: {href, width, height},
-      timestamp: timestamp.getTime(), // rrweb timestamps are in ms
-    },
-  ];
-}
-
-export function ReplaySegmentFullsnapshot({
-  timestamp,
-  childNodes,
-}: BaseReplayProps & {childNodes: serializedNodeWithId[]}): [FullSnapshotEvent] {
-  return [
-    {
-      type: EventType.FullSnapshot,
-      timestamp: timestamp.getTime(),
-      data: {
-        initialOffset: {
-          top: 0,
-          left: 0,
-        },
-        node: {
-          type: 0, // NodeType.DocumentType
-          id: 0,
-          childNodes: [
-            ReplayRRWebNode({
-              tagName: 'body',
-              attributes: {
-                style:
-                  'margin:0; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;',
-              },
-              childNodes,
-            }),
-          ],
-        },
-      },
-    },
-  ];
-}
-
-export function ReplaySegmentConsole({timestamp = new Date()}: BaseReplayProps) {
-  return ReplaySegmentBreadcrumb({
-    timestamp,
-    payload: {
-      timestamp: timestamp.getTime() / 1000, // sentry data inside rrweb is in seconds
-      type: 'default',
-      category: 'console',
-      data: {
-        arguments: [
-          './src/pages/template/Header.js\n  Line 14:  The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value.',
-        ],
-        logger: 'console',
-      },
-      level: 'warning',
-      message:
-        './src/pages/template/Header.js\n  Line 14:  The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value.',
-    },
-  });
-}
-
-export function ReplaySegmentNavigation({
-  timestamp = new Date(),
-  hrefFrom = '/',
-  hrefTo = '/profile/',
-}: BaseReplayProps & {hrefFrom: string; hrefTo: string}) {
-  return ReplaySegmentBreadcrumb({
-    timestamp,
-    payload: {
-      timestamp: timestamp.getTime() / 1000, // sentry data inside rrweb is in seconds
-      type: 'default',
-      category: 'navigation',
-      data: {
-        from: hrefFrom,
-        to: hrefTo,
-      },
-    },
-  });
-}
-
-export function ReplaySegmentBreadcrumb({
-  timestamp = new Date(),
-  payload,
-}: BaseReplayProps & {payload: any}) {
-  return [
-    {
-      type: EventType.Custom,
-      timestamp: timestamp.getTime(), // rrweb timestamps are in ms
-      data: {
-        tag: 'breadcrumb',
-        payload,
-      },
-    },
-  ];
-}
-
-export function ReplaySegmentSpan({
-  timestamp = new Date(),
-  payload,
-}: BaseReplayProps & {payload: any}) {
-  return [
-    {
-      type: EventType.Custom,
-      timestamp: timestamp.getTime(), // rrweb timestamps are in ms
-      data: {
-        tag: 'performanceSpan',
-        payload,
-      },
-    },
-  ];
-}
-
-const nextRRWebId = (function () {
-  let __rrwebID = 0;
-  return () => ++__rrwebID;
-})();
-
-export function ReplayRRWebNode({
-  id,
-  tagName,
-  attributes,
-  childNodes,
-  textContent,
-}: {
-  attributes?: Record<string, string>;
-  childNodes?: serializedNodeWithId[];
-  id?: number;
-  tagName?: string;
-  textContent?: string;
-}): serializedNodeWithId {
-  id = id ?? nextRRWebId();
-  if (tagName) {
-    return {
-      type: 2, // NodeType.Element
-      id,
-      tagName,
-      attributes: attributes ?? {},
-      childNodes: childNodes ?? [],
-    };
-  }
-  return {
-    type: 3, // NodeType.Text
-    id,
-    textContent: textContent ?? '',
-  };
-}
-
-export function ReplayRRWebDivHelloWorld() {
-  return ReplayRRWebNode({
-    tagName: 'div',
-    childNodes: [
-      ReplayRRWebNode({
-        tagName: 'h1',
-        attributes: {style: 'text-align: center;'},
-        childNodes: [
-          ReplayRRWebNode({
-            textContent: 'Hello World',
-          }),
-        ],
-      }),
-    ],
-  });
-}
-
-export function ReplaySpanPayload({
-  startTimestamp = new Date(),
-  endTimestamp = new Date(),
-  ...extra
-}: {
-  op: string;
-  data?: Record<string, any>;
-  description?: string;
-  endTimestamp?: Date;
-  startTimestamp?: Date;
-}): TReplaySpan<Record<string, any>> {
-  return {
-    data: {},
-    id: '0',
-    ...extra,
-    startTimestamp: startTimestamp.getTime() / 1000, // in seconds, with ms precision
-    endTimestamp: endTimestamp?.getTime() / 1000, // in seconds, with ms precision
-    timestamp: startTimestamp?.getTime(), // in ms, same as startTimestamp
-  };
-}
-
-export function ReplaySpanPayloadNavigate({
-  description = 'http://test.com',
-  endTimestamp = new Date(),
-  startTimestamp = new Date(),
-}: {
-  // The url goes into the description field
-  description: string;
-  endTimestamp: Date;
-  startTimestamp: Date;
-}) {
-  const duration = endTimestamp.getTime() - startTimestamp.getTime(); // in MS
-  return ReplaySpanPayload({
-    op: 'navigation.navigate',
-    description,
-    startTimestamp,
-    endTimestamp,
-    data: {
-      size: 1149,
-      decodedBodySize: 1712,
-      encodedBodySize: 849,
-      duration,
-      domInteractive: duration - 200,
-      domContentLoadedEventStart: duration - 50,
-      domContentLoadedEventEnd: duration - 48,
-      loadEventStart: duration, // real value would be approx the same
-      loadEventEnd: duration, // real value would be approx the same
-      domComplete: duration, // real value would be approx the same
-      redirectCount: 0,
-    },
-  });
-}

fixtures/js-stubs/types.tsx

@@ -1,8 +1,8 @@
 import {EntryException, ReleaseMeta} from 'sentry/types';
 import type {
+  ReplayError,
   ReplayListRecord,
   ReplayRecord,
-  ReplaySpan,
 } from 'sentry/views/replays/types';
 
 import type {Replay} from './replay';
@@ -10,8 +10,6 @@ import {MockRuleCondition} from './ruleConditions';
 
 type SimpleStub<T = any> = () => T;
 
-type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;
-
 type OverridableStub<Params = any, Result = Params> = (
   params?: Partial<Params>
 ) => Result;
@@ -129,25 +127,9 @@ type TestStubFixtures = {
   Release: (params?: any, healthParams?: any) => any;
   ReleaseMeta: OverridableStub<ReleaseMeta>;
   Replay: typeof Replay;
-  ReplayError: OverridableStub;
+  ReplayError: OverridableStub<ReplayError>;
   ReplayList: OverridableStubList<ReplayListRecord>;
-  ReplayRRWebDivHelloWorld: OverridableStub;
-  ReplayRRWebNode: OverridableStub;
   ReplayRecord: OverridableStub<ReplayRecord>;
-  ReplaySegmentBreadcrumb: OverridableStub;
-  ReplaySegmentConsole: OverridableStub;
-  ReplaySegmentFullsnapshot: OverridableStub;
-  ReplaySegmentInit: OverridableStub;
-  ReplaySegmentNavigation: OverridableStub;
-  ReplaySegmentSpan: OverridableStub;
-  ReplaySpanPayload: OverridableStub<
-    Overwrite<ReplaySpan, {endTimestamp: Date; startTimestamp: Date}>,
-    ReplaySpan
-  >;
-  ReplaySpanPayloadNavigate: OverridableStub<
-    Overwrite<ReplaySpan, {endTimestamp: Date; startTimestamp: Date}>,
-    ReplaySpan
-  >;
   Repository: OverridableStub;
   RepositoryProjectPathConfig: OverridableStub;
   Search: OverridableStub;

static/app/components/events/eventReplay/index.spec.tsx

@@ -13,10 +13,11 @@ jest.mock('sentry/utils/replays/hooks/useReplayOnboarding');
 jest.mock('sentry/utils/replays/hooks/useReplayReader');
 jest.mock('sentry/utils/useProjects');
 
+const now = new Date();
 const mockReplay = ReplayReader.factory({
-  replayRecord: TestStubs.ReplayRecord({}),
+  replayRecord: TestStubs.ReplayRecord({started_at: now}),
   errors: [],
-  attachments: TestStubs.ReplaySegmentInit({}),
+  attachments: TestStubs.Replay.RRWebInitFrameEvents({timestamp: now}),
 });
 
 jest.mocked(useReplayReader).mockImplementation(() => {

static/app/components/events/eventReplay/replayPreview.spec.tsx

@@ -43,7 +43,7 @@ const mockReplay = ReplayReader.factory({
     },
   }),
   errors: [],
-  attachments: TestStubs.ReplaySegmentInit({
+  attachments: TestStubs.Replay.RRWebInitFrameEvents({
     timestamp: new Date('Sep 22, 2022 4:58:39 PM UTC'),
   }),
 });

static/app/components/events/eventReplay/replayPreview.tsx

@@ -9,7 +9,6 @@ import ListItem from 'sentry/components/list/listItem';
 import Placeholder from 'sentry/components/placeholder';
 import {Provider as ReplayContextProvider} from 'sentry/components/replays/replayContext';
 import ReplayPlayer from 'sentry/components/replays/replayPlayer';
-import {relativeTimeInMs} from 'sentry/components/replays/utils';
 import {IconPlay} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -35,19 +34,19 @@ function ReplayPreview({orgSlug, replaySlug, event, onClickOpenReplay}: Props) {
   });
 
   const timeOfEvent = event.dateCreated ?? event.dateReceived;
-  const eventTimestamp = timeOfEvent
+  const eventTimestampMs = timeOfEvent
     ? Math.floor(new Date(timeOfEvent).getTime() / 1000) * 1000
     : 0;
 
   const startTimestampMs = replayRecord?.started_at.getTime() ?? 0;
 
   const initialTimeOffsetMs = useMemo(() => {
-    if (eventTimestamp && startTimestampMs) {
-      return relativeTimeInMs(eventTimestamp, startTimestampMs);
+    if (eventTimestampMs && startTimestampMs) {
+      return Math.abs(eventTimestampMs - startTimestampMs);
     }
 
     return 0;
-  }, [eventTimestamp, startTimestampMs]);
+  }, [eventTimestampMs, startTimestampMs]);
 
   if (fetchError) {
     const reasons = [

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

@@ -12,10 +12,8 @@ import BreadcrumbIcon from 'sentry/components/events/interfaces/breadcrumbs/brea
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
 import ObjectInspector from 'sentry/components/objectInspector';
 import PanelItem from 'sentry/components/panels/panelItem';
-import {getDetails} from 'sentry/components/replays/breadcrumbs/utils';
 import {Tooltip} from 'sentry/components/tooltip';
 import {space} from 'sentry/styles/space';
-import {BreadcrumbType, Crumb} from 'sentry/types/breadcrumbs';
 import getFrameDetails from 'sentry/utils/replays/getFrameDetails';
 import type {ReplayFrame} from 'sentry/utils/replays/types';
 import {isErrorFrame} from 'sentry/utils/replays/types';
@@ -23,13 +21,10 @@ import useProjects from 'sentry/utils/useProjects';
 import IconWrapper from 'sentry/views/replays/detail/iconWrapper';
 import TimestampButton from 'sentry/views/replays/detail/timestampButton';
 
-type MouseCallback = (
-  crumb: Crumb | ReplayFrame,
-  e: React.MouseEvent<HTMLElement>
-) => void;
+type MouseCallback = (frame: ReplayFrame, e: React.MouseEvent<HTMLElement>) => void;
 
 interface BaseProps {
-  crumb: Crumb | ReplayFrame;
+  frame: ReplayFrame;
   onClick: null | MouseCallback;
   startTimestampMs: number;
   className?: string;
@@ -58,25 +53,17 @@ interface WithDimensionChangeProps extends BaseProps {
 
 type Props = NoDimensionChangeProps | WithDimensionChangeProps;
 
-function getCrumbOrFrameData(crumb: Crumb | ReplayFrame) {
-  if ('offsetMs' in crumb) {
-    return {
-      ...getFrameDetails(crumb),
-      projectSlug: isErrorFrame(crumb) ? crumb.data.projectSlug : null,
-      timestampMs: crumb.timestampMs,
-    };
-  }
-  const details = getDetails(crumb);
+function getCrumbOrFrameData(frame: ReplayFrame) {
   return {
-    ...details,
-    timestampMs: crumb.timestamp || '',
-    projectSlug: crumb.type === BreadcrumbType.ERROR ? details.projectSlug : undefined,
+    ...getFrameDetails(frame),
+    projectSlug: isErrorFrame(frame) ? frame.data.projectSlug : null,
+    timestampMs: frame.timestampMs,
   };
 }
 
 function BreadcrumbItem({
   className,
-  crumb,
+  frame,
   expandPaths,
   index,
   onClick,
@@ -87,21 +74,21 @@ function BreadcrumbItem({
   style,
 }: Props) {
   const {color, description, projectSlug, title, type, timestampMs} =
-    getCrumbOrFrameData(crumb);
+    getCrumbOrFrameData(frame);
 
   const handleMouseEnter = useCallback(
-    (e: React.MouseEvent<HTMLElement>) => onMouseEnter && onMouseEnter(crumb, e),
-    [onMouseEnter, crumb]
+    (e: React.MouseEvent<HTMLElement>) => onMouseEnter && onMouseEnter(frame, e),
+    [onMouseEnter, frame]
   );
   const handleMouseLeave = useCallback(
-    (e: React.MouseEvent<HTMLElement>) => onMouseLeave && onMouseLeave(crumb, e),
-    [onMouseLeave, crumb]
+    (e: React.MouseEvent<HTMLElement>) => onMouseLeave && onMouseLeave(frame, e),
+    [onMouseLeave, frame]
   );
   const handleClick = useCallback(
     (e: React.MouseEvent<HTMLElement>) => {
-      onClick?.(crumb, e);
+      onClick?.(frame, e);
     },
-    [crumb, onClick]
+    [frame, onClick]
   );
   const handleDimensionChange = useCallback(
     (path, expandedState, e) =>
@@ -109,10 +96,6 @@ function BreadcrumbItem({
     [index, onDimensionChange]
   );
 
-  // Note: use `crumb.type` here as `getDetails()` will return a type based on
-  // crumb category for presentation purposes. e.g. if we wanted to use an
-  // error icon for a non-Sentry error
-
   return (
     <CrumbItem
       as={onClick ? 'button' : 'span'}

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

@@ -76,7 +76,7 @@ function Event({
 
   const buttons = frames.map((frame, i) => (
     <BreadcrumbItem
-      crumb={frame}
+      frame={frame}
       key={i}
       onClick={handleClick}
       onMouseEnter={handleMouseEnter}

static/app/components/replays/breadcrumbs/utils.spec.tsx

@@ -1,63 +0,0 @@
-import {getTitle} from 'sentry/components/replays/breadcrumbs/utils';
-import {BreadcrumbLevelType, BreadcrumbType} from 'sentry/types/breadcrumbs';
-
-const crumbs = {
-  replayInitCrumb: {
-    type: BreadcrumbType.INIT,
-    timestamp: new Date().toISOString(),
-    level: BreadcrumbLevelType.INFO,
-    message: 'https://example.com',
-    data: {
-      action: 'replay-init',
-      label: 'Start recording',
-      url: 'https://example.com',
-    },
-  },
-  issueCrumb: {
-    type: 'error',
-    level: 'error',
-    category: 'issue',
-    message: 'NotFoundError: GET "/organizations/{orgSlug}/replays/1234/" 404',
-    data: {
-      label: 'ErrorNotFoundError',
-      eventId: '0105d6f5a7844125b92824eb89ad1ae0',
-      groupId: 3913420330,
-      groupShortId: 'JAVASCRIPT-2DA7',
-      project: 'javascript',
-    },
-    timestamp: '2023-05-01T20:44:20+00:00',
-    id: 32,
-    color: 'red300',
-    description: 'Error',
-  },
-
-  navigation: TestStubs.ReplaySegmentNavigation({})[0].data.payload,
-  console: TestStubs.ReplaySegmentConsole({})[0].data.payload,
-
-  customCrumb: {
-    timestamp: '2023-05-03T14:17:08.642Z',
-    type: 'default',
-    message: 'sending get request',
-    data: {
-      fromJs: true,
-    },
-    id: 1,
-    color: 'gray300',
-    description: 'Default',
-    level: 'undefined',
-  },
-};
-
-describe('utils', () => {
-  describe('getTitle', () => {
-    it.each([
-      {crumbName: 'replayInitCrumb', expected: 'Start recording'},
-      {crumbName: 'navigation', expected: 'navigation '},
-      {crumbName: 'console', expected: 'console '},
-      {crumbName: 'issueCrumb', expected: 'ErrorNotFoundError'},
-      {crumbName: 'customCrumb', expected: 'sending get request'},
-    ])('should return a reasonable title. [$crumbName]', ({crumbName, expected}) => {
-      expect(getTitle(crumbs[crumbName])).toBe(expected);
-    });
-  });
-});

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

@@ -1,169 +0,0 @@
-import {getCrumbDescriptionAndColor} from 'sentry/components/events/interfaces/breadcrumbs/utils';
-import {Tooltip} from 'sentry/components/tooltip';
-import {IconWarning} from 'sentry/icons';
-import {t} from 'sentry/locale';
-import {BreadcrumbType, Crumb} from 'sentry/types/breadcrumbs';
-
-// Replay SDK can send `data` that does not conform to our issue/event breadcrumbs
-type MaybeCrumbData = null | Record<string, any>;
-
-function stringifyNodeAttributes(tagName: string, attributes: Record<string, string>) {
-  const attributesEntries = Object.entries(attributes);
-  return `${tagName}${
-    attributesEntries.length
-      ? attributesEntries.map(([attr, val]) => `[${attr}="${val}"]`).join('')
-      : ''
-  }`;
-}
-
-function getColor(crumb: Crumb) {
-  const crumbData: MaybeCrumbData = crumb.data as MaybeCrumbData;
-  if (crumb.category === 'ui.slowClickDetected') {
-    return getCrumbDescriptionAndColor(
-      crumbData!.endReason === 'timeout' ? BreadcrumbType.ERROR : BreadcrumbType.WARNING
-    ).color;
-  }
-
-  return crumb.color;
-}
-
-function getType(crumb: Crumb) {
-  const crumbData: MaybeCrumbData = crumb.data as MaybeCrumbData;
-
-  if (crumb.category === 'ui.slowClickDetected') {
-    return crumbData!.endReason === 'timeout'
-      ? BreadcrumbType.ERROR
-      : BreadcrumbType.WARNING;
-  }
-
-  return crumb.type;
-}
-
-/**
- * Generate breadcrumb descriptions based on type
- */
-export function getDescription(crumb: Crumb) {
-  const crumbData: MaybeCrumbData = crumb.data as MaybeCrumbData;
-
-  if (crumbData && typeof crumbData === 'object' && 'action' in crumbData) {
-    switch (crumbData.action) {
-      case 'largest-contentful-paint':
-        if (typeof crumbData?.value === 'number') {
-          return `${Math.round(crumbData.value)}ms`;
-        }
-
-        if (crumbData?.duration !== undefined) {
-          // this means user is using an old SDK where LCP values are not
-          // always correct. Prompt them to upgrade
-          return (
-            <Tooltip
-              title={t(
-                'This replay uses a SDK version that is subject to inaccurate LCP values. Please upgrade to the latest version for best results if you have not already done so.'
-              )}
-            >
-              <IconWarning />
-            </Tooltip>
-          );
-        }
-        break;
-      default:
-        break;
-    }
-  }
-
-  if (crumb.category === 'ui.slowClickDetected') {
-    const node = crumbData!.node as {attributes: Record<string, string>; tagName: string};
-    if (crumbData!.endReason !== 'timeout') {
-      return t(
-        'Click on %s took %s ms to have a visible effect',
-        stringifyNodeAttributes(node.tagName, node.attributes),
-        crumbData!.timeAfterClickMs
-      );
-    }
-
-    return t(
-      'Click on %s did not cause a visible effect within %s ms',
-      stringifyNodeAttributes(node.tagName, node.attributes),
-      crumbData!.timeAfterClickMs
-    );
-  }
-
-  if (crumb.category === 'replay.mutations' && !crumbData?.limit) {
-    return t(
-      'A large number of mutations was detected (%s). This can slow down the Replay SDK and impact your customers.',
-      crumbData?.count
-    );
-  }
-
-  // Reached the mutation limit where we stop replays
-  if (crumb.category === 'replay.mutations' && crumbData?.limit) {
-    return t(
-      'A large number of mutations was detected (%s). Replay is now stopped to prevent poor performance for your customer.',
-      crumbData?.count
-    );
-  }
-
-  switch (crumb.type) {
-    case BreadcrumbType.NAVIGATION:
-      return `${crumbData?.to ?? ''}`;
-    case BreadcrumbType.DEFAULT:
-      return crumbData;
-    default:
-      return crumb.message || '';
-  }
-}
-
-/**
- * Get title of breadcrumb
- */
-export function getTitle(crumb: Crumb) {
-  // Supports replay specific breadcrumbs
-  if (
-    typeof crumb.data === 'object' &&
-    crumb.data !== null &&
-    'label' in crumb.data &&
-    crumb.data.label
-  ) {
-    return crumb.data.label;
-  }
-
-  if (!crumb.category) {
-    return crumb.message ?? crumb.description;
-  }
-  const [type, action] = crumb.category.split('.') || [];
-
-  if (action === 'slowClickDetected') {
-    if ((crumb.data as Record<string, unknown> | undefined)?.endReason === 'timeout') {
-      return 'Dead Click';
-    }
-    return 'Slow Click';
-  }
-
-  if (type === 'ui') {
-    return `User ${action || ''}`;
-  }
-  if (type === 'replay') {
-    return `Replay`;
-  }
-  return `${type} ${action || ''}`;
-}
-
-export function getProjectSlug(crumb: Crumb) {
-  if (typeof crumb.data === 'object' && crumb.data !== null && 'project' in crumb.data) {
-    return crumb.data.project;
-  }
-  return null;
-}
-
-/**
- * Generate breadcrumb title + descriptions
- */
-export function getDetails(crumb: Crumb) {
-  return {
-    color: getColor(crumb),
-    type: getType(crumb),
-    title: getTitle(crumb),
-    description: getDescription(crumb),
-    projectSlug: getProjectSlug(crumb),
-  };
-}

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

@@ -4,10 +4,8 @@ import {
   flattenFrames,
   formatTime,
   getFramesByColumn,
-  relativeTimeInMs,
   showPlayerTime,
 } from 'sentry/components/replays/utils';
-// import {BreadcrumbLevelType, BreadcrumbType, Crumb} from 'sentry/types/breadcrumbs';
 import hydrateErrors from 'sentry/utils/replays/hydrateErrors';
 import hydrateSpans from 'sentry/utils/replays/hydrateSpans';
 
@@ -257,16 +255,6 @@ describe('flattenFrames', () => {
   });
 
   const diffMs = 1652309918676;
-  describe('relativeTimeinMs', () => {
-    it('returns relative time in MS', () => {
-      expect(relativeTimeInMs('2022-05-11T23:04:27.576000Z', diffMs)).toEqual(348900);
-    });
-
-    it('returns invalid date if date string is malformed', () => {
-      expect(relativeTimeInMs('202223:04:27.576000Z', diffMs)).toEqual(NaN);
-    });
-  });
-
   describe('showPlayerTime', () => {
     it('returns time formatted for player', () => {
       expect(showPlayerTime('2022-05-11T23:04:27.576000Z', diffMs)).toEqual('05:48');