feat: Add build flags to allow noop iframe/canvas/shadow dom managers

getsentry · Oct 17, 2023 · 7652621 · 7652621
1 parent a087e56
commit 7652621
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 17 deletions.
diff --git a/packages/rrweb/src/record/iframe-manager.ts b/packages/rrweb/src/record/iframe-manager.ts
@@ -12,7 +12,37 @@ import type {
 } from '@sentry-internal/rrweb-types';
 import type { StylesheetManager } from './stylesheet-manager';
 
-export class IframeManager {
+export interface IframeManagerInterface {
+  crossOriginIframeMirror: CrossOriginIframeMirror;
+  crossOriginIframeStyleMirror: CrossOriginIframeMirror;
+  crossOriginIframeRootIdMap: WeakMap<HTMLIFrameElement, number>;
+
+  addIframe(iframeEl: HTMLIFrameElement): void;
+  addLoadListener(cb: (iframeEl: HTMLIFrameElement) => unknown): void;
+  attachIframe(
+    iframeEl: HTMLIFrameElement,
+    childSn: serializedNodeWithId,
+  ) : void;
+}
+
+export class IframeManagerNoop implements IframeManagerInterface {
+  public crossOriginIframeMirror = new CrossOriginIframeMirror(genId);
+  public crossOriginIframeStyleMirror: CrossOriginIframeMirror;
+  public crossOriginIframeRootIdMap: WeakMap<HTMLIFrameElement, number> =
+    new WeakMap();
+
+  public addIframe() {
+    // noop
+  }
+  public addLoadListener() {
+    // noop
+  }
+  public attachIframe() {
+    // noop
+  }
+}
+
+export class IframeManager implements IframeManagerInterface {
   private iframes: WeakMap<HTMLIFrameElement, true> = new WeakMap();
   private crossOriginIframeMap: WeakMap<MessageEventSource, HTMLIFrameElement> =
     new WeakMap();

diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
@@ -29,9 +29,9 @@ import {
   adoptedStyleSheetParam,
 } from '@sentry-internal/rrweb-types';
 import type { CrossOriginIframeMessageEventContent } from '../types';
-import { IframeManager } from './iframe-manager';
-import { ShadowDomManager } from './shadow-dom-manager';
-import { CanvasManager } from './observers/canvas/canvas-manager';
+import { IframeManager, IframeManagerInterface, IframeManagerNoop } from './iframe-manager';
+import { ShadowDomManager, ShadowDomManagerInterface, ShadowDomManagerNoop } from './shadow-dom-manager';
+import { CanvasManager, CanvasManagerInterface, CanvasManagerNoop } from './observers/canvas/canvas-manager';
 import { StylesheetManager } from './stylesheet-manager';
 import ProcessedNodeManager from './processed-node-manager';
 import {
@@ -47,10 +47,16 @@ function wrapEvent(e: event): eventWithTime {
   };
 }
 
+declare global {
+  const __RRWEB_EXCLUDE_CANVAS__: boolean;
+  const __RRWEB_EXCLUDE_SHADOW_DOM__: boolean;
+  const __RRWEB_EXCLUDE_IFRAME__: boolean;
+}
+
 let wrappedEmit!: (e: eventWithTime, isCheckout?: boolean) => void;
 
 let takeFullSnapshot!: (isCheckout?: boolean) => void;
-let canvasManager!: CanvasManager;
+let canvasManager: CanvasManagerInterface;
 let recording = false;
 
 const mirror = createMirror();
@@ -291,7 +297,7 @@ function record<T = eventWithTime>(
     adoptedStyleSheetCb: wrappedAdoptedStyleSheetEmit,
   });
 
-  const iframeManager = new IframeManager({
+  const iframeManager: IframeManagerInterface = __RRWEB_EXCLUDE_IFRAME__ ? new IframeManagerNoop() :  new IframeManager({
     mirror,
     mutationCb: wrappedMutationEmit,
     stylesheetManager: stylesheetManager,
@@ -308,13 +314,13 @@ function record<T = eventWithTime>(
         nodeMirror: mirror,
         crossOriginIframeMirror: iframeManager.crossOriginIframeMirror,
         crossOriginIframeStyleMirror:
-          iframeManager.crossOriginIframeStyleMirror,
+        iframeManager.crossOriginIframeStyleMirror,
       });
   }
 
   const processedNodeManager = new ProcessedNodeManager();
 
-  canvasManager = new CanvasManager({
+  canvasManager = __RRWEB_EXCLUDE_CANVAS__ ? new CanvasManagerNoop() : new CanvasManager({
     recordCanvas,
     mutationCb: wrappedCanvasMutationEmit,
     win: window,
@@ -326,7 +332,7 @@ function record<T = eventWithTime>(
     dataURLOptions,
   });
 
-  const shadowDomManager = new ShadowDomManager({
+  const shadowDomManager: ShadowDomManagerInterface = __RRWEB_EXCLUDE_SHADOW_DOM__ ? new ShadowDomManagerNoop() :  new ShadowDomManager({
     mutationCb: wrappedMutationEmit,
     scrollCb: wrappedScrollEmit,
     bypassOptions: {

diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
@@ -28,7 +28,33 @@ type pendingCanvasMutationsMap = Map<
   canvasMutationWithType[]
 >;
 
-export class CanvasManager {
+export interface CanvasManagerInterface {
+  reset(): void;
+  freeze(): void;
+  unfreeze(): void;
+  lock(): void;
+  unlock(): void;
+}
+
+export class CanvasManagerNoop implements CanvasManagerInterface {
+  public reset() {
+    // noop
+  }
+  public freeze() {
+    // noop
+  }
+  public unfreeze() {
+    // noop
+  }
+  public lock() {
+    // noop
+  }
+  public unlock() {
+    // noop
+  }
+}
+
+export class CanvasManager implements CanvasManagerInterface {
   private pendingCanvasMutations: pendingCanvasMutationsMap = new Map();
   private rafStamps: RafStamps = { latestId: 0, invokeId: null };
   private mirror: Mirror;

diff --git a/packages/rrweb/src/record/shadow-dom-manager.ts b/packages/rrweb/src/record/shadow-dom-manager.ts
@@ -20,7 +20,29 @@ type BypassOptions = Omit<
   sampling: SamplingStrategy;
 };
 
-export class ShadowDomManager {
+export interface ShadowDomManagerInterface {
+  init(): void;
+  addShadowRoot(shadowRoot: ShadowRoot, doc: Document): void;
+  observeAttachShadow(iframeElement: HTMLIFrameElement): void;
+  reset(): void;
+}
+
+export class ShadowDomManagerNoop implements ShadowDomManagerInterface {
+  public init() {
+    // noop
+  }
+  public addShadowRoot() {
+    // noop
+  }
+  public observeAttachShadow() {
+    // noop
+  }
+  public reset() {
+    // noop
+  }
+}
+
+export class ShadowDomManager implements ShadowDomManagerInterface {
   private shadowDoms = new WeakSet<ShadowRoot>();
   private mutationCb: mutationCallBack;
   private scrollCb: scrollCallback;

diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
@@ -8,11 +8,11 @@ import type {
   MaskAttributeFn,
 } from '@sentry-internal/rrweb-snapshot';
 import type { PackFn, UnpackFn } from './packer/base';
-import type { IframeManager } from './record/iframe-manager';
-import type { ShadowDomManager } from './record/shadow-dom-manager';
+import type { IframeManager, IframeManagerInterface } from './record/iframe-manager';
+import type { ShadowDomManager, ShadowDomManagerInterface } from './record/shadow-dom-manager';
 import type { Replayer } from './replay';
 import type { RRNode } from '@sentry-internal/rrdom';
-import type { CanvasManager } from './record/observers/canvas/canvas-manager';
+import type { CanvasManager, CanvasManagerInterface } from './record/observers/canvas/canvas-manager';
 import type { StylesheetManager } from './record/stylesheet-manager';
 import type {
   addedNodeMutation,
@@ -122,10 +122,10 @@ export type observerParam = {
   dataURLOptions: DataURLOptions;
   doc: Document;
   mirror: Mirror;
-  iframeManager: IframeManager;
+  iframeManager: IframeManagerInterface;
   stylesheetManager: StylesheetManager;
-  shadowDomManager: ShadowDomManager;
-  canvasManager: CanvasManager;
+  shadowDomManager: ShadowDomManagerInterface;
+  canvasManager: CanvasManagerInterface;
   processedNodeManager: ProcessedNodeManager;
   ignoreCSSAttributes: Set<string>;
   plugins: Array<{