sentry/fixtures/js-stubs/replay/helpers.ts

import * as BreadcrumbFrameData from 'sentry-fixture/replay/replayBreadcrumbFrameData';
import * as ReplayFrameEvents from 'sentry-fixture/replay/replayFrameEvents';
import * as ReplaySpanFrameData from 'sentry-fixture/replay/replaySpanFrameData';

import {SlowClickFrame} from 'sentry/utils/replays/types';

export function ConsoleEvent({timestamp, message}: {timestamp: Date; message?: string}) {
  return ReplayFrameEvents.BreadcrumbFrameEvent({
    timestamp,
    data: {
      payload: BreadcrumbFrameData.ConsoleFrame({
        timestamp,
        message: message ?? 'Hello World',
      }),
    },
  });
}

export function ClickEvent({timestamp}: {timestamp: Date}) {
  return ReplayFrameEvents.BreadcrumbFrameEvent({
    timestamp,
    data: {
      payload: BreadcrumbFrameData.ClickFrame({
        timestamp,
        message: 'nav[aria-label="Primary Navigation"] > div > a#sidebar-item-projects',
        data: {
          nodeId: 42,
        },
      }),
    },
  });
}

export function DeadClickEvent({timestamp}: {timestamp: Date}) {
  return ReplayFrameEvents.BreadcrumbFrameEvent({
    timestamp,
    data: {
      payload: BreadcrumbFrameData.SlowClickFrame({
        timestamp,
        message: 'nav[aria-label="Primary Navigation"] > div > a#sidebar-item-projects',
        data: {
          node: {
            tagName: 'a',
          },
          nodeId: 42,
          url: '',
          timeAfterClickMs: 7000,
          endReason: 'timeout',
        },
      } as SlowClickFrame),
    },
  });
}

export function NavigateEvent({
  startTimestamp,
  endTimestamp,
}: {
  endTimestamp: Date;
  startTimestamp: Date;
}) {
  const duration = endTimestamp.getTime() - startTimestamp.getTime(); // in MS

  return ReplayFrameEvents.SpanFrameEvent({
    timestamp: startTimestamp,
    data: {
      payload: ReplaySpanFrameData.NavigationFrame({
        op: 'navigation.navigate',
        startTimestamp,
        endTimestamp,
        description: '',
        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,
        },
      }),
    },
  });
}

export function MemoryEvent({
  startTimestamp,
  endTimestamp,
}: {
  endTimestamp: Date;
  startTimestamp: Date;
}) {
  return ReplayFrameEvents.SpanFrameEvent({
    timestamp: startTimestamp,
    data: {
      payload: ReplaySpanFrameData.MemoryFrame({
        op: 'memory',
        startTimestamp,
        endTimestamp,
        description: '',
      }),
    },
  });
}