add helpers

Author: Lms24

packages/integration-tests/utils/helpers.ts

@@ -17,8 +17,8 @@ export const envelopeParser = (request: Request | null): unknown[] => {
   });
 };
 
-export const envelopeRequestParser = (request: Request | null): Event => {
-  return envelopeParser(request)[2] as Event;
+export const envelopeRequestParser = (request: Request | null, envelopeIndex = 2): Event => {
+  return envelopeParser(request)[envelopeIndex] as Event;
 };
 
 export const envelopeHeaderRequestParser = (request: Request | null): EventEnvelopeHeaders => {

packages/integration-tests/utils/replayEventTemplates.ts

@@ -0,0 +1,112 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { expect } from '@playwright/test';
+import { SDK_VERSION } from '@sentry/browser';
+import type { ReplayEvent } from '@sentry/types';
+
+const DEFAULT_REPLAY_EVENT = {
+  type: 'replay_event',
+  timestamp: expect.any(Number),
+  error_ids: [],
+  trace_ids: [],
+  urls: [expect.stringContaining('/dist/index.html')],
+  replay_id: expect.stringMatching(/\w{32}/),
+  replay_start_timestamp: expect.any(Number),
+  segment_id: 0,
+  replay_type: 'session',
+  event_id: expect.stringMatching(/\w{32}/),
+  environment: 'production',
+  sdk: {
+    integrations: [
+      'InboundFilters',
+      'FunctionToString',
+      'TryCatch',
+      'Breadcrumbs',
+      'GlobalHandlers',
+      'LinkedErrors',
+      'Dedupe',
+      'HttpContext',
+      'Replay',
+    ],
+    version: SDK_VERSION,
+    name: 'sentry.javascript.browser',
+  },
+  sdkProcessingMetadata: {},
+  request: {
+    url: expect.stringContaining('/dist/index.html'),
+    headers: {
+      'User-Agent': expect.stringContaining(''),
+    },
+  },
+  platform: 'javascript',
+  contexts: { replay: { session_sample_rate: 1, error_sample_rate: 0 } },
+};
+
+/**
+ * Creates a ReplayEvent object with the default values merged with the customExpectedReplayEvent.
+ * This is useful for testing multi-segment replays to not repeat most of the properties that don't change
+ * throughout the replay segments.
+ *
+ * Note: The benfit of this approach over expect.objectContaining is that,
+ *       we'll catch if properties we expect to stay the same actually change.
+ *
+ * @param customExpectedReplayEvent overwrite the default values with custom values (e.g. segment_id)
+ */
+export function getExpectedReplayEvent(customExpectedReplayEvent: Partial<ReplayEvent> & Record<string, unknown> = {}) {
+  return {
+    ...DEFAULT_REPLAY_EVENT,
+    ...customExpectedReplayEvent,
+  };
+}
+
+/* This is how we expect different kinds of navigation performance span to look: */
+
+export const expectedNavigationPerformanceSpan = {
+  op: 'navigation.navigate',
+  description: '',
+  startTimestamp: expect.any(Number),
+  endTimestamp: expect.any(Number),
+  data: {
+    duration: expect.any(Number),
+    size: expect.any(Number),
+  },
+};
+
+export const expectedMemoryPerformanceSpan = {
+  op: 'memory',
+  description: 'memory',
+  startTimestamp: expect.any(Number),
+  endTimestamp: expect.any(Number),
+  data: {
+    memory: {
+      jsHeapSizeLimit: expect.any(Number),
+      totalJSHeapSize: expect.any(Number),
+      usedJSHeapSize: expect.any(Number),
+    },
+  },
+};
+
+export const expectedLCPPerformanceSpan = {
+  op: 'largest-contentful-paint',
+  description: 'largest-contentful-paint',
+  startTimestamp: expect.any(Number),
+  endTimestamp: expect.any(Number),
+  data: {
+    duration: expect.any(Number),
+    nodeId: expect.any(Number),
+    size: expect.any(Number),
+  },
+};
+
+export const expectedFCPPerformanceSpan = {
+  op: 'paint',
+  description: 'first-contentful-paint',
+  startTimestamp: expect.any(Number),
+  endTimestamp: expect.any(Number),
+};
+
+export const expectedFPPerformanceSpan = {
+  op: 'paint',
+  description: 'first-paint',
+  startTimestamp: expect.any(Number),
+  endTimestamp: expect.any(Number),
+};

packages/integration-tests/utils/replayHelpers.ts

@@ -1,9 +1,18 @@
-import type { ReplayContainer } from '@sentry/replay/build/npm/types/types';
-import type { Event, ReplayEvent } from '@sentry/types';
+import type { RecordingEvent, ReplayContainer } from '@sentry/replay/build/npm/types/types';
+import type { Breadcrumb, Event, ReplayEvent } from '@sentry/types';
 import type { Page, Request } from 'playwright';
 
 import { envelopeRequestParser } from './helpers';
 
+type CustomRecordingEvent = { tag: string; payload: Record<string, unknown> };
+type PerformanceSpan = {
+  op: string;
+  description: string;
+  startTimestamp: number;
+  endTimestamp: number;
+  data: Record<string, number>;
+};
+
 /**
  * Waits for a replay request to be sent by the page and returns it.
  *
@@ -56,3 +65,46 @@ export async function getReplaySnapshot(page: Page): Promise<ReplayContainer> {
 }
 
 export const REPLAY_DEFAULT_FLUSH_MAX_DELAY = 5_000;
+
+export function getReplayEvent(replayRequest: Request): ReplayEvent {
+  const event = envelopeRequestParser(replayRequest);
+  if (!isReplayEvent(event)) {
+    throw new Error('Request is not a replay event');
+  }
+  return event;
+}
+
+/**
+ * Takes an uncompressed replay request and returns the custom recording events,
+ * i.e. the events we emit as type 5 rrweb events
+ *
+ * @param replayRequest
+ * @returns an object containing the replay breadcrumbs and performance spans
+ */
+export function getCustomRecordingEvents(replayRequest: Request): {
+  breadcrumbs: Breadcrumb[];
+  performanceSpans: PerformanceSpan[];
+} {
+  const recordingEvents = envelopeRequestParser(replayRequest, 5) as RecordingEvent[];
+
+  const breadcrumbs = getReplayBreadcrumbs(recordingEvents);
+  const performanceSpans = getReplayPerformanceSpans(recordingEvents);
+  return { breadcrumbs, performanceSpans };
+}
+
+function getAllCustomRrwebRecordingEvents(recordingEvents: RecordingEvent[]): CustomRecordingEvent[] {
+  return recordingEvents.filter(event => event.type === 5).map(event => event.data as CustomRecordingEvent);
+}
+
+function getReplayBreadcrumbs(recordingEvents: RecordingEvent[], category?: string): Breadcrumb[] {
+  return getAllCustomRrwebRecordingEvents(recordingEvents)
+    .filter(data => data.tag === 'breadcrumb')
+    .map(data => data.payload)
+    .filter(payload => !category || payload.category === category);
+}
+
+function getReplayPerformanceSpans(recordingEvents: RecordingEvent[]): PerformanceSpan[] {
+  return getAllCustomRrwebRecordingEvents(recordingEvents)
+    .filter(data => data.tag === 'performanceSpan')
+    .map(data => data.payload) as PerformanceSpan[];
+}