chore: Add missing fields into Replay NetworkRequestData type

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;
@@ -444,24 +445,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;