Refactor and prepare for some changes: Deal with the difference betwe…

…en `srcset` and other url attributes in one place
rrweb-io · Apr 3, 2024 · c88f8d8 · c88f8d8
1 parent f92de12
commit c88f8d8
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 38 deletions.
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
@@ -687,19 +687,11 @@ function serializeElementNode(
         onAssetDetected &&
         isAttributeCapturable(n, attr.name)
       ) {
-        if (attr.name === 'srcset') {
-          getSourcesFromSrcset(value).forEach((url) => {
-            assets.push({
-              element: n,
-              url,
-            });
-          });
-        } else {
-          assets.push({
-            element: n,
-            url: value,
-          });
-        }
+        assets.push({
+          element: n,
+          attr: attr.name,
+          value,
+        });
         name = `rr_captured_${name}`;
       }
       attributes[name] = value;

diff --git a/packages/rrweb-snapshot/test/snapshot.test.ts b/packages/rrweb-snapshot/test/snapshot.test.ts
@@ -295,7 +295,8 @@ describe('onAssetDetected callback', () => {
     serializeNode(el, callback);
     expect(callback).toHaveBeenCalledWith([{
       element: el.querySelector('img'),
-      url: 'https://example.com/image.png',
+      attr: 'src',
+      value: 'https://example.com/image.png',
     }]);
   });
 
@@ -308,22 +309,22 @@ describe('onAssetDetected callback', () => {
     serializeNode(el, callback);
     expect(callback).toHaveBeenCalledWith([{
       element: el.querySelector('img'),
-      url: 'blob:https://example.com/e81acc2b-f460-4aec-91b3-ce9732b837c4',
+      attr: 'src',
+      value: 'blob:https://example.com/e81acc2b-f460-4aec-91b3-ce9732b837c4',
     }]);
   });
   it('should detect `srcset` attribute in image', () => {
     const el = render(`<div>
       <img srcset="https://example.com/images/team-photo.jpg, https://example.com/images/team-photo-retina.jpg 2x" />
     </div>`);
 
+    // this used to trigger two calls, but now AssetManager is responsible for parsing the args
     const callback = jest.fn();
     serializeNode(el, callback);
     expect(callback).toHaveBeenCalledWith([{
       element: el.querySelector('img'),
-      url: 'https://example.com/images/team-photo.jpg',
-    }, {
-      element: el.querySelector('img'),
-      url: 'https://example.com/images/team-photo-retina.jpg',
+      attr: 'srcset',
+      value: 'https://example.com/images/team-photo.jpg, https://example.com/images/team-photo-retina.jpg 2x',
     }]);
   });
 
@@ -338,11 +339,13 @@ describe('onAssetDetected callback', () => {
     expect(callback).toBeCalledTimes(2);
     expect(callback).toHaveBeenCalledWith([{
       element: el.querySelectorAll('img')[0],
-      url: 'https://example.com/image.png',
+      attr: 'src',
+      value: 'https://example.com/image.png',
     }]);
     expect(callback).toHaveBeenCalledWith([{
       element: el.querySelectorAll('img')[1],
-      url: 'https://example.com/image2.png',
+      attr: 'src',
+      value: 'https://example.com/image2.png',
     }]);
   });
 });
diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
@@ -10,7 +10,6 @@ import {
   isNativeShadowDom,
   getInputType,
   toLowerCase,
-  getSourcesFromSrcset,
 } from 'rrweb-snapshot';
 import type { observerParam, MutationBufferParam } from '../types';
 import type {
@@ -632,19 +631,11 @@ export default class MutationBuffer {
             transformedValue &&
             this.assetManager.isAttributeCapturable(target, attributeName)
           ) {
-            if (attributeName === 'srcset') {
-              getSourcesFromSrcset(transformedValue).forEach((url) => {
-                this.assetManager.capture({
-                  element: target,
-                  url,
-                });
-              });
-            } else {
-              this.assetManager.capture({
-                element: target,
-                url: transformedValue,
-              });
-            }
+            this.assetManager.capture({
+              element: target,
+              attr: attributeName,
+              value: transformedValue,
+            });
             attributeName = `rr_captured_${attributeName}`;
           }
           item.attributes[attributeName] = transformedValue;

diff --git a/packages/rrweb/src/record/observers/asset-manager.ts b/packages/rrweb/src/record/observers/asset-manager.ts
@@ -11,7 +11,7 @@ import { encode } from 'base64-arraybuffer';
 import { patch } from '../../utils';
 
 import type { recordOptions } from '../../types';
-import { isAttributeCapturable } from 'rrweb-snapshot';
+import { isAttributeCapturable, getSourcesFromSrcset } from 'rrweb-snapshot';
 
 export default class AssetManager {
   private urlObjectMap = new Map<string, File | Blob | MediaSource>();
@@ -129,7 +129,13 @@ export default class AssetManager {
   public capture(asset: asset): {
     status: 'capturing' | 'captured' | 'error' | 'refused';
   } {
-    this.captureUrl(asset.url);
+    if (asset.attr === 'srcset') {
+       getSourcesFromSrcset(asset.value).forEach((url) => {
+        this.captureUrl(url);
+      });
+    } else {
+      this.captureUrl(asset.value);
+    }
   }
 
   public captureUrl(url): {

diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
@@ -84,7 +84,8 @@ export type assetEvent = {
 
 export type asset = {
   element: HTMLElement;
-  url: string;
+  attr: string;
+  value: string;
 };
 
 export enum IncrementalSource {