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

Replace lodash's `debounce` function with a custom, minimal implementation that
- Delays the function invocation by a `wait` time and gate it with a `maxWait` value
- Provides the return value of the invocation for subsequent debounced function calls
- Provides a `flush` and `cancel` function on the debounced function (analogously to lodash).
- Invokes the function _after_ the wait/maxwait time triggered (i.e. on the trailing edge). Lodash allows to choose between the leading and trailing edge, which makes the implementation much more complicated than for us necessary
- Works for functions _without_ parameters. By not supporting args, we can further cut down bundle size. (We might want to revisit this in the future but for now, this should do).

With this change, we can also get rid of the package patch we introduced in #6551 and of the `commonjs()` plugin in our build process.

Author: Lms24

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, ReplayEvent } 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({