use 2-timers approach and adjust tests

Author: Lms24

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, setContext } from '@sentry/core';
 import { Breadcrumb, Event } from '@sentry/types';
-import { addInstrumentationHandler, debounce, logger } from '@sentry/utils';
+import { addInstrumentationHandler, logger } from '@sentry/utils';
 import { EventType, record } from 'rrweb';
 
 import {
@@ -44,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';
@@ -872,6 +873,7 @@ export class ReplayContainer implements ReplayContainerInterface {
     // It's possible there are other flush requests queued and waiting for it
     // to resolve. We want to reduce all outstanding requests (as well as any
     // new flush requests that occur within a second of the locked flush
+    // completing) into a single flush.thin a second of the locked flush
     // completing) into a single flush.
 
     try {

packages/utils/src/debounce.ts renamed to packages/replay/src/util/debounce.ts

@@ -26,72 +26,45 @@ type DebounceOptions = { maxWait?: number };
  */
 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;
+  let timerId: ReturnType<typeof setTimeout> | undefined;
+  let maxTimerId: ReturnType<typeof setTimeout> | undefined;
 
-  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();
-    }
+  const maxWait = options && options.maxWait ? Math.max(options.maxWait, wait) : 0;
 
+  function invokeFunc(): unknown {
+    cancelTimers();
+    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 cancelTimers(): void {
+    timerId !== undefined && clearTimeout(timerId);
+    maxTimerId !== undefined && clearTimeout(maxTimerId);
+    timerId = maxTimerId = undefined;
   }
 
-  function shouldInvoke(time: number): boolean {
-    const timeSinceLastCall = time - (lastCallTime || 0);
-    const timeSinceLastInvoke = time - lastInvokeTime;
-
-    return timeSinceLastCall >= wait || (Boolean(maxWait) && timeSinceLastInvoke >= maxWait);
-  }
-
-  function timerExpired(): void {
-    const time = Date.now();
-    if (shouldInvoke(time)) {
-      return void invokeFunc(time);
+  function flush(): unknown {
+    if (timerId !== undefined || maxTimerId !== undefined) {
+      return invokeFunc();
     }
-
-    // Restart the timer.
-    timerId = setTimeout(timerExpired, calcRemainingWait(time));
+    return callbackReturnValue;
   }
 
-  function cancel(): void {
-    if (timerId !== undefined) {
+  function debounced(): unknown {
+    if (timerId) {
       clearTimeout(timerId);
     }
-    lastInvokeTime = 0;
-    lastCallTime = timerId = undefined;
-  }
+    timerId = setTimeout(invokeFunc, wait);
 
-  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);
+    if (maxWait && maxTimerId === undefined) {
+      maxTimerId = setTimeout(invokeFunc, maxWait);
     }
+
     return callbackReturnValue;
   }
 
-  debounced.cancel = cancel;
+  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({