rrweb changes based on ue-sdk

Author: kanishq1

.vscode/rrweb-monorepo.code-workspace

@@ -0,0 +1,52 @@
+# Changelog
+
+This objective of this document is to track the changes being made in the rrweb package files
+
+## v0.3.0
+
+### Features
+
+- Added image masking capability on img tags using class selector 'ue-mask'
+- Added masking capability on input tags using class selector 'ue-input-mask'
+
+### Changes
+
+/packages/rrweb-snapshot/src/snapshot.ts
+
+- added img masking logic in function serializeElementNode(n, options) on line 793
+
+/packages/rrweb/src/record/mutation.ts
+
+- added mutation logic for masking img in function processMutation on line 670
+
+/packages/rrweb/src/record/observer.ts
+
+- added masking logic for input tags in function eventHandler on line 470
+
+/packages/rrweb/src/record/index.ts
+
+- added property 'maskInputClass' on line number 76 and 530 inside record and observe functions.
+
+/packages/rrweb/src/types.ts
+
+- updated types recordOptions and observeParam, added maskTextClass property in both.
+
+## v0.3.4
+
+### Fix
+
+- Memory leak issues on IframeManager and observers
+
+### Changes
+
+/packages/rrweb/src/record/observer.ts
+
+- flushMutationBuffers() added to clear mutationBuffers
+
+/packages/rrweb/src/record/iframe-manager.ts
+
+- function to cleanup handleMessage() in eventListener
+
+/packages/rrweb/src/record/index.ts
+
+- calling flushMutationBuffers & IframeManger cleanup() in record()

CHANGELOG_UE.md

