fix: can't record shadow root's children except the last one (#956)

* fix: can't record shadow root's children except the last one

* remove unnecessary type cast

packages/rrweb/src/record/mutation.ts

@@ -370,15 +370,31 @@ export default class MutationBuffer {
       }
       if (!node) {
         for (let index = addList.length - 1; index >= 0; index--) {
-          const _node = addList.get(index)!;
+          const _node = addList.get(index);
           // ensure _node is defined before attempting to find value
           if (_node) {
             const parentId = this.mirror.getId(_node.value.parentNode);
             const nextId = getNextId(_node.value);
-            if (parentId !== -1 && nextId !== -1) {
+
+            if (nextId === -1) continue;
+            // nextId !== -1 && parentId !== -1
+            else if (parentId !== -1) {
               node = _node;
               break;
             }
+            // nextId !== -1 && parentId === -1 This branch can happen if the node is the child of shadow root
+            else {
+              const nodeInShadowDom = _node.value;
+              // Get the host of the shadow dom and treat it as parent node.
+              const shadowHost: Element | null = nodeInShadowDom.getRootNode
+                ? (nodeInShadowDom.getRootNode() as ShadowRoot)?.host
+                : null;
+              const parentId = this.mirror.getId(shadowHost);
+              if (parentId !== -1) {
+                node = _node;
+                break;
+              }
+            }
           }
         }
       }

packages/rrweb/test/__snapshots__/integration.test.ts.snap

@@ -12053,6 +12053,18 @@ exports[`record integration tests should record shadow DOM 1`] = `
             \\"id\\": 43,
             \\"isShadow\\": true
           }
+        },
+        {
+          \\"parentId\\": 22,
+          \\"nextId\\": 43,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"span\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [],
+            \\"id\\": 44,
+            \\"isShadow\\": true
+          }
         }
       ]
     }
@@ -12073,7 +12085,7 @@ exports[`record integration tests should record shadow DOM 1`] = `
             \\"tagName\\": \\"p\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 44
+            \\"id\\": 45
           }
         }
       ]
@@ -12104,12 +12116,12 @@ exports[`record integration tests should record shadow DOM 1`] = `
       \\"removes\\": [],
       \\"adds\\": [
         {
-          \\"parentId\\": 44,
+          \\"parentId\\": 45,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"hi\\",
-            \\"id\\": 45
+            \\"id\\": 46
           }
         }
       ]
@@ -12123,18 +12135,18 @@ exports[`record integration tests should record shadow DOM 1`] = `
       \\"attributes\\": [],
       \\"removes\\": [
         {
-          \\"parentId\\": 44,
-          \\"id\\": 45
+          \\"parentId\\": 45,
+          \\"id\\": 46
         }
       ],
       \\"adds\\": [
         {
-          \\"parentId\\": 44,
+          \\"parentId\\": 45,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"123\\",
-            \\"id\\": 46
+            \\"id\\": 47
           }
         }
       ]
@@ -12149,24 +12161,24 @@ exports[`record integration tests should record shadow DOM 1`] = `
       \\"removes\\": [],
       \\"adds\\": [
         {
-          \\"parentId\\": 44,
+          \\"parentId\\": 45,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"span\\",
             \\"attributes\\": {},
             \\"childNodes\\": [],
-            \\"id\\": 47,
+            \\"id\\": 48,
             \\"isShadow\\": true
           }
         },
         {
-          \\"parentId\\": 47,
+          \\"parentId\\": 48,
           \\"nextId\\": null,
           \\"node\\": {
             \\"type\\": 3,
             \\"textContent\\": \\"nested shadow dom\\",
-            \\"id\\": 48
+            \\"id\\": 49
           }
         }
       ]

packages/rrweb/test/integration.test.ts

@@ -561,6 +561,7 @@ describe('record integration tests', function (this: ISuite) {
 
       const el = document.querySelector('.my-element') as HTMLDivElement;
       const shadowRoot = el.shadowRoot as ShadowRoot;
+      shadowRoot.appendChild(document.createElement('span'));
       shadowRoot.appendChild(document.createElement('p'));
       sleep(1)
         .then(() => {

packages/rrweb/test/utils.ts

@@ -81,7 +81,6 @@ export const startServer = (defaultPort: number = 3030) =>
         resolve(s);
       })
       .on('error', (e) => {
-        console.log('port in use, trying next one');
         s.listen().on('listening', () => {
           resolve(s);
         });
@@ -152,14 +151,6 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
                 coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
               }
             }
-
-            // strip blob:urls as they are different every time
-            console.log(
-              a.attributes.src,
-              'src' in a.attributes &&
-                a.attributes.src &&
-                typeof a.attributes.src === 'string',
-            );
           });
           s.data.adds.forEach((add) => {
             if (add.node.type === NodeType.Element) {