refactor SpanFrame to use a base class and map op to data

Author: ryan953

packages/replay/src/types/replayFrame.ts

@@ -1,9 +1,18 @@
 import type { EventType } from '@sentry-internal/rrweb';
 import type { Breadcrumb, FetchBreadcrumbData, XhrBreadcrumbData } from '@sentry/types';
 
-import type { AllEntryData } from './performance';
-
-interface BaseReplayFrame {
+import type {
+  HistoryData,
+  LargestContentfulPaintData,
+  MemoryData,
+  NavigationData,
+  NetworkRequestData,
+  PaintData,
+  ResourceData,
+} from './performance';
+import type { ReplayNetworkRequestData } from './replay';
+
+interface BaseBreadcrumbFrame {
   timestamp: number;
   /**
    * For compatibility reasons
@@ -29,32 +38,32 @@ interface ConsoleFrameData {
   logger: string;
   arguments?: unknown[];
 }
-interface ConsoleFrame extends BaseReplayFrame {
+interface ConsoleFrame extends BaseBreadcrumbFrame {
   category: 'console';
   level: Breadcrumb['level'];
   message: string;
   data: ConsoleFrameData;
 }
 
 type ClickFrameData = BaseDomFrameData;
-interface ClickFrame extends BaseReplayFrame {
+interface ClickFrame extends BaseBreadcrumbFrame {
   category: 'ui.click';
   message: string;
   data: ClickFrameData;
 }
 
-interface FetchFrame extends BaseReplayFrame {
+interface FetchFrame extends BaseBreadcrumbFrame {
   category: 'fetch';
   type: 'http';
   data: FetchBreadcrumbData;
 }
 
-interface InputFrame extends BaseReplayFrame {
+interface InputFrame extends BaseBreadcrumbFrame {
   category: 'ui.input';
   message: string;
 }
 
-interface XhrFrame extends BaseReplayFrame {
+interface XhrFrame extends BaseBreadcrumbFrame {
   category: 'xhr';
   type: 'http';
   data: XhrBreadcrumbData;
@@ -65,7 +74,7 @@ interface MutationFrameData {
   count: number;
   limit: boolean;
 }
-interface MutationFrame extends BaseReplayFrame {
+interface MutationFrame extends BaseBreadcrumbFrame {
   category: 'replay.mutations';
   data: MutationFrameData;
 }
@@ -77,16 +86,16 @@ interface KeyboardEventFrameData extends BaseDomFrameData {
   altKey: boolean;
   key: string;
 }
-interface KeyboardEventFrame extends BaseReplayFrame {
+interface KeyboardEventFrame extends BaseBreadcrumbFrame {
   category: 'ui.keyDown';
   data: KeyboardEventFrameData;
 }
 
-interface BlurFrame extends BaseReplayFrame {
+interface BlurFrame extends BaseBreadcrumbFrame {
   category: 'ui.blur';
 }
 
-interface FocusFrame extends BaseReplayFrame {
+interface FocusFrame extends BaseBreadcrumbFrame {
   category: 'ui.focus';
 }
 
@@ -95,7 +104,7 @@ interface SlowClickFrameData extends ClickFrameData {
   timeAfterClickFs: number;
   endReason: string;
 }
-interface SlowClickFrame extends BaseReplayFrame {
+interface SlowClickFrame extends BaseBreadcrumbFrame {
   category: 'ui.slowClickDetected';
   data: SlowClickFrameData;
 }
@@ -125,16 +134,68 @@ export type BreadcrumbFrame =
   | FocusFrame
   | SlowClickFrame
   | MutationFrame
-  | BaseReplayFrame;
+  | BaseBreadcrumbFrame;
 
-export interface SpanFrame {
+interface BaseSpanFrame {
   op: string;
   description: string;
   startTimestamp: number;
   endTimestamp: number;
-  data: AllEntryData;
+  data?: Record<string, any>;
 }
 
+interface HistoryFrame extends BaseSpanFrame {
+  data: HistoryData;
+  op: 'navigation.push';
+}
+
+interface LargestContentfulPaintFrame extends BaseSpanFrame {
+  data: LargestContentfulPaintData;
+  op: 'largest-contentful-paint';
+}
+
+interface MemoryFrame extends BaseSpanFrame {
+  data: MemoryData,
+  op: 'memory',
+}
+
+interface NavigationFrame extends BaseSpanFrame {
+  data: NavigationData
+  op: 'navigation.navigate' | 'navigation.reload' | 'navigation.back';
+}
+
+interface NetworkRequestFrame extends BaseSpanFrame {
+  data: NetworkRequestData | ReplayNetworkRequestData;
+  op: 'resource.fetch'
+}
+
+interface PaintFrame extends BaseSpanFrame {
+  data: PaintData;
+  op: 'paint';
+}
+
+interface ResourceFrame extends BaseSpanFrame {
+  data: ResourceData;
+  op:
+    | 'resource.css'
+    | 'resource.iframe'
+    | 'resource.img'
+    | 'resource.link'
+    | 'resource.other'
+    | 'resource.script'
+    | 'resource.xhr';
+}
+
+export type SpanFrame =
+  | BaseSpanFrame
+  | HistoryFrame
+  | LargestContentfulPaintFrame
+  | MemoryFrame
+  | NavigationFrame
+  | NetworkRequestFrame
+  | PaintFrame
+  | ResourceFrame;
+
 export type ReplayFrame = BreadcrumbFrame | SpanFrame;
 
 interface RecordingCustomEvent {