clean ups + add option event

Author: billyvg

packages/replay/src/index.ts

@@ -1,9 +1,9 @@
 export { Replay } from './integration';
 export type {
+  BreadcrumbFrame,
+  BreadcrumbFrameEvent,
   ReplayFrame,
   ReplayFrameEvent,
-  CrumbFrame,
-  CrumbFrameEvent,
   SpanFrame,
   SpanFrameEvent,
 } from './types/replayFrame';

packages/replay/src/types/replay.ts

@@ -7,13 +7,12 @@ import type {
   XhrBreadcrumbHint,
 } from '@sentry/types';
 
+import type { SKIPPED, THROTTLED } from '../util/throttle';
 import type { AllPerformanceEntry } from './performance';
-import type { eventWithTime, recordOptions } from './types/rrweb';
-import type { SKIPPED, THROTTLED } from './util/throttle';
+import type { ReplayFrameEvent } from './replayFrame';
+import type { eventWithTime, recordOptions } from './rrweb';
 
-export * from './types/replayFrame';
-
-export type RecordingEvent = eventWithTime;
+export type RecordingEvent = ReplayFrameEvent | eventWithTime;
 export type RecordingOptions = recordOptions;
 
 export interface SendReplayData {
@@ -54,7 +53,7 @@ export interface WorkerResponse {
 export type AddEventResult = void;
 
 export interface BeforeAddRecordingEvent {
-  (event: RecordingEvent): RecordingEvent | null | undefined;
+  (event: ReplayFrameEvent): ReplayFrameEvent | null | undefined;
 }
 
 export interface ReplayNetworkOptions {

packages/replay/src/types/replayFrame.ts

@@ -1,7 +1,7 @@
-import type { customEvent } from '@sentry-internal/rrweb';
 import type { Breadcrumb, FetchBreadcrumbData, XhrBreadcrumbData } from '@sentry/types';
 
 import type { AllEntryData } from './performance';
+import type { EventType } from './rrweb';
 
 interface BaseReplayFrame {
   timestamp: number;
@@ -10,7 +10,7 @@ interface BaseReplayFrame {
    */
   type: string;
   category: string;
-  data?: Record<string, any>;
+  data?: Record<string, unknown>;
   message?: string;
 }
 
@@ -24,10 +24,10 @@ interface BaseDomFrameData {
   };
 }
 
-/* Crumbs from Core SDK */
+/* Breadcrumbs from Core SDK */
 interface ConsoleFrameData {
   logger: string;
-  arguments?: any[];
+  arguments?: unknown[];
 }
 interface ConsoleFrame extends BaseReplayFrame {
   category: 'console';
@@ -60,7 +60,7 @@ interface XhrFrame extends BaseReplayFrame {
   data: XhrBreadcrumbData;
 }
 
-/* Crumbs from Replay */
+/* Breadcrumbs from Replay */
 interface MutationFrameData {
   count: number;
   limit: boolean;
@@ -100,7 +100,21 @@ interface SlowClickFrame extends BaseReplayFrame {
   data: SlowClickFrameData;
 }
 
-export type CrumbFrame =
+interface OptionFrame {
+  sessionSampleRate: number;
+  errorSampleRate: number;
+  useCompressionOption: boolean;
+  blockAllMedia: boolean;
+  maskAllText: boolean;
+  maskAllInputs: boolean;
+  useCompression: boolean;
+  networkDetailHasUrls: boolean;
+  networkCaptureBodies: boolean;
+  networkRequestHasHeaders: boolean;
+  networkResponseHasHeaders: boolean;
+}
+
+export type BreadcrumbFrame =
   | ConsoleFrame
   | ClickFrame
   | FetchFrame
@@ -121,17 +135,40 @@ export interface SpanFrame {
   data: AllEntryData;
 }
 
-export type ReplayFrame = CrumbFrame | SpanFrame;
+export type ReplayFrame = BreadcrumbFrame | SpanFrame;
+
+interface RecordingCustomEvent {
+  type: EventType.Custom;
+  timestamp: number;
+  data: {
+    tag: string;
+    payload: unknown;
+  };
+}
+
+export interface BreadcrumbFrameEvent extends RecordingCustomEvent {
+  data: {
+    tag: 'breadcrumb';
+    payload: BreadcrumbFrame;
+    /**
+     * This will indicate to backend to additionally log as a metric
+     */
+    metric?: boolean;
+  };
+}
 
-export interface CrumbFrameEventData {
-  tag: 'breadcrumb';
-  payload: CrumbFrame;
+export interface SpanFrameEvent extends RecordingCustomEvent {
+  data: {
+    tag: 'performanceSpan';
+    payload: SpanFrame;
+  };
 }
-export interface SpanFrameEventData {
-  tag: 'performanceSpan';
-  payload: SpanFrame;
+
+export interface OptionFrameEvent extends RecordingCustomEvent {
+  data: {
+    tag: 'options';
+    payload: OptionFrame;
+  };
 }
 
-export type CrumbFrameEvent = customEvent<CrumbFrameEventData>;
-export type SpanFrameEvent = customEvent<SpanFrameEventData>;
-export type ReplayFrameEvent = CrumbFrameEvent | SpanFrameEvent;
+export type ReplayFrameEvent = BreadcrumbFrameEvent | SpanFrameEvent | OptionFrameEvent;

packages/replay/src/util/createBreadcrumb.ts

@@ -1,11 +1,11 @@
-import type { CrumbFrame } from '../types/replayFrame';
+import type { BreadcrumbFrame } from '../types/replayFrame';
 
 /**
  * Create a breadcrumb for a replay.
  */
 export function createBreadcrumb(
-  breadcrumb: Omit<CrumbFrame, 'timestamp' | 'type'> & Partial<Pick<CrumbFrame, 'timestamp'>>,
-): CrumbFrame {
+  breadcrumb: Omit<BreadcrumbFrame, 'timestamp' | 'type'> & Partial<Pick<BreadcrumbFrame, 'timestamp'>>,
+): BreadcrumbFrame {
   return {
     timestamp: Date.now() / 1000,
     type: 'default',

packages/replay/src/util/handleRecordingEmit.ts

@@ -1,7 +1,7 @@
 import { logger } from '@sentry/utils';
 
 import { saveSession } from '../session/saveSession';
-import type { AddEventResult, RecordingEvent, ReplayContainer } from '../types';
+import type { AddEventResult, OptionFrameEvent, RecordingEvent, ReplayContainer } from '../types';
 import { EventType } from '../types/rrweb';
 import { addEvent } from './addEvent';
 
@@ -121,7 +121,7 @@ export function getHandleRecordingEmit(replay: ReplayContainer): RecordingEmitCa
 /**
  * Exported for tests
  */
-export function createOptionsEvent(replay: ReplayContainer): RecordingEvent {
+export function createOptionsEvent(replay: ReplayContainer): OptionFrameEvent {
   const options = replay.getOptions();
   return {
     type: EventType.Custom,

packages/replay/test/integration/beforeAddRecordingEvent.test.ts

@@ -37,7 +37,7 @@ describe('Integration | beforeAddRecordingEvent', () => {
     ({ replay, integration } = await mockSdk({
       replayOptions: {
         beforeAddRecordingEvent: event => {
-          const eventData = event.data as Record<string, any>;
+          const eventData = event.data;
 
           if (eventData.tag === 'breadcrumb' && eventData.payload.category === 'ui.click') {
             return {

packages/replay/test/unit/util/handleRecordingEmit.test.ts

@@ -1,15 +1,15 @@
 import { EventType } from '@sentry-internal/rrweb';
 
 import { BASE_TIMESTAMP } from '../..';
-import type { RecordingEvent } from '../../../src/types';
+import type { OptionFrameEvent } from '../../../src/types';
 import * as SentryAddEvent from '../../../src/util/addEvent';
 import { createOptionsEvent, getHandleRecordingEmit } from '../../../src/util/handleRecordingEmit';
 import { setupReplayContainer } from '../../utils/setupReplayContainer';
 import { useFakeTimers } from '../../utils/use-fake-timers';
 
 useFakeTimers();
 
-let optionsEvent: RecordingEvent;
+let optionsEvent: OptionFrameEvent;
 
 describe('Unit | util | handleRecordingEmit', () => {
   let addEventMock: jest.SpyInstance;