ref(replay): Extract createPerformanceSpans out

Author: mydea

packages/replay/src/coreHandlers/handleFetch.ts

@@ -1,5 +1,6 @@
 import { ReplayPerformanceEntry } from '../createPerformanceEntry';
 import { ReplayContainer } from '../replay';
+import { createPerformanceSpans } from '../util/createPerformanceSpans';
 import { isIngestHost } from '../util/isIngestHost';
 
 interface FetchHandlerData {
@@ -57,7 +58,7 @@ export function handleFetchSpanListener(replay: ReplayContainer): (handlerData:
     }
 
     replay.addUpdate(() => {
-      void replay.createPerformanceSpans([result]);
+      void createPerformanceSpans(replay, [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.

packages/replay/src/coreHandlers/handleHistory.ts

@@ -1,5 +1,6 @@
 import { ReplayPerformanceEntry } from '../createPerformanceEntry';
 import { ReplayContainer } from '../replay';
+import { createPerformanceSpans } from '../util/createPerformanceSpans';
 
 interface HistoryHandlerData {
   from: string;
@@ -39,7 +40,7 @@ export function handleHistorySpanListener(replay: ReplayContainer): (handlerData
     replay.triggerUserActivity();
 
     replay.addUpdate(() => {
-      void replay.createPerformanceSpans([result]);
+      void createPerformanceSpans(replay, [result]);
       // Returning false to flush
       return false;
     });

packages/replay/src/coreHandlers/handleXhr.ts

@@ -1,5 +1,6 @@
 import { ReplayPerformanceEntry } from '../createPerformanceEntry';
 import { ReplayContainer } from '../replay';
+import { createPerformanceSpans } from '../util/createPerformanceSpans';
 import { isIngestHost } from '../util/isIngestHost';
 
 // From sentry-javascript
@@ -76,7 +77,7 @@ export function handleXhrSpanListener(replay: ReplayContainer): (handlerData: Xh
     }
 
     replay.addUpdate(() => {
-      void replay.createPerformanceSpans([result]);
+      void createPerformanceSpans(replay, [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.

packages/replay/src/replay.ts

@@ -19,7 +19,7 @@ import { handleGlobalEventListener } from './coreHandlers/handleGlobalEvent';
 import { handleHistorySpanListener } from './coreHandlers/handleHistory';
 import { handleXhrSpanListener } from './coreHandlers/handleXhr';
 import { setupPerformanceObserver } from './coreHandlers/performanceObserver';
-import { createMemoryEntry, createPerformanceEntries, ReplayPerformanceEntry } from './createPerformanceEntry';
+import { createMemoryEntry, createPerformanceEntries } from './createPerformanceEntry';
 import { createEventBuffer, EventBuffer } from './eventBuffer';
 import { deleteSession } from './session/deleteSession';
 import { getSession } from './session/getSession';
@@ -35,13 +35,14 @@ import type {
   ReplayPluginOptions,
   SendReplay,
 } from './types';
+import { addEvent } from './util/addEvent';
 import { captureInternalException } from './util/captureInternalException';
 import { createBreadcrumb } from './util/createBreadcrumb';
 import { createPayload } from './util/createPayload';
+import { createPerformanceSpans } from './util/createPerformanceSpans';
 import { isExpired } from './util/isExpired';
 import { isSessionExpired } from './util/isSessionExpired';
 import { overwriteRecordDroppedEvent, restoreRecordDroppedEvent } from './util/monkeyPatchRecordDroppedEvent';
-import { addEvent } from './util/addEvent';
 
 /**
  * Returns true to return control to calling function, otherwise continue with normal batching
@@ -686,30 +687,6 @@ export class ReplayContainer {
     });
   }
 
-  /**
-   * Create a "span" for each performance entry. The parent transaction is `this.replayEvent`.
-   */
-  createPerformanceSpans(entries: ReplayPerformanceEntry[]): Promise<void[]> {
-    return Promise.all(
-      entries.map(({ type, start, end, name, data }) =>
-        addEvent(this, {
-          type: EventType.Custom,
-          timestamp: start,
-          data: {
-            tag: 'performanceSpan',
-            payload: {
-              op: type,
-              description: name,
-              startTimestamp: start,
-              endTimestamp: end,
-              data,
-            },
-          },
-        }),
-      ),
-    );
-  }
-
   /**
    * Observed performance events are added to `this.performanceEvents`. These
    * are included in the replay event before it is finished and sent to Sentry.
@@ -719,7 +696,7 @@ export class ReplayContainer {
     const entries = [...this.performanceEvents];
     this.performanceEvents = [];
 
-    return this.createPerformanceSpans(createPerformanceEntries(entries));
+    return createPerformanceSpans(this, createPerformanceEntries(entries));
   }
 
   /**
@@ -733,7 +710,7 @@ export class ReplayContainer {
       return;
     }
 
-    return this.createPerformanceSpans([
+    return createPerformanceSpans(this, [
       // @ts-ignore memory doesn't exist on type Performance as the API is non-standard (we check that it exists above)
       createMemoryEntry(WINDOW.performance.memory),
     ]);

packages/replay/src/util/createPerformanceSpans.ts

@@ -0,0 +1,29 @@
+import { EventType } from 'rrweb';
+
+import { ReplayPerformanceEntry } from '../createPerformanceEntry';
+import { ReplayContainer } from '../replay';
+import { addEvent } from './addEvent';
+
+/**
+ * Create a "span" for each performance entry. The parent transaction is `this.replayEvent`.
+ */
+export function createPerformanceSpans(replay: ReplayContainer, entries: ReplayPerformanceEntry[]): Promise<void[]> {
+  return Promise.all(
+    entries.map(({ type, start, end, name, data }) =>
+      addEvent(replay, {
+        type: EventType.Custom,
+        timestamp: start,
+        data: {
+          tag: 'performanceSpan',
+          payload: {
+            op: type,
+            description: name,
+            startTimestamp: start,
+            endTimestamp: end,
+            data,
+          },
+        },
+      }),
+    ),
+  );
+}

packages/replay/test/unit/flush.test.ts

@@ -1,6 +1,7 @@
 import * as SentryUtils from '@sentry/utils';
 
 import { SESSION_IDLE_DURATION, WINDOW } from '../../src/constants';
+import { createPerformanceSpans } from '../../src/util/createPerformanceSpans';
 import { createPerformanceEntries } from './../../src/createPerformanceEntry';
 import { ReplayContainer } from './../../src/replay';
 import { useFakeTimers } from './../../test/utils/use-fake-timers';
@@ -179,7 +180,8 @@ it('long first flush enqueues following events', async () => {
 
   // Add this to test that segment ID increases
   mockAddPerformanceEntries.mockImplementationOnce(async () => {
-    return replay.createPerformanceSpans(
+    return createPerformanceSpans(
+      replay,
       createPerformanceEntries([
         {
           name: 'https://sentry.io/foo.js',

packages/replay/test/unit/index.test.ts

@@ -8,6 +8,7 @@ import { MAX_SESSION_LIFE, REPLAY_SESSION_KEY, VISIBILITY_CHANGE_TIMEOUT, WINDOW
 import { ReplayContainer } from '../../src/replay';
 import { RecordingEvent } from '../../src/types';
 import { addEvent } from '../../src/util/addEvent';
+import { createPerformanceSpans } from '../../src/util/createPerformanceSpans';
 import { useFakeTimers } from '../utils/use-fake-timers';
 import { PerformanceEntryResource } from './../fixtures/performanceEntry/resource';
 import { BASE_TIMESTAMP, RecordMock } from './../index';
@@ -461,7 +462,7 @@ describe('Replay', () => {
     // performance events can still be collected while recording is stopped
     // TODO: we may want to prevent `addEvent` from adding to buffer when user is inactive
     replay.addUpdate(() => {
-      replay.createPerformanceSpans([
+      createPerformanceSpans(replay, [
         {
           type: 'navigation.navigate',
           name: 'foo',