ref(replay): Extract overwriteRecordDroppedEvent into fn

Author: mydea

packages/replay/src/replay.ts

@@ -1,6 +1,6 @@
 /* eslint-disable max-lines */ // TODO: We might want to split this file up
 import { addGlobalEventProcessor, getCurrentHub, Scope, setContext } from '@sentry/core';
-import { Breadcrumb, Client, DataCategory, Event, EventDropReason } from '@sentry/types';
+import { Breadcrumb, Client, Event } from '@sentry/types';
 import { addInstrumentationHandler, createEnvelope, logger } from '@sentry/utils';
 import debounce from 'lodash.debounce';
 import { PerformanceObserverEntryList } from 'perf_hooks';
@@ -39,6 +39,7 @@ import { createPayload } from './util/createPayload';
 import { dedupePerformanceEntries } from './util/dedupePerformanceEntries';
 import { isExpired } from './util/isExpired';
 import { isSessionExpired } from './util/isSessionExpired';
+import { overwriteRecordDroppedEvent, restoreRecordDroppedEvent } from './util/monkeyPatchRecordDroppedEvent';
 
 /**
  * Returns true to return control to calling function, otherwise continue with normal batching
@@ -108,11 +109,6 @@ export class ReplayContainer {
    */
   private _stopRecording: ReturnType<typeof record> | null = null;
 
-  /**
-   * We overwrite `client.recordDroppedEvent`, but store the original method here so we can restore it.
-   */
-  private _originalRecordDroppedEvent?: Client['recordDroppedEvent'];
-
   private _context: InternalEventContext = {
     errorIds: new Set(),
     traceIds: new Set(),
@@ -310,7 +306,7 @@ export class ReplayContainer {
       WINDOW.addEventListener('focus', this.handleWindowFocus);
 
       // We need to filter out dropped events captured by `addGlobalEventProcessor(this.handleGlobalEvent)` below
-      this._overwriteRecordDroppedEvent();
+      overwriteRecordDroppedEvent(this._context.errorIds);
 
       // There is no way to remove these listeners, so ensure they are only added once
       if (!this._hasInitializedCoreListeners) {
@@ -374,7 +370,7 @@ export class ReplayContainer {
       WINDOW.removeEventListener('blur', this.handleWindowBlur);
       WINDOW.removeEventListener('focus', this.handleWindowFocus);
 
-      this._restoreRecordDroppedEvent();
+      restoreRecordDroppedEvent();
 
       if (this._performanceObserver) {
         this._performanceObserver.disconnect();
@@ -1249,39 +1245,4 @@ export class ReplayContainer {
       saveSession(this.session);
     }
   }
-
-  private _overwriteRecordDroppedEvent(): void {
-    const client = getCurrentHub().getClient();
-
-    if (!client) {
-      return;
-    }
-
-    const _originalCallback = client.recordDroppedEvent.bind(client);
-
-    const recordDroppedEvent: Client['recordDroppedEvent'] = (
-      reason: EventDropReason,
-      category: DataCategory,
-      event?: Event,
-    ): void => {
-      if (event && event.event_id) {
-        this._context.errorIds.delete(event.event_id);
-      }
-
-      return _originalCallback(reason, category, event);
-    };
-
-    client.recordDroppedEvent = recordDroppedEvent;
-    this._originalRecordDroppedEvent = _originalCallback;
-  }
-
-  private _restoreRecordDroppedEvent(): void {
-    const client = getCurrentHub().getClient();
-
-    if (!client || !this._originalRecordDroppedEvent) {
-      return;
-    }
-
-    client.recordDroppedEvent = this._originalRecordDroppedEvent;
-  }
 }

packages/replay/src/util/monkeyPatchRecordDroppedEvent.ts

@@ -0,0 +1,39 @@
+import { getCurrentHub } from '@sentry/core';
+import { Client, DataCategory, Event, EventDropReason } from '@sentry/types';
+
+let _originalRecordDroppedEvent: Client['recordDroppedEvent'] | undefined;
+
+export function overwriteRecordDroppedEvent(errorIds: Set<string>): void {
+  const client = getCurrentHub().getClient();
+
+  if (!client) {
+    return;
+  }
+
+  const _originalCallback = client.recordDroppedEvent.bind(client);
+
+  const recordDroppedEvent: Client['recordDroppedEvent'] = (
+    reason: EventDropReason,
+    category: DataCategory,
+    event?: Event,
+  ): void => {
+    if (event && event.event_id) {
+      errorIds.delete(event.event_id);
+    }
+
+    return _originalCallback(reason, category, event);
+  };
+
+  client.recordDroppedEvent = recordDroppedEvent;
+  _originalRecordDroppedEvent = _originalCallback;
+}
+
+export function restoreRecordDroppedEvent(): void {
+  const client = getCurrentHub().getClient();
+
+  if (!client || !_originalRecordDroppedEvent) {
+    return;
+  }
+
+  client.recordDroppedEvent = _originalRecordDroppedEvent;
+}

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

@@ -1,6 +1,7 @@
 import { getCurrentHub } from '@sentry/core';
 
 import { REPLAY_EVENT_NAME } from '../../src/constants';
+import { overwriteRecordDroppedEvent, restoreRecordDroppedEvent } from '../../src/util/monkeyPatchRecordDroppedEvent';
 import { ReplayContainer } from './../../src/replay';
 import { Error } from './../fixtures/error';
 import { Transaction } from './../fixtures/transaction';
@@ -93,7 +94,8 @@ it('strips out dropped events from errorIds', async () => {
   const error2 = Error({ event_id: 'err2' });
   const error3 = Error({ event_id: 'err3' });
 
-  replay['_overwriteRecordDroppedEvent']();
+  // @ts-ignore private
+  overwriteRecordDroppedEvent(replay._context.errorIds);
 
   const client = getCurrentHub().getClient()!;
 
@@ -106,7 +108,7 @@ it('strips out dropped events from errorIds', async () => {
   // @ts-ignore private
   expect(Array.from(replay._context.errorIds)).toEqual(['err1', 'err3']);
 
-  replay['_restoreRecordDroppedEvent']();
+  restoreRecordDroppedEvent();
 });
 
 it('tags errors and transactions with replay id for session samples', async () => {