chore: Add missing fields into Replay NetworkRequestData type

packages/replay/src/index.ts

@@ -2,8 +2,11 @@ export { Replay } from './integration';
 export type {
   BreadcrumbFrame,
   BreadcrumbFrameEvent,
+  OptionFrameEvent,
   ReplayFrame,
   ReplayFrameEvent,
   SpanFrame,
   SpanFrameEvent,
-} from './types/replayFrame';
+  EventType,
+} from './types';
+

packages/replay/src/types/index.ts

@@ -2,3 +2,4 @@ export * from './performance';
 export * from './replay';
 export * from './replayFrame';
 export * from './rrweb';
+export type { EventType } from '@sentry-internal/rrweb';

packages/replay/src/types/performance.ts

@@ -1,3 +1,5 @@
+import type { ReplayNetworkRequestData } from './replay';
+
 export type AllPerformanceEntry = PerformancePaintTiming | PerformanceResourceTiming | PerformanceNavigationTiming;
 
 // PerformancePaintTiming and PerformanceNavigationTiming are only available with TS 4.4 and newer
@@ -130,7 +132,7 @@ export interface HistoryData {
   previous: string;
 }
 
-export type AllEntryData = AllPerformanceEntryData | MemoryData | NetworkRequestData | HistoryData;
+export type AllEntryData = AllPerformanceEntryData | MemoryData | NetworkRequestData | ReplayNetworkRequestData | HistoryData;
 
 export interface ReplayPerformanceEntry<T> {
   /**

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';
-import type { EventType } from './rrweb';
-
-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,23 +104,23 @@ interface SlowClickFrameData extends ClickFrameData {
   timeAfterClickFs: number;
   endReason: string;
 }
-interface SlowClickFrame extends BaseReplayFrame {
+interface SlowClickFrame extends BaseBreadcrumbFrame {
   category: 'ui.slowClickDetected';
   data: SlowClickFrameData;
 }
 
 interface OptionFrame {
-  sessionSampleRate: number;
-  errorSampleRate: number;
-  useCompressionOption: boolean;
   blockAllMedia: boolean;
-  maskAllText: boolean;
+  errorSampleRate: number;
   maskAllInputs: boolean;
-  useCompression: boolean;
-  networkDetailHasUrls: boolean;
+  maskAllText: boolean;
   networkCaptureBodies: boolean;
+  networkDetailHasUrls: boolean;
   networkRequestHasHeaders: boolean;
   networkResponseHasHeaders: boolean;
+  sessionSampleRate: number;
+  useCompression: boolean;
+  useCompressionOption: boolean;
 }
 
 export type BreadcrumbFrame =
@@ -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?: undefined | 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 {

packages/replay/src/types/rrweb.ts

@@ -1,18 +1,10 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 
+import type { EventType } from '@sentry-internal/rrweb';
+
 type blockClass = string | RegExp;
 type maskTextClass = string | RegExp;
 
-export enum EventType {
-  DomContentLoaded = 0,
-  Load = 1,
-  FullSnapshot = 2,
-  IncrementalSnapshot = 3,
-  Meta = 4,
-  Custom = 5,
-  Plugin = 6,
-}
-
 /**
  * This is a partial copy of rrweb's eventWithTime type which only contains the properties
  * we specifcally need in the SDK.

packages/replay/src/util/addEvent.ts

@@ -1,8 +1,8 @@
+import { EventType } from '@sentry-internal/rrweb';
 import { getCurrentHub } from '@sentry/core';
 import { logger } from '@sentry/utils';
 
 import type { AddEventResult, RecordingEvent, ReplayContainer, ReplayFrameEvent } from '../types';
-import { EventType } from '../types/rrweb';
 import { timestampToMs } from './timestampToMs';
 
 function isCustomEvent(event: RecordingEvent): event is ReplayFrameEvent {

packages/replay/src/util/handleRecordingEmit.ts

@@ -1,8 +1,8 @@
+import { EventType } from '@sentry-internal/rrweb';
 import { logger } from '@sentry/utils';
 
 import { saveSession } from '../session/saveSession';
 import type { AddEventResult, OptionFrameEvent, RecordingEvent, ReplayContainer } from '../types';
-import { EventType } from '../types/rrweb';
 import { addEvent } from './addEvent';
 
 type RecordingEmitCallback = (event: RecordingEvent, isCheckout?: boolean) => void;