ref(replay): Extract span listeners out

Author: mydea

packages/replay/src/coreHandlers/handleFetch.ts

@@ -1,7 +1,8 @@
 import { ReplayPerformanceEntry } from '../createPerformanceEntry';
+import { ReplayContainer } from '../replay';
 import { isIngestHost } from '../util/isIngestHost';
 
-export interface FetchHandlerData {
+interface FetchHandlerData {
   args: Parameters<typeof fetch>;
   fetchData: {
     method: string;
@@ -18,6 +19,7 @@ export interface FetchHandlerData {
   endTimestamp?: number;
 }
 
+/** only exported for tests */
 export function handleFetch(handlerData: FetchHandlerData): null | ReplayPerformanceEntry {
   if (!handlerData.endTimestamp) {
     return null;
@@ -41,3 +43,26 @@ export function handleFetch(handlerData: FetchHandlerData): null | ReplayPerform
     },
   };
 }
+
+export function handleFetchSpanListener(replay: ReplayContainer): (handlerData: FetchHandlerData) => void {
+  return (handlerData: FetchHandlerData) => {
+    // @ts-ignore private
+    if (!replay._isEnabled) {
+      return;
+    }
+
+    const result = handleFetch(handlerData);
+
+    if (result === null) {
+      return;
+    }
+
+    replay.addUpdate(() => {
+      void replay.createPerformanceSpans([result]);
+      // Returning true will cause `addUpdate` to not flush
+      // We do not want network requests to cause a flush. This will prevent
+      // recurring/polling requests from keeping the replay session alive.
+      return true;
+    });
+  };
+}

packages/replay/src/coreHandlers/handleHistory.ts

@@ -1,11 +1,12 @@
 import { ReplayPerformanceEntry } from '../createPerformanceEntry';
+import { ReplayContainer } from '../replay';
 
-export interface HistoryHandlerData {
+interface HistoryHandlerData {
   from: string;
   to: string;
 }
 
-export function handleHistory(handlerData: HistoryHandlerData): ReplayPerformanceEntry {
+function handleHistory(handlerData: HistoryHandlerData): ReplayPerformanceEntry {
   const { from, to } = handlerData;
 
   const now = new Date().getTime() / 1000;
@@ -20,3 +21,29 @@ export function handleHistory(handlerData: HistoryHandlerData): ReplayPerformanc
     },
   };
 }
+
+export function handleHistorySpanListener(replay: ReplayContainer): (handlerData: HistoryHandlerData) => void {
+  return (handlerData: HistoryHandlerData) => {
+    // @ts-ignore private
+    if (!replay._isEnabled) {
+      return;
+    }
+
+    const result = handleHistory(handlerData);
+
+    if (result === null) {
+      return;
+    }
+
+    // Need to collect visited URLs
+    // @ts-ignore private
+    replay._context.urls.push(result.name);
+    replay.triggerUserActivity();
+
+    replay.addUpdate(() => {
+      void replay.createPerformanceSpans([result]);
+      // Returning false to flush
+      return false;
+    });
+  };
+}

packages/replay/src/coreHandlers/handleXhr.ts

@@ -1,4 +1,5 @@
 import { ReplayPerformanceEntry } from '../createPerformanceEntry';
+import { ReplayContainer } from '../replay';
 import { isIngestHost } from '../util/isIngestHost';
 
 // From sentry-javascript
@@ -19,14 +20,14 @@ interface SentryWrappedXMLHttpRequest extends XMLHttpRequest {
   __sentry_own_request__?: boolean;
 }
 
-export interface XhrHandlerData {
+interface XhrHandlerData {
   args: [string, string];
   xhr: SentryWrappedXMLHttpRequest;
   startTimestamp: number;
   endTimestamp?: number;
 }
 
-export function handleXhr(handlerData: XhrHandlerData): ReplayPerformanceEntry | null {
+function handleXhr(handlerData: XhrHandlerData): ReplayPerformanceEntry | null {
   if (handlerData.xhr.__sentry_own_request__) {
     // Taken from sentry-javascript
     // Only capture non-sentry requests
@@ -61,3 +62,26 @@ export function handleXhr(handlerData: XhrHandlerData): ReplayPerformanceEntry |
     },
   };
 }
+
+export function handleXhrSpanListener(replay: ReplayContainer): (handlerData: XhrHandlerData) => void {
+  return (handlerData: XhrHandlerData) => {
+    // @ts-ignore private
+    if (!replay._isEnabled) {
+      return;
+    }
+
+    const result = handleXhr(handlerData);
+
+    if (result === null) {
+      return;
+    }
+
+    replay.addUpdate(() => {
+      void replay.createPerformanceSpans([result]);
+      // Returning true will cause `addUpdate` to not flush
+      // We do not want network requests to cause a flush. This will prevent
+      // recurring/polling requests from keeping the replay session alive.
+      return true;
+    });
+  };
+}

packages/replay/src/coreHandlers/spanHandler.ts

@@ -14,7 +14,9 @@ import {
   WINDOW,
 } from './constants';
 import { breadcrumbHandler } from './coreHandlers/breadcrumbHandler';
-import { spanHandler } from './coreHandlers/spanHandler';
+import { handleFetchSpanListener } from './coreHandlers/handleFetch';
+import { handleHistorySpanListener } from './coreHandlers/handleHistory';
+import { handleXhrSpanListener } from './coreHandlers/handleXhr';
 import { createMemoryEntry, createPerformanceEntries, ReplayPerformanceEntry } from './createPerformanceEntry';
 import { createEventBuffer, EventBuffer } from './eventBuffer';
 import { deleteSession } from './session/deleteSession';
@@ -24,7 +26,6 @@ import { Session } from './session/Session';
 import type {
   AllPerformanceEntry,
   InstrumentationTypeBreadcrumb,
-  InstrumentationTypeSpan,
   InternalEventContext,
   PopEventContext,
   RecordingEvent,
@@ -314,9 +315,9 @@ export class ReplayContainer {
         const scope = getCurrentHub().getScope();
         scope?.addScopeListener(this.handleCoreBreadcrumbListener('scope'));
         addInstrumentationHandler('dom', this.handleCoreBreadcrumbListener('dom'));
-        addInstrumentationHandler('fetch', this.handleCoreSpanListener('fetch'));
-        addInstrumentationHandler('xhr', this.handleCoreSpanListener('xhr'));
-        addInstrumentationHandler('history', this.handleCoreSpanListener('history'));
+        addInstrumentationHandler('fetch', handleFetchSpanListener(this));
+        addInstrumentationHandler('xhr', handleXhrSpanListener(this));
+        addInstrumentationHandler('history', handleHistorySpanListener(this));
 
         // Tag all (non replay) events that get sent to Sentry with the current
         // replay ID so that we can reference them later in the UI
@@ -590,39 +591,6 @@ export class ReplayContainer {
     this.doChangeToForegroundTasks(breadcrumb);
   };
 
-  /**
-   * Handler for Sentry Core SDK events.
-   *
-   * These specific events will create span-like objects in the recording.
-   */
-  handleCoreSpanListener: (type: InstrumentationTypeSpan) => (handlerData: unknown) => void =
-    (type: InstrumentationTypeSpan) =>
-    (handlerData: unknown): void => {
-      if (!this._isEnabled) {
-        return;
-      }
-
-      const result = spanHandler(type, handlerData);
-
-      if (result === null) {
-        return;
-      }
-
-      if (type === 'history') {
-        // Need to collect visited URLs
-        this._context.urls.push(result.name);
-        this.triggerUserActivity();
-      }
-
-      this.addUpdate(() => {
-        void this.createPerformanceSpans([result as ReplayPerformanceEntry]);
-        // Returning true will cause `addUpdate` to not flush
-        // We do not want network requests to cause a flush. This will prevent
-        // recurring/polling requests from keeping the replay session alive.
-        return ['xhr', 'fetch'].includes(type);
-      });
-    };
-
   /**
    * Handler for Sentry Core SDK events.
    *

packages/replay/src/replay.ts

@@ -16,13 +16,6 @@ export interface SendReplay {
 }
 
 export type InstrumentationTypeBreadcrumb = 'dom' | 'scope';
-export type InstrumentationTypeSpan = 'fetch' | 'xhr' | 'history';
-export type InstrumentationType =
-  | InstrumentationTypeBreadcrumb
-  | InstrumentationTypeSpan
-  | 'console'
-  | 'error'
-  | 'unhandledrejection';
 
 /**
  * The request payload to worker