feat: Ensure to use unwrapped versions of setTimeout / clearTimeout (#176)

Let's see if that helps with Angular performance some more...!

Closes getsentry/sentry-javascript#11661
(hopefully...)

Author: mydea

packages/rrweb/src/record/observer.ts

@@ -21,6 +21,7 @@ import {
   patch,
   StyleSheetMirror,
   nowTimestamp,
+  setTimeout,
 } from '../utils';
 import type { observerParam, MutationBufferParam } from '../types';
 import {

packages/rrweb/src/record/observers/canvas/2d.ts

@@ -5,7 +5,7 @@ import {
   IWindow,
   listenerHandler,
 } from '@sentry-internal/rrweb-types';
-import { hookSetter, isBlocked, patch } from '../../../utils';
+import { hookSetter, isBlocked, patch, setTimeout } from '../../../utils';
 import { serializeArgs } from './serialize-args';
 
 export default function initCanvas2DMutationObserver(

packages/rrweb/src/record/shadow-dom-manager.ts

@@ -9,7 +9,7 @@ import {
   initScrollObserver,
   initAdoptedStyleSheetObserver,
 } from './observer';
-import { patch, inDom } from '../utils';
+import { patch, inDom, setTimeout } from '../utils';
 import type { Mirror } from '@sentry-internal/rrweb-snapshot';
 import { isNativeShadowDom } from '@sentry-internal/rrweb-snapshot';
 

packages/rrweb/src/replay/index.ts

@@ -76,6 +76,8 @@ import {
   getPositionsAndIndex,
   uniqueTextMutations,
   StyleSheetMirror,
+  clearTimeout,
+  setTimeout,
 } from '../utils';
 import getInjectStyleRules from './styles/inject-style';
 import './styles/style.css';

packages/rrweb/src/utils.ts

@@ -607,45 +607,66 @@ export function inDom(n: Node): boolean {
   return doc.contains(n) || shadowHostInDom(n);
 }
 
-let cachedRequestAnimationFrameImplementation:
-  | undefined
-  | typeof requestAnimationFrame;
-
 /**
- * We generally want to use window.requestAnimationFrame.
+ * We generally want to use window.requestAnimationFrame / window.setTimeout / window.clearTimeout.
  * However, in some cases this may be wrapped (e.g. by Zone.js for Angular),
  * so we try to get an unpatched version of this from a sandboxed iframe.
  */
-function getRequestAnimationFrameImplementation(): typeof requestAnimationFrame {
-  if (cachedRequestAnimationFrameImplementation) {
-    return cachedRequestAnimationFrameImplementation;
+
+interface CacheableImplementations {
+  requestAnimationFrame: typeof requestAnimationFrame;
+  setTimeout: typeof setTimeout;
+  clearTimeout: typeof clearTimeout;
+}
+
+const cachedImplementations: Partial<CacheableImplementations> = {};
+
+function getImplementation<T extends keyof CacheableImplementations>(
+  name: T,
+): CacheableImplementations[T] {
+  const cached = cachedImplementations[name];
+  if (cached) {
+    return cached;
   }
 
   const document = window.document;
-  let requestAnimationFrameImplementation = window.requestAnimationFrame;
+  let impl = window[name] as CacheableImplementations[T];
   if (document && typeof document.createElement === 'function') {
     try {
       const sandbox = document.createElement('iframe');
       sandbox.hidden = true;
       document.head.appendChild(sandbox);
       const contentWindow = sandbox.contentWindow;
-      if (contentWindow && contentWindow.requestAnimationFrame) {
-        requestAnimationFrameImplementation =
+      if (contentWindow && contentWindow[name]) {
+        impl =
           // eslint-disable-next-line @typescript-eslint/unbound-method
-          contentWindow.requestAnimationFrame;
+          contentWindow[name] as CacheableImplementations[T];
       }
       document.head.removeChild(sandbox);
     } catch (e) {
-      // Could not create sandbox iframe, just use window.requestAnimationFrame
+      // Could not create sandbox iframe, just use window.xxx
     }
   }
 
-  return (cachedRequestAnimationFrameImplementation =
-    requestAnimationFrameImplementation.bind(window));
+  return (cachedImplementations[name] = impl.bind(
+    window,
+  ) as CacheableImplementations[T]);
 }
 
 export function onRequestAnimationFrame(
   ...rest: Parameters<typeof requestAnimationFrame>
 ): ReturnType<typeof requestAnimationFrame> {
-  return getRequestAnimationFrameImplementation()(...rest);
+  return getImplementation('requestAnimationFrame')(...rest);
+}
+
+export function setTimeout(
+  ...rest: Parameters<typeof window.setTimeout>
+): ReturnType<typeof window.setTimeout> {
+  return getImplementation('setTimeout')(...rest);
+}
+
+export function clearTimeout(
+  ...rest: Parameters<typeof window.clearTimeout>
+): ReturnType<typeof window.clearTimeout> {
+  return getImplementation('clearTimeout')(...rest);
 }