chore: Add missing fields into Replay NetworkRequestData type (#8284)

Before submitting a pull request, please take a look at our

[Contributing](https://github.com/getsentry/sentry-javascript/blob/master/CONTRIBUTING.md)
guidelines and verify:

- [ ] If you've added code that should be tested, please add tests.
- [ ] Ensure your code lints and the test suite passes (`yarn lint`) &
(`yarn test`).

packages/replay/src/index.ts

@@ -2,8 +2,13 @@ export { Replay } from './integration';
 export type {
   BreadcrumbFrame,
   BreadcrumbFrameEvent,
+  OptionFrameEvent,
   ReplayFrame,
   ReplayFrameEvent,
   SpanFrame,
   SpanFrameEvent,
-} from './types/replayFrame';
+} from './types';
+export { EventType } from '@sentry-internal/rrweb';
+export { NodeType } from '@sentry-internal/rrweb-snapshot';
+export type { eventWithTime, fullSnapshotEvent } from '@sentry-internal/rrweb';
+export type { serializedNodeWithId } from '@sentry-internal/rrweb-snapshot';

packages/replay/src/types/index.ts

@@ -1,4 +1,5 @@
 export * from './performance';
 export * from './replay';
 export * from './replayFrame';
+export * from './request';
 export * from './rrweb';

packages/replay/src/types/performance.ts

@@ -1,3 +1,5 @@
+import type { ReplayNetworkRequestOrResponse } from './request';
+
 export type AllPerformanceEntry = PerformancePaintTiming | PerformanceResourceTiming | PerformanceNavigationTiming;
 
 // PerformancePaintTiming and PerformanceNavigationTiming are only available with TS 4.4 and newer
@@ -124,6 +126,8 @@ export interface NetworkRequestData {
   statusCode?: number;
   requestBodySize?: number;
   responseBodySize?: number;
+  request?: ReplayNetworkRequestOrResponse;
+  response?: ReplayNetworkRequestOrResponse;
 }
 
 export interface HistoryData {

packages/replay/src/types/replay.ts

@@ -11,6 +11,7 @@ import type {
 import type { SKIPPED, THROTTLED } from '../util/throttle';
 import type { AllPerformanceEntry } from './performance';
 import type { ReplayFrameEvent } from './replayFrame';
+import type { ReplayNetworkRequestOrResponse } from './request';
 import type { eventWithTime, recordOptions } from './rrweb';
 
 export type RecordingEvent = ReplayFrameEvent | eventWithTime;
@@ -452,24 +453,6 @@ export type FetchHint = FetchBreadcrumbHint & {
   response: Response;
 };
 
-type JsonObject = Record<string, unknown>;
-type JsonArray = unknown[];
-
-export type NetworkBody = JsonObject | JsonArray | string;
-
-export type NetworkMetaWarning = 'JSON_TRUNCATED' | 'TEXT_TRUNCATED' | 'INVALID_JSON' | 'URL_SKIPPED';
-
-interface NetworkMeta {
-  warnings?: NetworkMetaWarning[];
-}
-
-export interface ReplayNetworkRequestOrResponse {
-  size?: number;
-  body?: NetworkBody;
-  headers: Record<string, string>;
-  _meta?: NetworkMeta;
-}
-
 export type ReplayNetworkRequestData = {
   startTimestamp: number;
   endTimestamp: number;

packages/replay/src/types/replayFrame.ts

@@ -1,9 +1,17 @@
-import type { Breadcrumb, FetchBreadcrumbData, XhrBreadcrumbData } from '@sentry/types';
-
-import type { AllEntryData } from './performance';
-import type { EventType } from './rrweb';
-
-interface BaseReplayFrame {
+import type { EventType } from '@sentry-internal/rrweb';
+import type { Breadcrumb } from '@sentry/types';
+
+import type {
+  HistoryData,
+  LargestContentfulPaintData,
+  MemoryData,
+  NavigationData,
+  NetworkRequestData,
+  PaintData,
+  ResourceData,
+} from './performance';
+
+interface BaseBreadcrumbFrame {
   timestamp: number;
   /**
    * For compatibility reasons
@@ -29,43 +37,31 @@ 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 {
-  category: 'fetch';
-  type: 'http';
-  data: FetchBreadcrumbData;
-}
-
-interface InputFrame extends BaseReplayFrame {
+interface InputFrame extends BaseBreadcrumbFrame {
   category: 'ui.input';
   message: string;
 }
 
-interface XhrFrame extends BaseReplayFrame {
-  category: 'xhr';
-  type: 'http';
-  data: XhrBreadcrumbData;
-}
-
 /* Breadcrumbs from Replay */
 interface MutationFrameData {
   count: number;
   limit: boolean;
 }
-interface MutationFrame extends BaseReplayFrame {
+interface MutationFrame extends BaseBreadcrumbFrame {
   category: 'replay.mutations';
   data: MutationFrameData;
 }
@@ -77,16 +73,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,46 +91,89 @@ 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 =
   | ConsoleFrame
   | ClickFrame
-  | FetchFrame
   | InputFrame
-  | XhrFrame
   | KeyboardEventFrame
   | BlurFrame
   | 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_forward';
+}
+
+interface PaintFrame extends BaseSpanFrame {
+  data: PaintData;
+  op: 'paint';
+}
+
+interface RequestFrame extends BaseSpanFrame {
+  data: NetworkRequestData;
+  op: 'resource.fetch' | 'resource.xhr';
+}
+
+interface ResourceFrame extends BaseSpanFrame {
+  data: ResourceData;
+  op: 'resource.css' | 'resource.iframe' | 'resource.img' | 'resource.link' | 'resource.other' | 'resource.script';
 }
 
+export type SpanFrame =
+  | BaseSpanFrame
+  | HistoryFrame
+  | RequestFrame
+  | LargestContentfulPaintFrame
+  | MemoryFrame
+  | NavigationFrame
+  | PaintFrame
+  | ResourceFrame;
+
 export type ReplayFrame = BreadcrumbFrame | SpanFrame;
 
 interface RecordingCustomEvent {

packages/replay/src/types/request.ts

@@ -0,0 +1,17 @@
+type JsonObject = Record<string, unknown>;
+type JsonArray = unknown[];
+
+export type NetworkBody = JsonObject | JsonArray | string;
+
+export type NetworkMetaWarning = 'JSON_TRUNCATED' | 'TEXT_TRUNCATED' | 'INVALID_JSON' | 'URL_SKIPPED';
+
+interface NetworkMeta {
+  warnings?: NetworkMetaWarning[];
+}
+
+export interface ReplayNetworkRequestOrResponse {
+  size?: number;
+  body?: NetworkBody;
+  headers: Record<string, string>;
+  _meta?: NetworkMeta;
+}

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;