ref(replay): Restructure event type export naming (#8866)

This renames & restructures the type exports from `@sentry/replay`.

We want to deprecate the `@sentry/replay` package eventually - users
should import everything they need directly from e.g. `@sentry/browser`
or `@sentry/react`.

ref #8864

Author: mydea

packages/browser-integration-tests/utils/replayHelpers.ts

@@ -1,12 +1,12 @@
 import type { fullSnapshotEvent, incrementalSnapshotEvent } from '@sentry-internal/rrweb';
 import { EventType } from '@sentry-internal/rrweb';
+import type { ReplayEventWithTime } from '@sentry/browser';
 import type {
   InternalEventContext,
   RecordingEvent,
   ReplayContainer,
   Session,
 } from '@sentry/replay/build/npm/types/types';
-import type { eventWithTime } from '@sentry/replay/build/npm/types/types/rrweb';
 import type { Breadcrumb, Event, ReplayEvent, ReplayRecordingMode } from '@sentry/types';
 import pako from 'pako';
 import type { Page, Request, Response } from 'playwright';
@@ -22,12 +22,12 @@ export type PerformanceSpan = {
   data: Record<string, number>;
 };
 
-export type FullRecordingSnapshot = eventWithTime & {
+export type FullRecordingSnapshot = ReplayEventWithTime & {
   timestamp: 0;
   data: fullSnapshotEvent['data'];
 };
 
-export type IncrementalRecordingSnapshot = eventWithTime & {
+export type IncrementalRecordingSnapshot = ReplayEventWithTime & {
   timestamp: 0;
   data: incrementalSnapshotEvent['data'];
 };
@@ -270,7 +270,7 @@ function getOptionsEvents(replayRequest: Request): CustomRecordingEvent[] {
 export function getDecompressedRecordingEvents(resOrReq: Request | Response): RecordingSnapshot[] {
   const replayRequest = getRequest(resOrReq);
   return (
-    (replayEnvelopeRequestParser(replayRequest, 5) as eventWithTime[])
+    (replayEnvelopeRequestParser(replayRequest, 5) as ReplayEventWithTime[])
       .sort((a, b) => a.timestamp - b.timestamp)
       // source 1 is MouseMove, which is a bit flaky and we don't care about
       .filter(

packages/browser/src/index.ts

@@ -21,6 +21,18 @@ const INTEGRATIONS = {
 export { INTEGRATIONS as Integrations };
 
 export { Replay } from '@sentry/replay';
+export type {
+  ReplayEventType,
+  ReplayEventWithTime,
+  ReplayBreadcrumbFrame,
+  ReplayBreadcrumbFrameEvent,
+  ReplayOptionFrameEvent,
+  ReplayFrame,
+  ReplayFrameEvent,
+  ReplaySpanFrame,
+  ReplaySpanFrameEvent,
+} from '@sentry/replay';
+
 export {
   BrowserTracing,
   defaultRequestInstrumentationOptions,

packages/replay/.eslintignore

@@ -4,5 +4,3 @@ demo/build/
 # TODO: Check if we can re-introduce linting in demo
 demo
 metrics
-# For whatever reason, the eslint-ignore comment in this file is not working, so skipping this file
-src/types/rrweb.ts

packages/replay/.eslintrc.js

@@ -32,5 +32,11 @@ module.exports = {
         '@typescript-eslint/no-floating-promises': 'off',
       },
     },
+    {
+      files: ['src/types/deprecated.ts'],
+      rules: {
+        '@typescript-eslint/naming-convention': 'off',
+      },
+    },
   ],
 };

packages/replay/src/coreHandlers/handleClick.ts

@@ -1,7 +1,13 @@
 import type { Breadcrumb } from '@sentry/types';
 
 import { WINDOW } from '../constants';
-import type { MultiClickFrame, ReplayClickDetector, ReplayContainer, SlowClickConfig, SlowClickFrame } from '../types';
+import type {
+  ReplayClickDetector,
+  ReplayContainer,
+  ReplayMultiClickFrame,
+  ReplaySlowClickFrame,
+  SlowClickConfig,
+} from '../types';
 import { timestampToS } from '../util/timestamp';
 import { addBreadcrumbEvent } from './util/addBreadcrumbEvent';
 import { getClickTargetNode } from './util/domUtils';
@@ -216,7 +222,7 @@ export class ClickDetector implements ReplayClickDetector {
       const timeAfterClickMs = Math.min(click.mutationAfter || this._timeout, this._timeout) * 1000;
       const endReason = timeAfterClickMs < this._timeout * 1000 ? 'mutation' : 'timeout';
 
-      const breadcrumb: SlowClickFrame = {
+      const breadcrumb: ReplaySlowClickFrame = {
         type: 'default',
         message: clickBreadcrumb.message,
         timestamp: clickBreadcrumb.timestamp,
@@ -239,7 +245,7 @@ export class ClickDetector implements ReplayClickDetector {
 
     // Multi click
     if (clickCount > 1) {
-      const breadcrumb: MultiClickFrame = {
+      const breadcrumb: ReplayMultiClickFrame = {
         type: 'default',
         message: clickBreadcrumb.message,
         timestamp: clickBreadcrumb.timestamp,

packages/replay/src/index.ts

@@ -1,12 +1,16 @@
 export { Replay } from './integration';
+
 export type {
-  EventType,
-  eventWithTime,
-  BreadcrumbFrame,
-  BreadcrumbFrameEvent,
-  OptionFrameEvent,
+  ReplayEventType,
+  ReplayEventWithTime,
+  ReplayBreadcrumbFrame,
+  ReplayBreadcrumbFrameEvent,
+  ReplayOptionFrameEvent,
   ReplayFrame,
   ReplayFrameEvent,
-  SpanFrame,
-  SpanFrameEvent,
+  ReplaySpanFrame,
+  ReplaySpanFrameEvent,
 } from './types';
+
+// TODO (v8): Remove deprecated types
+export * from './types/deprecated';

packages/replay/src/replay.ts

@@ -25,19 +25,20 @@ import type {
   AddEventResult,
   AddUpdateCallback,
   AllPerformanceEntry,
-  BreadcrumbFrame,
   EventBuffer,
   InternalEventContext,
   PopEventContext,
   RecordingEvent,
   RecordingOptions,
+  ReplayBreadcrumbFrame,
   ReplayContainer as ReplayContainerInterface,
   ReplayPluginOptions,
   SendBufferedReplayOptions,
   Session,
   SlowClickConfig,
   Timeouts,
 } from './types';
+import { ReplayEventTypeCustom } from './types';
 import { addEvent } from './util/addEvent';
 import { addGlobalListeners } from './util/addGlobalListeners';
 import { addMemoryEntry } from './util/addMemoryEntry';
@@ -688,7 +689,7 @@ export class ReplayContainer implements ReplayContainerInterface {
 
       this.addUpdate(() => {
         void addEvent(this, {
-          type: EventType.Custom,
+          type: ReplayEventTypeCustom,
           timestamp: breadcrumb.timestamp || 0,
           data: {
             tag: 'breadcrumb',
@@ -919,7 +920,7 @@ export class ReplayContainer implements ReplayContainerInterface {
   /**
    * Tasks to run when we consider a page to be hidden (via blurring and/or visibility)
    */
-  private _doChangeToBackgroundTasks(breadcrumb?: BreadcrumbFrame): void {
+  private _doChangeToBackgroundTasks(breadcrumb?: ReplayBreadcrumbFrame): void {
     if (!this.session) {
       return;
     }
@@ -939,7 +940,7 @@ export class ReplayContainer implements ReplayContainerInterface {
   /**
    * Tasks to run when we consider a page to be visible (via focus and/or visibility)
    */
-  private _doChangeToForegroundTasks(breadcrumb?: BreadcrumbFrame): void {
+  private _doChangeToForegroundTasks(breadcrumb?: ReplayBreadcrumbFrame): void {
     if (!this.session) {
       return;
     }
@@ -992,7 +993,7 @@ export class ReplayContainer implements ReplayContainerInterface {
   /**
    * Helper to create (and buffer) a replay breadcrumb from a core SDK breadcrumb
    */
-  private _createCustomBreadcrumb(breadcrumb: BreadcrumbFrame): void {
+  private _createCustomBreadcrumb(breadcrumb: ReplayBreadcrumbFrame): void {
     this.addUpdate(() => {
       void this.throttledAddEvent({
         type: EventType.Custom,

packages/replay/src/types/deprecated.ts

@@ -0,0 +1,30 @@
+import type {
+  ReplayBreadcrumbFrame,
+  ReplayBreadcrumbFrameEvent,
+  ReplayEventType,
+  ReplayEventWithTime,
+  ReplayOptionFrameEvent,
+  ReplaySpanFrame,
+  ReplaySpanFrameEvent,
+} from '.';
+
+/** @deprecated use ReplayEventType instead */
+export type EventType = ReplayEventType;
+
+/** @deprecated use ReplayEventWithTime instead */
+export type eventWithTime = ReplayEventWithTime;
+
+/** @deprecated use ReplayBreadcrumbFrame instead */
+export type BreadcrumbFrame = ReplayBreadcrumbFrame;
+
+/** @deprecated use ReplayBreadcrumbFrameEvent instead */
+export type BreadcrumbFrameEvent = ReplayBreadcrumbFrameEvent;
+
+/** @deprecated use ReplayOptionFrameEvent instead */
+export type OptionFrameEvent = ReplayOptionFrameEvent;
+
+/** @deprecated use ReplaySpanFrame instead */
+export type SpanFrame = ReplaySpanFrame;
+
+/** @deprecated use ReplaySpanFrameEvent instead */
+export type SpanFrameEvent = ReplaySpanFrameEvent;

packages/replay/src/types/replay.ts

@@ -13,10 +13,10 @@ 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';
+import type { ReplayEventWithTime, RrwebRecordOptions } from './rrweb';
 
-export type RecordingEvent = ReplayFrameEvent | eventWithTime;
-export type RecordingOptions = recordOptions;
+export type RecordingEvent = ReplayFrameEvent | ReplayEventWithTime;
+export type RecordingOptions = RrwebRecordOptions;
 
 export interface SendReplayData {
   recordingData: ReplayRecordingData;