ref(replay): Replace lodash.debounce with custom debounce implementation

packages/browser/src/client.ts

@@ -1,13 +1,6 @@
 import { BaseClient, getEnvelopeEndpointWithUrlEncodedAuth, Scope, SDK_VERSION } from '@sentry/core';
-import {
-  BrowserClientReplayOptions,
-  ClientOptions,
-  Event,
-  EventHint,
-  Options,
-  Severity,
-  SeverityLevel,
-} from '@sentry/types';
+import type { BrowserClientReplayOptions } from '@sentry/types';
+import { ClientOptions, Event, EventHint, Options, Severity, SeverityLevel } from '@sentry/types';
 import { createClientReportEnvelope, dsnToString, logger, serializeEnvelope } from '@sentry/utils';
 
 import { eventFromException, eventFromMessage } from './eventbuilder';

packages/replay/package.json

@@ -46,10 +46,8 @@
   "homepage": "https://docs.sentry.io/platforms/javascript/session-replay/",
   "devDependencies": {
     "@babel/core": "^7.17.5",
-    "@types/lodash.debounce": "4.0.7",
     "@types/pako": "^2.0.0",
     "jsdom-worker": "^0.2.1",
-    "lodash.debounce": "4.0.8",
     "pako": "^2.0.4",
     "rrweb": "1.1.3",
     "tslib": "^1.9.3"

packages/replay/rollup.bundle.config.js

@@ -1,4 +1,3 @@
-import commonjs from '@rollup/plugin-commonjs';
 import replace from '@rollup/plugin-replace';
 
 import { makeBaseBundleConfig, makeBundleConfigVariants } from '../../rollup/index.js';
@@ -19,8 +18,6 @@ const baseBundleConfig = makeBaseBundleConfig({
           __SENTRY_REPLAY_VERSION__: JSON.stringify(pkg.version),
         },
       }),
-      // lodash.debounce is a CJS module, so we need to convert it to ESM first
-      commonjs(),
     ],
   },
 });

packages/replay/rollup.npm.config.js

@@ -1,6 +1,5 @@
 import path from 'path';
 
-import commonjs from '@rollup/plugin-commonjs';
 import replace from '@rollup/plugin-replace';
 
 import { makeBaseNPMConfig, makeNPMConfigVariants } from '../../rollup/index';
@@ -19,8 +18,6 @@ export default makeNPMConfigVariants(
             __SENTRY_REPLAY_VERSION__: JSON.stringify(pkg.version),
           },
         }),
