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

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/src/replay.ts

@@ -1,8 +1,7 @@
 /* eslint-disable max-lines */ // TODO: We might want to split this file up
 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 { addInstrumentationHandler, debounce, logger } from '@sentry/utils';
 import { EventType, record } from 'rrweb';
 
 import {
@@ -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/test/unit/index-errorSampleRate.test.ts

@@ -257,7 +257,7 @@ describe('Replay (errorSampleRate)', () => {
 
   it('does not upload if user has been idle for more than 15 minutes and comes back to move their mouse', async () => {
     // Idle for 15 minutes
-    jest.advanceTimersByTime(15 * 60000);
+    jest.advanceTimersByTime(15 * 60_000);
 
     // TBD: We are currently deciding that this event will get dropped, but
     // this could/should change in the future.

packages/utils/src/debounce.ts

@@ -0,0 +1,101 @@
+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 lastCallTime: number | undefined;
+  let lastInvokeTime = 0;
+
+  const maxWait = options && options.maxWait ? Math.max(options.maxWait || 0, wait) : 0;
+
+  function invokeFunc(time: number): unknown {
+    timerId = undefined;
+
+    // Only invoke if we have `lastCallTime` which means `func` has been
+    // debounced at least once.
+    if (lastCallTime !== undefined) {
+      lastInvokeTime = time;
+      callbackReturnValue = func();
+    }
+
+    return callbackReturnValue;
+  }
+
+  function calcRemainingWait(time: number): number {
+    const timeSinceLastCall = time - (lastCallTime || 0);
+    const timeSinceLastInvoke = time - lastInvokeTime;
+    const remainingWait = wait - timeSinceLastCall;
+
+    return maxWait ? Math.min(remainingWait, maxWait - timeSinceLastInvoke) : remainingWait;
+  }
+
+  function shouldInvoke(time: number): boolean {
+    const timeSinceLastCall = time - (lastCallTime || 0);
+    const timeSinceLastInvoke = time - lastInvokeTime;
+    // console.log({ timeSinceLastCall, timeSinceLastInvoke, wait });
+
+    return timeSinceLastCall >= wait || (Boolean(maxWait) && timeSinceLastInvoke >= maxWait);
+  }
+
+  function timerExpired(): void {
+    const time = Date.now();
+    // console.log('timerexpired', time);
+    if (shouldInvoke(time)) {
+      // console.log('invoking', time);
+
+      return void invokeFunc(time);
+    }
+
+    // Restart the timer.
+    timerId = setTimeout(timerExpired, calcRemainingWait(time));
+  }
+
+  function cancel(): void {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastCallTime = timerId = undefined;
+  }
+
+  function flush(): unknown {
+    return timerId === undefined ? callbackReturnValue : invokeFunc(Date.now());
+  }
+
+  function debounced(): unknown {
+    lastCallTime = Date.now();
+    if (timerId === undefined) {
+      lastInvokeTime = lastCallTime;
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return callbackReturnValue;
+  }
+
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}

packages/utils/src/index.ts

@@ -27,3 +27,4 @@ export * from './clientreport';
 export * from './ratelimit';
 export * from './baggage';
 export * from './url';
+export * from './debounce';

packages/utils/test/debounce.test.ts

@@ -0,0 +1,127 @@
+import { debounce } from '../src/debounce';
+
+describe('debounce', () => {
+  jest.useFakeTimers();
+  it('delay the execution of the passed callback function by the passed minDelay', () => {
+    const callback = jest.fn();
+    const debouncedCallback = debounce(callback, 100);
+    debouncedCallback();
+    expect(callback).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(99);
+    expect(callback).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(1);
+    expect(callback).toHaveBeenCalled();
+  });
+
+  it('should invoke the callback at latest by maxWait, if the option is specified', () => {
+    const callback = jest.fn();
+    const debouncedCallback = debounce(callback, 100, { maxWait: 150 });
+    debouncedCallback();
+    expect(callback).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(98);
+    expect(callback).not.toHaveBeenCalled();
+
+    debouncedCallback();
+
+    jest.advanceTimersByTime(1);
+    expect(callback).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(49);
+    // at this time, the callback shouldn't be invoked and with a new call, it should be devounced further.
+    debouncedCallback();
+    expect(callback).not.toHaveBeenCalled();
+
+    // But because the maxWait is reached, the callback should nevertheless be invoked.
+    jest.advanceTimersByTime(10);
+    expect(callback).toHaveBeenCalled();
+  });
+
+  it('should not invoke the callback as long as it is debounced and no maxWait option is specified', () => {
+    const callback = jest.fn();
+    const debouncedCallback = debounce(callback, 100);
+    debouncedCallback();
+    expect(callback).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(99);
+    expect(callback).not.toHaveBeenCalled();
+
+    debouncedCallback();
+
+    jest.advanceTimersByTime(1);
+    expect(callback).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(98);
+    debouncedCallback();
+    expect(callback).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(99);
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('should invoke the callback as soon as callback.flush() is called', () => {
+    const callback = jest.fn();
+    const debouncedCallback = debounce(callback, 100, { maxWait: 200 });
+    debouncedCallback();
+    expect(callback).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(10);
+    expect(callback).not.toHaveBeenCalled();
+
+    debouncedCallback.flush();
+    expect(callback).toHaveBeenCalled();
+  });
+
+  it('should not invoke the callback, if  callback.cancel() is called', () => {
+    const callback = jest.fn();
+    const debouncedCallback = debounce(callback, 100, { maxWait: 200 });
+    debouncedCallback();
+    expect(callback).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(99);
+    expect(callback).not.toHaveBeenCalled();
+
+    // If the callback is canceled, it should not be invoked after the minwait
+    debouncedCallback.cancel();
+    jest.advanceTimersByTime(1);
+    expect(callback).not.toHaveBeenCalled();
+
+    // And it should also not be invoked after the maxWait
+    jest.advanceTimersByTime(500);
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it("should return the callback's return value when calling callback.flush()", () => {
+    const callback = jest.fn().mockReturnValue('foo');
+    const debouncedCallback = debounce(callback, 100);
+
+    debouncedCallback();
+
+    const returnValue = debouncedCallback.flush();
+    expect(returnValue).toBe('foo');
+  });
+
+  it('should return the callbacks return value on subsequent calls of the debounced function', () => {
+    const callback = jest.fn().mockReturnValue('foo');
+    const debouncedCallback = debounce(callback, 100);
+
+    const returnValue1 = debouncedCallback();
+    expect(returnValue1).toBe(undefined);
+    expect(callback).not.toHaveBeenCalled();
+
+    // now we expect the callback to have been invoked
+    jest.advanceTimersByTime(200);
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    // calling the debounced function now should return the return value of the callback execution
+    const returnValue2 = debouncedCallback();
+    expect(returnValue2).toBe('foo');
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    // and the callback should also be invoked again
+    jest.advanceTimersByTime(200);
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
+});