inline stylesheets when loaded

packages/rrweb-snapshot/src/snapshot.ts

@@ -10,6 +10,7 @@ import {
   MaskInputFn,
   KeepIframeSrcFn,
   ICanvas,
+  serializedElementNodeWithId,
 } from './types';
 import {
   Mirror,
@@ -372,6 +373,44 @@ function onceIframeLoaded(
   iframeEl.addEventListener('load', listener);
 }
 
+function isStylesheetLoaded(link: HTMLLinkElement) {
+  return link.sheet !== null;
+}
+
+function onceStylesheetLoaded(
+  link: HTMLLinkElement,
+  listener: () => unknown,
+  iframeLoadTimeout: number,
+) {
+  let fired = false;
+  let styleSheetLoaded: StyleSheet | null;
+  try {
+    styleSheetLoaded = link.sheet;
+  } catch (error) {
+    return;
+  }
+
+  if (!styleSheetLoaded) {
+    const timer = setTimeout(() => {
+      if (!fired) {
+        listener();
+        fired = true;
+      }
+    }, iframeLoadTimeout);
+    link.addEventListener('load', () => {
+      clearTimeout(timer);
+      fired = true;
+      listener();
+    });
+    return;
+  }
+
+  // stylesheet was already loaded, make sure we wait to trigger the listener
+  // till _after_ the mutation that found this stylesheet has had time to process
+  setTimeout(listener, 0);
+  return;
+}
+
 function serializeNode(
   n: Node,
   options: {
@@ -466,7 +505,7 @@ function serializeNode(
         });
         let cssText: string | null = null;
         if (stylesheet) {
-          cssText = getCssRulesString(stylesheet );
+          cssText = getCssRulesString(stylesheet);
         }
         if (cssText) {
           delete attributes.rel;
@@ -845,9 +884,14 @@ export function serializeNodeWithId(
     onSerialize?: (n: Node) => unknown;
     onIframeLoad?: (
       iframeNode: HTMLIFrameElement,
-      node: serializedNodeWithId,
+      node: serializedElementNodeWithId,
     ) => unknown;
     iframeLoadTimeout?: number;
+    onStylesheetLoad?: (
+      linkNode: HTMLLinkElement,
+      node: serializedElementNodeWithId,
+    ) => unknown;
+    stylesheetLoadTimeout?: number;
     enableStrictPrivacy: boolean;
   },
 ): serializedNodeWithId | null {
@@ -870,6 +914,8 @@ export function serializeNodeWithId(
     onSerialize,
     onIframeLoad,
     iframeLoadTimeout = 5000,
+    onStylesheetLoad,
+    stylesheetLoadTimeout = 5000,
     keepIframeSrcFn = () => false,
     enableStrictPrivacy,
   } = options;
@@ -973,6 +1019,8 @@ export function serializeNodeWithId(
       onSerialize,
       onIframeLoad,
       iframeLoadTimeout,
+      onStylesheetLoad,
+      stylesheetLoadTimeout,
       keepIframeSrcFn,
       enableStrictPrivacy,
     };
@@ -1032,14 +1080,64 @@ export function serializeNodeWithId(
           });
 
           if (serializedIframeNode) {
-            onIframeLoad(n as HTMLIFrameElement, serializedIframeNode);
+            onIframeLoad(
+              n as HTMLIFrameElement,
+              serializedIframeNode as serializedElementNodeWithId,
+            );
           }
         }
       },
       iframeLoadTimeout,
     );
   }
 
+  // <link rel=stylesheet href=...>
+  if (
+    serializedNode.type === NodeType.Element &&
+    serializedNode.tagName === 'link' &&
+    serializedNode.attributes.rel === 'stylesheet'
+  ) {
+    onceStylesheetLoaded(
+      n as HTMLLinkElement,
+      () => {
+        if (onStylesheetLoad) {
+          const serializedLinkNode = serializeNodeWithId(n, {
+            doc,
+            mirror,
+            blockClass,
+            blockSelector,
+            maskTextClass,
+            maskTextSelector,
+            skipChild: false,
+            inlineStylesheet,
+            maskInputOptions,
+            maskTextFn,
+            maskInputFn,
+            slimDOMOptions,
+            dataURLOptions,
+            inlineImages,
+            recordCanvas,
+            preserveWhiteSpace,
+            onSerialize,
+            onIframeLoad,
+            onStylesheetLoad,
+            iframeLoadTimeout,
+            keepIframeSrcFn,
+          });
+
+          if (serializedLinkNode) {
+            onStylesheetLoad(
+              n as HTMLLinkElement,
+              serializedLinkNode as serializedElementNodeWithId,
+            );
+          }
+        }
+      },
+      stylesheetLoadTimeout,
+    );
+    if (isStylesheetLoaded(n as HTMLLinkElement) === false) return null; // add stylesheet in later mutation
+  }
+
   return serializedNode;
 }
 
