ref(replay): Avoid using private hub._withClient

This is brittle, and can actually be refactored quite easily.

Author: mydea

packages/replay/src/constants.ts

@@ -25,3 +25,8 @@ export const MAX_SESSION_LIFE = 1_800_000; // 30 minutes
  */
 export const DEFAULT_SESSION_SAMPLE_RATE = 0.1;
 export const DEFAULT_ERROR_SAMPLE_RATE = 1.0;
+
+export const REPLAY_SDK_INFO = {
+  name: 'sentry.javascript.integration.replay',
+  version: __SENTRY_REPLAY_VERSION__,
+};

packages/replay/src/replay.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-lines */ // TODO: We might want to split this file up
-import { addGlobalEventProcessor, captureException, getCurrentHub, Scope, setContext } from '@sentry/core';
-import { Breadcrumb, Client, Event } from '@sentry/types';
-import { addInstrumentationHandler, createEnvelope, logger } from '@sentry/utils';
+import { addGlobalEventProcessor, captureException, getCurrentHub, setContext } from '@sentry/core';
+import { Breadcrumb, Event } from '@sentry/types';
+import { addInstrumentationHandler, logger } from '@sentry/utils';
 import debounce from 'lodash.debounce';
 import { EventType, record } from 'rrweb';
 
@@ -44,6 +44,8 @@ import { addMemoryEntry } from './util/addMemoryEntry';
 import { createBreadcrumb } from './util/createBreadcrumb';
 import { createPayload } from './util/createPayload';
 import { createPerformanceSpans } from './util/createPerformanceSpans';
+import { createReplayEnvelope } from './util/createReplayEnvelope';
+import { getReplayEvent } from './util/getReplayEvent';
 import { isExpired } from './util/isExpired';
 import { isSessionExpired } from './util/isSessionExpired';
 import { overwriteRecordDroppedEvent, restoreRecordDroppedEvent } from './util/monkeyPatchRecordDroppedEvent';