-        // lodash.debounce is a CJS module, so we need to convert it to ESM first
-        commonjs(),
       ],
       output: {
         // set exports to 'named' or 'auto' so that rollup doesn't warn about

packages/replay/src/replay.ts

@@ -2,7 +2,6 @@
 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';
 
 import {
@@ -45,6 +44,7 @@ import { createBreadcrumb } from './util/createBreadcrumb';
 import { createPayload } from './util/createPayload';
 import { createPerformanceSpans } from './util/createPerformanceSpans';
 import { createReplayEnvelope } from './util/createReplayEnvelope';
+import { debounce } from './util/debounce';
 import { getReplayEvent } from './util/getReplayEvent';
 import { isExpired } from './util/isExpired';
 import { isSessionExpired } from './util/isSessionExpired';
@@ -859,7 +859,6 @@ export class ReplayContainer implements ReplayContainerInterface {
     // A flush is about to happen, cancel any queued flushes
     this._debouncedFlush?.cancel();
 
-    // No existing flush in progress, proceed with flushing.
     // this._flushLock acts as a lock so that future calls to `flush()`
     // will be blocked until this promise resolves
     if (!this._flushLock) {
@@ -892,8 +891,8 @@ export class ReplayContainer implements ReplayContainerInterface {
    */
   flushImmediate(): Promise<void> {
     this._debouncedFlush();
-    // `.flush` is provided by lodash.debounce
-    return this._debouncedFlush.flush();
+    // `.flush` is provided by the debounced function, analogously to lodash.debounce
+    return this._debouncedFlush.flush() as Promise<void>;
   }
 
   /**

packages/replay/src/util/debounce.ts

@@ -0,0 +1,70 @@
+type DebouncedCallback = {
+  flush: () => void | unknown;
+  cancel: () => void;
+  (): void | unknown;
+};
+type CallbackFunction = () => unknown;
+type DebounceOptions = { maxWait?: number };
+
+/**
+ * Heavily simplified debounce function based on lodash.debounce.
+ *
+ * This function takes a callback function (@param fun) and delays its invocation
+ * by @param wait milliseconds. Optionally, a maxWait can be specified in @param options,
+ * which ensures that the callback is invoked at least once after the specified max. wait time.
+ *
+ * @param func the function whose invocation is to be debounced
+ * @param wait the minimum time until the function is invoked after it was called once
+ * @param options the options object, which can contain the `maxWait` property
+ *
+ * @returns the debounced version of the function, which needs to be called at least once to start the
+ *          debouncing process. Subsequent calls will reset the debouncing timer and, in case @paramfunc
+ *          was already invoked in the meantime, return @param func's return value.
+ *          The debounced function has two additional properties:
+ *          - `flush`: Invokes the debounced function immediately and returns its return value
+ *          - `cancel`: Cancels the debouncing process and resets the debouncing timer
+ */
+export function debounce(func: CallbackFunction, wait: number, options?: DebounceOptions): DebouncedCallback {
+  let callbackReturnValue: unknown;
+
+  let timerId: ReturnType<typeof setTimeout> | undefined;
+  let maxTimerId: ReturnType<typeof setTimeout> | undefined;
+
+  const maxWait = options && options.maxWait ? Math.max(options.maxWait, wait) : 0;
+
+  function invokeFunc(): unknown {
+    cancelTimers();
+    callbackReturnValue = func();
+    return callbackReturnValue;
+  }
+
+  function cancelTimers(): void {
+    timerId !== undefined && clearTimeout(timerId);
+    maxTimerId !== undefined && clearTimeout(maxTimerId);
+    timerId = maxTimerId = undefined;
+  }
+
+  function flush(): unknown {
+    if (timerId !== undefined || maxTimerId !== undefined) {
+      return invokeFunc();
+    }
+    return callbackReturnValue;
+  }
+
+  function debounced(): unknown {
+    if (timerId) {
+      clearTimeout(timerId);
+    }
+    timerId = setTimeout(invokeFunc, wait);
+
+    if (maxWait && maxTimerId === undefined) {
+      maxTimerId = setTimeout(invokeFunc, maxWait);
+    }
+
+    return callbackReturnValue;
+  }
+
+  debounced.cancel = cancelTimers;
+  debounced.flush = flush;
+  return debounced;
+}

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

@@ -54,7 +54,7 @@ describe('Replay (errorSampleRate)', () => {
     expect(replay).not.toHaveLastSentReplay();
 
     captureException(new Error('testing'));
-    jest.runAllTimers();
+    jest.advanceTimersByTime(5000);
     await new Promise(process.nextTick);
 
     expect(replay).toHaveSentReplay({
@@ -99,8 +99,7 @@ describe('Replay (errorSampleRate)', () => {
       events: JSON.stringify([{ data: { isCheckout: true }, timestamp: BASE_TIMESTAMP + 5020, type: 2 }]),
     });
 
-    jest.runAllTimers();
-    await new Promise(process.nextTick);
+    jest.advanceTimersByTime(5000);
 
     // New checkout when we call `startRecording` again after uploading segment
     // after an error occurs
@@ -118,8 +117,10 @@ describe('Replay (errorSampleRate)', () => {
     domHandler({
       name: 'click',
     });
-    jest.runAllTimers();
+
+    jest.advanceTimersByTime(5000);
     await new Promise(process.nextTick);
+
     expect(replay).toHaveLastSentReplay({
       events: JSON.stringify([
         {
@@ -297,7 +298,7 @@ describe('Replay (errorSampleRate)', () => {
 
     captureException(new Error('testing'));
 
-    jest.runAllTimers();
+    jest.advanceTimersByTime(5000);
     await new Promise(process.nextTick);
 
     expect(replay).toHaveSentReplay({
@@ -398,7 +399,8 @@ it('sends a replay after loading the session multiple times', async () => {
   expect(replay).not.toHaveLastSentReplay();
 
   captureException(new Error('testing'));
-  jest.runAllTimers();
+
+  jest.advanceTimersByTime(5000);
   await new Promise(process.nextTick);
 
   expect(replay).toHaveSentReplay({