Fix for 'should list original url in non-live mode when asset never g…

…ets loaded' - I believe this change is needed after the change to always storing the `src` in `rr_captured_src`, but I'm unsure as to why I didn't pick it up earlier; maybe I wasn't running these tests
rrweb-io · Nov 29, 2024 · 654e512 · 654e512
1 parent e8a9b4a
commit 654e512
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 deletions.
diff --git a/packages/rrweb/src/replay/asset-manager/index.ts b/packages/rrweb/src/replay/asset-manager/index.ts
@@ -212,13 +212,11 @@ export default class AssetManager implements RebuildAssetManagerInterface {
       // includes <link>s (these are recreated as <style> elements)
       isCssTextElement = true;
     }
-    const prevValue = node.getAttribute(attribute);
-
     const promises: Promise<unknown>[] = [];
 
     if (attribute === 'srcset') {
       const values = getSourcesFromSrcset(serializedValue);
-      let expectedValue: string | null = prevValue;
+      let expectedValue: string | null = node.getAttribute(attribute);
       values.forEach((value) => {
         promises.push(
           this.whenReady(value).then((status) => {
@@ -266,17 +264,29 @@ export default class AssetManager implements RebuildAssetManagerInterface {
         },
       );
     } else {
-      // In live mode we removes the attribute while it loads so it doesn't show the broken image icon
-      if (this.liveMode && nodeId > 0 && !isCssTextElement) {
+      if (nodeId > 0 && !isCssTextElement) {
         let hijackedAttributes = this.nodeIdAttributeHijackedMap.get(nodeId);
         if (!hijackedAttributes) {
           hijackedAttributes = new Map();
           this.nodeIdAttributeHijackedMap.set(nodeId, hijackedAttributes);
         }
         hijackedAttributes.set(attribute, serializedValue);
-        if (node.tagName === 'IMG' && attribute === 'src') {
-          // special value to prevent a broken image icon while asset is being loaded
-          node.setAttribute('src', '//:0');
+      }
+
+      if (node.tagName === 'IMG' && attribute === 'src') {
+        if (
+          preloadedStatus.status === 'unknown' &&
+          node.getAttribute(attribute) === null
+        ) {
+          if (this.liveMode) {
+            // special value to prevent a broken image icon while asset is being loaded
+            node.setAttribute('src', '//:0');
+          } else {
+            // we don't have any confidence that image will load as an asset
+            // as it should have showed up via preloadAllAssets.
+            // set it to the potentially broken original value
+            node.setAttribute('src', serializedValue);
+          }
         }
       }
       promises.push(
@@ -290,12 +300,13 @@ export default class AssetManager implements RebuildAssetManagerInterface {
             return;
           }
           if (!isCssTextElement) {
-            const attributeUnchanged = this.liveMode
-              ? serializedValue ===
-                this.nodeIdAttributeHijackedMap.get(nodeId)?.get(attribute)
-              : node.getAttribute(attribute) === prevValue;
-
-            if (!attributeUnchanged) return; // attribute was changed since we started loading the asset
+            if (
+              serializedValue !==
+              this.nodeIdAttributeHijackedMap.get(nodeId)?.get(attribute)
+            ) {
+              // attribute was changed since we started loading the asset
+              return;
+            }
           }
           if (status.cssTexts) {
             buildStyleNode(

diff --git a/packages/rrweb/test/replay/asset-unit.test.ts b/packages/rrweb/test/replay/asset-unit.test.ts
@@ -301,7 +301,7 @@ describe('AssetManager', () => {
       expect(element.getAttribute('src')).toBe('//:0');
     });
 
-    it("should be able to modify a node's attribute multiple times", async () => {
+    it("should be able to modify a node's attribute multiple times (assets arrive in reverse order)", async () => {
       const originalUrl = 'https://example.com/original-image.png';
       const newUrl = 'https://example.com/new-image.png';
       const originalAsset: assetEvent = {
@@ -338,7 +338,7 @@ describe('AssetManager', () => {
       expect(element.getAttribute('src')).toBe('objectURL1');
     });
 
-    it("should be able to modify a node's attribute multiple times 2", async () => {
+    it("should be able to modify a node's attribute multiple times (assets arrive in correct order)", async () => {
       const originalUrl = 'https://example.com/original-image.png';
       const newUrl = 'https://example.com/new-image.png';
       const originalAsset: assetEvent = {