Set AssetEvent timestamps such that they match the FullSnapshot or IncrementalSnapshot (mutation) that generated them.

The logic is that this is the time they were created, even if capture was delayed for at record time.
If sorting by timestamp is performed before replay, then so long as the sort algorithm is stable, this will bring the asset events closer to the snapshot that they are associated with, where they are needed for replay

Author: eoghanmurray

packages/rrweb/src/record/index.ts

@@ -343,10 +343,11 @@ function record<T = eventWithTime>(
       },
     });
 
-  const wrappedAssetEmit = (p: assetParam) =>
+  const wrappedAssetEmit = (p: assetParam, snapshotTimestamp: number) =>
     wrappedEmit({
       type: EventType.Asset,
       data: p,
+      timestamp: snapshotTimestamp,
     });
 
   const wrappedAdoptedStyleSheetEmit = (a: adoptedStyleSheetParam) =>
@@ -491,7 +492,10 @@ function record<T = eventWithTime>(
         stylesheetManager.attachLinkElement(linkEl, childSn);
       },
       onAssetDetected: (asset: asset) => {
-        const assetStatus = assetManager.capture(asset);
+        const assetStatus = assetManager.capture(
+          asset,
+          true, // indicate it's a FullSnapshot
+        );
         if (Array.isArray(assetStatus)) {
           // removeme when we just capture one asset from srcset
           capturedAssetStatuses.push(...assetStatus);
@@ -512,9 +516,12 @@ function record<T = eventWithTime>(
     if (capturedAssetStatuses.length) {
       data.capturedAssetStatuses = capturedAssetStatuses;
     }
+    let now = nowTimestamp();
+    assetManager.lastFullSnapshotTimestamp = now;
     wrappedEmit(
       {
         type: EventType.FullSnapshot,
+        timestamp: now,
         data,
       },
       isCheckout,

packages/rrweb/src/record/mutation.ts

@@ -241,7 +241,7 @@ export default class MutationBuffer {
               ancestorBad = false;
             }
           }
-          
+
           if (this.addedSet.has(parentNode.lastChild as Node)) {
             // jump instead of crawling nextSibling to nextSibling
             n = parentNode.lastChild as Node;
@@ -361,7 +361,7 @@ export default class MutationBuffer {
         },
         cssCaptured,
         onAssetDetected: (asset: asset) => {
-          this.assetManager.capture(asset);
+          this.assetManager.capture(asset, now);
         },
       });
       if (sn) {

packages/rrweb/src/record/observers/asset-manager.ts

@@ -14,6 +14,7 @@ import { encode } from 'base64-arraybuffer';
 import { patch } from '@rrweb/utils';
 
 import type { recordOptions, ProcessingStyleElement } from '../../types';
+import { nowTimestamp } from '../../utils';
 import {
   getSourcesFromSrcset,
   shouldCaptureAsset,
@@ -41,6 +42,8 @@ export default class AssetManager {
     undefined
   >;
 
+  public lastFullSnapshotTimestamp: number;
+
   public reset() {
     this.urlObjectMap.clear();
     this.urlTextMap.clear();
@@ -133,6 +136,7 @@ export default class AssetManager {
     sheetBaseHref: string,
     el: HTMLLinkElement | HTMLStyleElement,
     styleId?: number,
+    snapshotTimestamp?: number | true,
   ): assetStatus {
     let cssRules: CSSRuleList;
     let url = sheetBaseHref; // linkEl.href for a link element
@@ -143,14 +147,23 @@ export default class AssetManager {
       if (!linkAppliedQuery.matches) {
         try {
           try {
-            linkAppliedQuery.addEventListener(
-              'change',
-              () => this.captureStylesheet(sheetBaseHref, el, styleId),
+            linkAppliedQuery.addEventListener('change', () =>
+              this.captureStylesheet(
+                sheetBaseHref,
+                el,
+                styleId,
+                nowTimestamp(), // the time of the change event
+              ),
             );
           } catch (e1) {
             // deprecated Safari method
-            linkAppliedQuery.addListener(
-              () => this.captureStylesheet(sheetBaseHref, el, styleId),
+            linkAppliedQuery.addListener(() =>
+              this.captureStylesheet(
+                sheetBaseHref,
+                el,
+                styleId,
+                nowTimestamp(), // the time of the change event
+              ),
             );
           }
           return {
@@ -203,10 +216,15 @@ export default class AssetManager {
               rr_type: 'CssText',
               cssTexts: [absolutifyURLs(cssText, sheetBaseHref)],
             };
-            this.mutationCb({
-              url,
-              payload,
-            });
+            this.mutationCb(
+              {
+                url,
+                payload,
+              },
+              snapshotTimestamp === true
+                ? this.lastFullSnapshotTimestamp
+                : snapshotTimestamp,
+            );
           }
         })
         .catch(this.fetchCatcher(url));
@@ -226,15 +244,25 @@ export default class AssetManager {
         if (el.childNodes.length > 1) {
           payload.cssTexts = splitCssText(cssText, el as HTMLStyleElement);
         }
-        this.mutationCb({
-          url,
-          payload,
-        });
+        this.mutationCb(
+          {
+            url,
+            payload,
+          },
+          snapshotTimestamp === true
+            ? this.lastFullSnapshotTimestamp
+            : snapshotTimestamp,
+        );
       } else {
-        this.mutationCb({
-          url: sheetBaseHref,
-          payload,
-        });
+        this.mutationCb(
+          {
+            url: sheetBaseHref,
+            payload,
+          },
+          snapshotTimestamp === true
+            ? this.lastFullSnapshotTimestamp
+            : snapshotTimestamp,
+        );
       }
       if (isProcessingStyleElement(el)) {
         delete el.__rrProcessingStylesheet;
@@ -286,25 +314,32 @@ export default class AssetManager {
     }
   }
 
-  public capture(asset: asset): assetStatus | assetStatus[] {
+  public capture(
+    asset: asset,
+    snapshotTimestamp?: number | true,
+  ): assetStatus | assetStatus[] {
     if ('sheet' in asset.element) {
       return this.captureStylesheet(
         asset.value,
         asset.element as HTMLStyleElement | HTMLLinkElement,
         asset.styleId,
+        snapshotTimestamp,
       );
     } else if (asset.attr === 'srcset') {
       const statuses: assetStatus[] = [];
       getSourcesFromSrcset(asset.value).forEach((url) => {
-        statuses.push(this.captureUrl(url));
+        statuses.push(this.captureUrl(url, snapshotTimestamp));
       });
       return statuses;
     } else {
-      return this.captureUrl(asset.value);
+      return this.captureUrl(asset.value, snapshotTimestamp);
     }
   }
 
-  private captureUrl(url: string): assetStatus {
+  private captureUrl(
+    url: string,
+    snapshotTimestamp?: number | true,
+  ): assetStatus {
     if (this.capturedURLs.has(url)) {
       return {
         url,
@@ -345,10 +380,15 @@ export default class AssetManager {
             this.capturedURLs.add(url);
             this.capturingURLs.delete(url);
 
-            this.mutationCb({
-              url,
-              payload,
-            });
+            this.mutationCb(
+              {
+                url,
+                payload,
+              },
+              snapshotTimestamp === true
+                ? this.lastFullSnapshotTimestamp
+                : snapshotTimestamp,
+            );
           }
         }
       })

packages/types/src/index.ts

@@ -255,7 +255,7 @@ export type event = eventWithoutTime;
 
 export type eventWithTime = eventWithoutTime & {
   timestamp: number;
-  delay?: number;
+  delay?: number; // added during replay
 };
 
 export type canvasEventWithTime = eventWithTime & {
@@ -732,6 +732,7 @@ export type assetParam =
   | {
       url: string;
       payload: SerializedCanvasArg | SerializedCssTextArg;
+      timestamp?: number;
     }
   | {
       url: string;
@@ -741,7 +742,7 @@ export type assetParam =
       };
     };
 
-export type assetCallback = (d: assetParam) => void;
+export type assetCallback = (d: assetParam, timestamp?: number | true) => void;
 
 /**
  *  @deprecated