@@ -1063,9 +1161,14 @@ function snapshot(
     onSerialize?: (n: Node) => unknown;
     onIframeLoad?: (
       iframeNode: HTMLIFrameElement,
-      node: serializedNodeWithId,
+      node: serializedElementNodeWithId,
     ) => unknown;
     iframeLoadTimeout?: number;
+    onStylesheetLoad?: (
+      linkNode: HTMLLinkElement,
+      node: serializedElementNodeWithId,
+    ) => unknown;
+    stylesheetLoadTimeout?: number;
     keepIframeSrcFn?: KeepIframeSrcFn;
     enableStrictPrivacy: boolean;
   },
@@ -1088,6 +1191,8 @@ function snapshot(
     onSerialize,
     onIframeLoad,
     iframeLoadTimeout,
+    onStylesheetLoad,
+    stylesheetLoadTimeout,
     keepIframeSrcFn = () => false,
     enableStrictPrivacy = false,
   } = options || {};
@@ -1137,26 +1242,27 @@ function snapshot(
   return serializeNodeWithId(n, {
     doc: n,
     mirror,
-      blockClass,
-      blockSelector,
-      maskTextClass,
-      maskTextSelector,
-      skipChild: false,
-      inlineStylesheet,
-      maskInputOptions,
-      maskTextFn,
-      maskInputFn,
-      slimDOMOptions,
-      dataURLOptions,
-      inlineImages,
-      recordCanvas,
-      preserveWhiteSpace,
-      onSerialize,
-      onIframeLoad,
-      iframeLoadTimeout,
-      keepIframeSrcFn,
-      enableStrictPrivacy,
-    });
+    blockClass,
+    blockSelector,
+    maskTextClass,
+    maskTextSelector,
+    skipChild: false,
+    inlineStylesheet,
+    maskInputOptions,
+    maskTextFn,
+    maskInputFn,
+    slimDOMOptions,
+    dataURLOptions,
+    inlineImages,
+    recordCanvas,
+    preserveWhiteSpace,
+    onSerialize,
+    onIframeLoad,
+    iframeLoadTimeout,
+    onStylesheetLoad,
+    stylesheetLoadTimeout,keepIframeSrcFn,
+    enableStrictPrivacy,
+  });
 }
 
 export function visitSnapshot(

packages/rrweb-snapshot/src/types.ts

@@ -63,6 +63,11 @@ export type serializedNode = (
 
 export type serializedNodeWithId = serializedNode & { id: number };
 
+export type serializedElementNodeWithId = Extract<
+  serializedNodeWithId,
+  Record<'type', NodeType.Element>
+>;
+
 export type tagMap = {
   [key: string]: string;
 };

packages/rrweb-snapshot/typings/snapshot.d.ts

@@ -1,4 +1,4 @@
-import { serializedNodeWithId, MaskInputOptions, SlimDOMOptions, DataURLOptions, MaskTextFn, MaskInputFn, KeepIframeSrcFn } from './types';
+import { serializedNodeWithId, MaskInputOptions, SlimDOMOptions, DataURLOptions, MaskTextFn, MaskInputFn, KeepIframeSrcFn, serializedElementNodeWithId } from './types';
 import { Mirror } from './utils';
 export declare const IGNORED_NODE = -2;
 export declare function absoluteToStylesheet(cssText: string | null, href: string): string;
@@ -25,8 +25,10 @@ export declare function serializeNodeWithId(n: Node, options: {
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: Node) => unknown;
-    onIframeLoad?: (iframeNode: HTMLIFrameElement, node: serializedNodeWithId) => unknown;
+    onIframeLoad?: (iframeNode: HTMLIFrameElement, node: serializedElementNodeWithId) => unknown;
     iframeLoadTimeout?: number;
+    onStylesheetLoad?: (linkNode: HTMLLinkElement, node: serializedElementNodeWithId) => unknown;
+    stylesheetLoadTimeout?: number;
     enableStrictPrivacy: boolean;
 }): serializedNodeWithId | null;
 declare function snapshot(n: Document, options?: {
@@ -45,8 +47,10 @@ declare function snapshot(n: Document, options?: {
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: Node) => unknown;
-    onIframeLoad?: (iframeNode: HTMLIFrameElement, node: serializedNodeWithId) => unknown;
+    onIframeLoad?: (iframeNode: HTMLIFrameElement, node: serializedElementNodeWithId) => unknown;
     iframeLoadTimeout?: number;
+    onStylesheetLoad?: (linkNode: HTMLLinkElement, node: serializedElementNodeWithId) => unknown;
+    stylesheetLoadTimeout?: number;
     keepIframeSrcFn?: KeepIframeSrcFn;
     enableStrictPrivacy: boolean;
 }): serializedNodeWithId | null;

packages/rrweb-snapshot/typings/types.d.ts

@@ -49,6 +49,7 @@ export declare type serializedNode = (documentNode | documentTypeNode | elementN
 export declare type serializedNodeWithId = serializedNode & {
     id: number;
 };
+export declare type serializedElementNodeWithId = Extract<serializedNodeWithId, Record<'type', NodeType.Element>>;
 export declare type tagMap = {
     [key: string]: string;
 };

packages/rrweb/src/record/index.ts

@@ -27,6 +27,7 @@ import {
 import { IframeManager } from './iframe-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
 import { CanvasManager } from './observers/canvas/canvas-manager';
+import { StylesheetManager } from './stylesheet-manager';
 
 function wrapEvent(e: event): eventWithTime {
   return {
@@ -216,6 +217,10 @@ function record<T = eventWithTime>(
     mutationCb: wrappedMutationEmit,
   });
 
+  const stylesheetManager = new StylesheetManager({
+    mutationCb: wrappedMutationEmit,
+  });
+
   const canvasManager = new CanvasManager({
     recordCanvas,
     mutationCb: wrappedCanvasMutationEmit,
@@ -242,6 +247,7 @@ function record<T = eventWithTime>(
       sampling,
       slimDOMOptions,
       iframeManager,
+      stylesheetManager,
       canvasManager,
       enableStrictPrivacy
     },
@@ -287,6 +293,9 @@ function record<T = eventWithTime>(
         iframeManager.attachIframe(iframe, childSn, mirror);
         shadowDomManager.observeAttachShadow(iframe);
       },
+      onStylesheetLoad: (linkEl, childSn) => {
+        this.stylesheetManager.attachStylesheet(linkEl, childSn, this.mirror);
+      },
       keepIframeSrcFn,
     });
 
@@ -438,6 +447,7 @@ function record<T = eventWithTime>(
           slimDOMOptions,
           mirror,
           iframeManager,
+          stylesheetManager,
           shadowDomManager,
           canvasManager,
           enableStrictPrivacy,

packages/rrweb/src/record/mutation.ts

@@ -169,6 +169,7 @@ export default class MutationBuffer {
   private doc: observerParam['doc'];
   private mirror: observerParam['mirror'];
   private iframeManager: observerParam['iframeManager'];
+  private stylesheetManager: observerParam['stylesheetManager'];
   private shadowDomManager: observerParam['shadowDomManager'];
   private canvasManager: observerParam['canvasManager'];
   private enableStrictPrivacy: observerParam['enableStrictPrivacy'];
@@ -190,6 +191,7 @@ export default class MutationBuffer {
       'doc',
       'mirror',
       'iframeManager',
+      'stylesheetManager',
       'shadowDomManager',
       'canvasManager',
       'enableStrictPrivacy',
@@ -311,6 +313,9 @@ export default class MutationBuffer {
           this.iframeManager.attachIframe(iframe, childSn, this.mirror);
           this.shadowDomManager.observeAttachShadow(iframe);
         },
+        onStylesheetLoad: (link, childSn) => {
+          this.stylesheetManager.attachStylesheet(link, childSn, this.mirror);
+        },
       });
       if (sn) {
         adds.push({

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

@@ -0,0 +1,30 @@
+import type { Mirror, serializedNodeWithId } from 'rrweb-snapshot';
+import type { mutationCallBack } from '../types';
+
+export class StylesheetManager {
+  // private stylesheets: WeakMap<HTMLLinkElement, true> = new WeakMap();
+  private mutationCb: mutationCallBack;
+
+  constructor(options: { mutationCb: mutationCallBack }) {
+    this.mutationCb = options.mutationCb;
+  }
+
+  public attachStylesheet(
+    linkEl: HTMLLinkElement,
+    childSn: serializedNodeWithId,
+    mirror: Mirror,
+  ) {
+    this.mutationCb({
+      adds: [
+        {
+          parentId: mirror.getId(linkEl),
+          nextId: null,
+          node: childSn,
+        },
+      ],
+      removes: [],
+      texts: [],
+      attributes: [],
+    });
+  }
+}