@@ -1,3 +1,4 @@
+
 import {
   serializedNode,
   serializedNodeWithId,
@@ -32,6 +33,8 @@ const tagNameRegex = new RegExp('[^a-z0-9-_:]');
 
 export const IGNORED_NODE = -2;
 
+const BLANK_IMAGE_SRC = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAABNJREFUCB1jZGBg+A/EDEwgAgQADigBA//q6GsAAAAASUVORK5CYII%3D';
+
 export function genId(): number {
   return _id++;
 }
@@ -440,6 +443,7 @@ function serializeNode(
     mirror: Mirror;
     blockClass: string | RegExp;
     blockSelector: string | null;
+    maskTextClass: string | RegExp;
     needsMask: boolean | undefined;
     inlineStylesheet: boolean;
     maskInputOptions: MaskInputOptions;
@@ -460,6 +464,7 @@ function serializeNode(
     mirror,
     blockClass,
     blockSelector,
+    maskTextClass,
     needsMask,
     inlineStylesheet,
     maskInputOptions = {},
@@ -500,6 +505,7 @@ function serializeNode(
         doc,
         blockClass,
         blockSelector,
+        maskTextClass,
         inlineStylesheet,
         maskInputOptions,
         maskInputFn,
@@ -600,6 +606,7 @@ function serializeElementNode(
     doc: Document;
     blockClass: string | RegExp;
     blockSelector: string | null;
+    maskTextClass: string | RegExp;
     inlineStylesheet: boolean;
     maskInputOptions: MaskInputOptions;
     maskInputFn: MaskInputFn | undefined;
@@ -779,6 +786,32 @@ function serializeElementNode(
     if (image.complete && image.naturalWidth !== 0) recordInlineImage();
     else image.addEventListener('load', recordInlineImage);
   }
+  // dont store src of img with maskTextClass class
+  // replace src with blank png 
+  let maskTextClass = options.maskTextClass;
+  if (tagName === 'img' && attributes.class && typeof attributes.class === 'string'
+    && maskTextClass && typeof maskTextClass === 'string' &&
+    attributes.class.includes(maskTextClass)) {
+    const image = n as HTMLImageElement;
+    const maskImg = () => {
+
+      attributes.src = BLANK_IMAGE_SRC;
+      // set width & height in style attribute of img 
+      if (attributes.style && typeof attributes.style === 'string') {
+        if (!attributes.style.includes('width')) {
+          attributes.style = `${attributes.style}; width: ${image.width}px;`
+        }
+        if (!attributes.style.includes('height')) {
+          attributes.style = `${attributes.style}; height: ${image.height}px`;
+        }
+      } else {
+        attributes.style = `width: ${image.width}px; height: ${image.height}px`;
+      }
+    }
+    // The image content may not have finished loading yet.
+    if (image.complete) maskImg();
+    else image.onload = maskImg;
+  }
   // media elements
   if (tagName === 'audio' || tagName === 'video') {
     const mediaAttributes = attributes as mediaAttributes;
@@ -1026,6 +1059,7 @@ export function serializeNodeWithId(
     blockClass,
     blockSelector,
     needsMask,
+    maskTextClass,
     inlineStylesheet,
     maskInputOptions,
     maskTextFn,

packages/rrdom-nodejs/.vscode/extensions.json

@@ -24,6 +24,7 @@ export class IframeManager {
   private loadListener?: (iframeEl: HTMLIFrameElement) => unknown;
   private stylesheetManager: StylesheetManager;
   private recordCrossOriginIframes: boolean;
+  private boundHandleMessage;
 
   constructor(options: {
     mirror: Mirror;
@@ -42,8 +43,9 @@ export class IframeManager {
       ),
     );
     this.mirror = options.mirror;
+    this.boundHandleMessage = this.handleMessage.bind(this);
     if (this.recordCrossOriginIframes) {
-      window.addEventListener('message', this.handleMessage.bind(this));
+      window.addEventListener('message', this.boundHandleMessage);
     }
   }
 
@@ -299,4 +301,8 @@ export class IframeManager {
       });
     }
   }
+
+  public cleanup () {
+    window.removeEventListener('message', this.boundHandleMessage);
+  }
 }

packages/rrdom-nodejs/.vscode/launch.json

@@ -4,7 +4,7 @@ import {
   SlimDOMOptions,
   createMirror,
 } from 'rrweb-snapshot';
-import { initObservers, mutationBuffers } from './observer';
+import { flushMutationBuffers, initObservers, mutationBuffers } from './observer';
 import {
   on,
   getWindowWidth,
@@ -73,6 +73,7 @@ function record<T = eventWithTime>(
     ignoreClass = 'rr-ignore',
     ignoreSelector = null,
     maskTextClass = 'rr-mask',
+    maskInputClass = 'rr-input-mask',
     maskTextSelector = null,
     inlineStylesheet = true,
     maskAllInputs,
@@ -526,6 +527,7 @@ function record<T = eventWithTime>(
           ignoreClass,
           ignoreSelector,
           maskTextClass,
+          maskInputClass,
           maskTextSelector,
           maskInputOptions,
           inlineStylesheet,
@@ -617,6 +619,8 @@ function record<T = eventWithTime>(
       processedNodeManager.destroy();
       recording = false;
       unregisterErrorHandler();
+      flushMutationBuffers();
+      iframeManager.cleanup();
     };
   } catch (error) {
     // TODO: handle internal error

packages/rrweb-snapshot/src/snapshot.ts

@@ -133,6 +133,8 @@ class DoubleLinkedList {
 
 const moveKey = (id: number, parentId: number) => `${id}@${parentId}`;
 
+const BLANK_IMAGE_SRC = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAABNJREFUCB1jZGBg+A/EDEwgAgQADigBA//q6GsAAAAASUVORK5CYII%3D';
+
 /**
  * controls behaviour of a MutationObserver
  */
@@ -665,6 +667,16 @@ export default class MutationBuffer {
             }
           }
         }
+         // dont track img src changes if it has maskTextClass class
+         if (m.attributeName === 'src' && (m.target as HTMLElement).nodeName === 'IMG' && this.maskTextClass && typeof this.maskTextClass === 'string' &&
+         target.classList.toString().includes(this.maskTextClass)) {
+           item.attributes[m.attributeName!] = transformAttribute(
+             this.doc,
+             toLowerCase((m.target as HTMLElement).tagName),
+             m.attributeName!,
+             BLANK_IMAGE_SRC,
+         );
+       }
         break;
       }
       case 'childList': {

packages/rrweb/src/record/iframe-manager.ts

@@ -60,7 +60,11 @@ type WindowWithAngularZone = IWindow & {
   };
 };
 
-export const mutationBuffers: MutationBuffer[] = [];
+export let mutationBuffers: MutationBuffer[] = [];
+
+export const flushMutationBuffers = () => {
+  mutationBuffers = [];
+}
 
 // Event.path is non-standard and used in some older browsers
 type NonStandardEvent = Omit<Event, 'composedPath'> & {
@@ -418,6 +422,7 @@ function initInputObserver({
   ignoreSelector,
   maskInputOptions,
   maskInputFn,
+  maskInputClass,
   sampling,
   userTriggeredOnInput,
 }: observerParam): listenerHandler {
@@ -466,7 +471,10 @@ function initInputObserver({
         value: text,
         maskInputFn,
       });
+    } else if ((target as HTMLElement).classList.contains(maskInputClass)) {
+      text = "*".repeat(text.length)
     }
+    
     cbWithDedup(
       target,
       userTriggeredOnInput

packages/rrweb/src/record/index.ts

@@ -50,6 +50,7 @@ export type recordOptions<T> = {
   ignoreClass?: string;
   ignoreSelector?: string;
   maskTextClass?: maskTextClass;
+  maskInputClass?: string;
   maskTextSelector?: string;
   maskAllInputs?: boolean;
   maskInputOptions?: MaskInputOptions;
@@ -90,6 +91,7 @@ export type observerParam = {
   ignoreClass: string;
   ignoreSelector: string | null;
   maskTextClass: maskTextClass;
+  maskInputClass: string;
   maskTextSelector: string | null;
   maskInputOptions: MaskInputOptions;
   maskInputFn?: MaskInputFn;