@@ -906,7 +908,7 @@ export class ReplayContainer implements ReplayContainerInterface {
    */
   async sendReplayRequest({
     events,
-    replayId: event_id,
+    replayId,
     segmentId: segment_id,
     includeReplayStartTimestamp,
     eventContext,
@@ -922,77 +924,40 @@ export class ReplayContainer implements ReplayContainerInterface {
 
     const currentTimestamp = new Date().getTime();
 
-    const sdkInfo = {
-      name: 'sentry.javascript.integration.replay',
-      version: __SENTRY_REPLAY_VERSION__,
-    };
+    const hub = getCurrentHub();
+    const client = hub.getClient();
+    const scope = hub.getScope();
+    const transport = client?.getTransport();
 
-    const replayEvent = await new Promise(resolve => {
-      getCurrentHub()
-        // @ts-ignore private api
-        ?._withClient(async (client: Client, scope: Scope) => {
-          // XXX: This event does not trigger `beforeSend` in SDK
-          // @ts-ignore private api
-          const preparedEvent: Event = await client._prepareEvent(
-            {
-              type: REPLAY_EVENT_NAME,
-              ...(includeReplayStartTimestamp ? { replay_start_timestamp: initialTimestamp / 1000 } : {}),
-              timestamp: currentTimestamp / 1000,
-              error_ids: errorIds,
-              trace_ids: traceIds,
-              urls,
-              replay_id: event_id,
-              segment_id,
-            },
-            { event_id },
-            scope,
-          );
-          const session = scope && scope.getSession();
-          if (session) {
-            // @ts-ignore private api
-            client._updateSessionFromEvent(session, preparedEvent);
-          }
+    if (!client || !scope || !transport) {
+      return;
+    }
 
-          preparedEvent.sdk = {
-            ...preparedEvent.sdk,
-            ...sdkInfo,
-          };
+    const baseEvent: Event = {
+      // @ts-ignore private api
+      type: REPLAY_EVENT_NAME,
+      ...(includeReplayStartTimestamp ? { replay_start_timestamp: initialTimestamp / 1000 } : {}),
+      timestamp: currentTimestamp / 1000,
+      error_ids: errorIds,
+      trace_ids: traceIds,
+      urls,
+      replay_id: replayId,
+      segment_id,
+    };
 
-          preparedEvent.tags = {
-            ...preparedEvent.tags,
-            sessionSampleRate: this._options.sessionSampleRate,
-            errorSampleRate: this._options.errorSampleRate,
-            replayType: this.session?.sampled,
-          };
+    const replayEvent = await getReplayEvent({ scope, client, replayId, event: baseEvent });
 
-          resolve(preparedEvent);
-        });
-    });
+    replayEvent.tags = {
+      ...replayEvent.tags,
+      sessionSampleRate: this._options.sessionSampleRate,
+      errorSampleRate: this._options.errorSampleRate,
+      replayType: this.session?.sampled,
+    };
 
-    const envelope = createEnvelope(
-      {
-        event_id,
-        sent_at: new Date().toISOString(),
-        sdk: sdkInfo,
-      },
-      [
-        // @ts-ignore New types
-        [{ type: 'replay_event' }, replayEvent],
-        [
-          {
-            // @ts-ignore setting envelope
-            type: 'replay_recording',
-            length: payloadWithSequence.length,
-          },
-          // @ts-ignore: Type 'string' is not assignable to type 'ClientReport'.ts(2322)
-          payloadWithSequence,
-        ],
-      ],
-    );
+    const envelope = createReplayEnvelope(replayId, replayEvent, payloadWithSequence);
 
-    const client = getCurrentHub().getClient();
     try {
-      return client?.getTransport()?.send(envelope);
+      return transport.send(envelope);
     } catch {
       throw new Error(UNABLE_TO_SEND_REPLAY);
     }

packages/replay/src/util/createReplayEnvelope.ts

@@ -0,0 +1,31 @@
+import { Envelope, Event } from '@sentry/types';
+import { createEnvelope } from '@sentry/utils';
+
+import { REPLAY_SDK_INFO } from '../constants';
+
+export function createReplayEnvelope(
+  replayId: string,
+  replayEvent: Event,
+  payloadWithSequence: string | Uint8Array,
+): Envelope {
+  return createEnvelope(
+    {
+      event_id: replayId,
+      sent_at: new Date().toISOString(),
+      sdk: REPLAY_SDK_INFO,
+    },
+    [
+      // @ts-ignore New types
+      [{ type: 'replay_event' }, replayEvent],
+      [
+        {
+          // @ts-ignore setting envelope
+          type: 'replay_recording',
+          length: payloadWithSequence.length,
+        },
+        // @ts-ignore: Type 'string' is not assignable to type 'ClientReport'.ts(2322)
+        payloadWithSequence,
+      ],
+    ],
+  );
+}

packages/replay/src/util/getReplayEvent.ts

@@ -0,0 +1,33 @@
+import { Scope } from '@sentry/core';
+import { Client, Event } from '@sentry/types';
+
+import { REPLAY_SDK_INFO } from '../constants';
+
+export async function getReplayEvent({
+  client,
+  scope,
+  replayId: event_id,
+  event,
+}: {
+  client: Client;
+  scope: Scope;
+  replayId: string;
+  event: Event;
+}): Promise<Event> {
+  // XXX: This event does not trigger `beforeSend` in SDK
+  // @ts-ignore private api
+  const preparedEvent: Event = await client._prepareEvent(event, { event_id }, scope);
+
+  const session = scope && scope.getSession();
+  if (session) {
+    // @ts-ignore private api
+    client._updateSessionFromEvent(session, preparedEvent);
+  }
+
+  preparedEvent.sdk = {
+    ...preparedEvent.sdk,
+    ...REPLAY_SDK_INFO,
+  };
+
+  return preparedEvent;
+}