integrate fix for live mode #923 (#77)

[rrweb PR 923](rrweb-io/rrweb#923) revert error catching code
highlight · Jun 30, 2022 · f60257e · f60257e
1 parent c728b71
commit f60257e
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 43 deletions.
diff --git a/packages/rrdom/package.json b/packages/rrdom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@highlight-run/rrdom",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "scripts": {
     "dev": "rollup -c -w",
     "bundle": "rollup --config",
@@ -52,5 +52,5 @@
     "cssstyle": "^2.3.0",
     "nwsapi": "^2.2.0"
   },
-  "gitHead": "5db953fd4478f89aabf8af047f8b03046a05e6e9"
+  "gitHead": "c43f25b8babc23a90f15f8224248c2fe9c757537"
 }
diff --git a/packages/rrdom/src/diff.ts b/packages/rrdom/src/diff.ts
@@ -281,25 +281,17 @@ function diffChildren(
     } else if (
       replayer.mirror.getId(oldStartNode) === rrnodeMirror.getId(newEndNode)
     ) {
-      try {
-        parentNode.insertBefore(oldStartNode, oldEndNode.nextSibling);
-      } catch (e) {
-        console.error(e, parentNode, oldStartNode, oldEndNode);
-        diff(oldStartNode, newEndNode, replayer, rrnodeMirror);
-        oldStartNode = oldChildren[++oldStartIndex];
-        newEndNode = newChildren[--newEndIndex];
-      }
+      parentNode.insertBefore(oldStartNode, oldEndNode.nextSibling);
+      diff(oldStartNode, newEndNode, replayer, rrnodeMirror);
+      oldStartNode = oldChildren[++oldStartIndex];
+      newEndNode = newChildren[--newEndIndex];
     } else if (
       replayer.mirror.getId(oldEndNode) === rrnodeMirror.getId(newStartNode)
     ) {
-      try {
-        parentNode.insertBefore(oldEndNode, oldStartNode);
-      } catch (e) {
-        console.error(e, parentNode, oldEndNode, oldStartNode);
-        diff(oldEndNode, newStartNode, replayer, rrnodeMirror);
-        oldEndNode = oldChildren[--oldEndIndex];
-        newStartNode = newChildren[++newStartIndex];
-      }
+      parentNode.insertBefore(oldEndNode, oldStartNode);
+      diff(oldEndNode, newStartNode, replayer, rrnodeMirror);
+      oldEndNode = oldChildren[--oldEndIndex];
+      newStartNode = newChildren[++newStartIndex];
     } else {
       if (!oldIdToIndex) {
         oldIdToIndex = {};
@@ -312,13 +304,9 @@ function diffChildren(
       indexInOld = oldIdToIndex[rrnodeMirror.getId(newStartNode)];
       if (indexInOld) {
         const nodeToMove = oldChildren[indexInOld]!;
-        try {
-          parentNode.insertBefore(nodeToMove, oldStartNode);
-        } catch (e) {
-          console.error(e, parentNode, nodeToMove, oldStartNode);
-          diff(nodeToMove, newStartNode, replayer, rrnodeMirror);
-          oldChildren[indexInOld] = undefined;
-        }
+        parentNode.insertBefore(nodeToMove, oldStartNode);
+        diff(nodeToMove, newStartNode, replayer, rrnodeMirror);
+        oldChildren[indexInOld] = undefined;
       } else {
         const newNode = createOrGetNode(
           newStartNode,
@@ -331,20 +319,16 @@ function diffChildren(
          * We should delete it before insert a serialized one. Otherwise, an error 'Only one element on document allowed' will be thrown.
          */
         if (
-          replayer.mirror.getMeta(parentNode)?.type === RRNodeType.Document &&
+          parentNode.nodeName === '#document' &&
           replayer.mirror.getMeta(newNode)?.type === RRNodeType.Element &&
           (parentNode as Document).documentElement
         ) {
           parentNode.removeChild((parentNode as Document).documentElement);
           oldChildren[oldStartIndex] = undefined;
           oldStartNode = undefined;
         }
-        try {
-          parentNode.insertBefore(newNode, oldStartNode || null);
-        } catch (e) {
-          console.error(e, parentNode, newNode, oldStartNode || null);
-          diff(newNode, newStartNode, replayer, rrnodeMirror);
-        }
+        parentNode.insertBefore(newNode, oldStartNode || null);
+        diff(newNode, newStartNode, replayer, rrnodeMirror);
       }
       newStartNode = newChildren[++newStartIndex];
     }
@@ -365,12 +349,8 @@ function diffChildren(
         replayer.mirror,
         rrnodeMirror,
       );
-      try {
-        parentNode.insertBefore(newNode, referenceNode);
-      } catch (e) {
-        console.error(e, parentNode, newNode, referenceNode);
-        diff(newNode, newChildren[newStartIndex], replayer, rrnodeMirror);
-      }
+      parentNode.insertBefore(newNode, referenceNode);
+      diff(newNode, newChildren[newStartIndex], replayer, rrnodeMirror);
     }
   } else if (newStartIndex > newEndIndex) {
     for (; oldStartIndex <= oldEndIndex; oldStartIndex++) {

diff --git a/packages/rrdom/test/diff.test.ts b/packages/rrdom/test/diff.test.ts
@@ -1056,6 +1056,24 @@ describe('diff algorithm for rrdom', () => {
       expect(element.tagName).toBe('DIV');
       expect(mirror.getId(element)).toEqual(2);
     });
+
+    it('should remove children from document before adding new nodes', () => {
+      document.write('<style></style>'); // old document with elements that need removing
+
+      const rrDocument = new RRDocument();
+      const docType = rrDocument.createDocumentType('html', '', '');
+      rrDocument.mirror.add(docType, getDefaultSN(docType, 1));
+      rrDocument.appendChild(docType);
+      const htmlEl = rrDocument.createElement('html');
+      rrDocument.mirror.add(htmlEl, getDefaultSN(htmlEl, 2));
+      rrDocument.appendChild(htmlEl);
+
+      diff(document, rrDocument, replayer);
+      expect(document.childNodes.length).toBe(2);
+      const element = document.childNodes[0] as HTMLElement;
+      expect(element.nodeType).toBe(element.DOCUMENT_TYPE_NODE);
+      expect(mirror.getId(element)).toEqual(1);
+    });
   });
 
   describe('create or get a Node', () => {

diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@highlight-run/rrweb",
-  "version": "2.0.10",
+  "version": "2.0.13",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",
@@ -74,13 +74,13 @@
     "typescript": "^4.6.2"
   },
   "dependencies": {
+    "@highlight-run/rrdom": ">=0.1.10",
     "@highlight-run/rrweb-snapshot": ">1.1.15",
     "@types/css-font-loading-module": "0.0.7",
     "@xstate/fsm": "^1.4.0",
     "base64-arraybuffer": "^1.0.1",
     "fflate": "^0.4.4",
-    "@highlight-run/rrdom": ">0.1.2",
     "mitt": "^1.1.3"
   },
-  "gitHead": "5db953fd4478f89aabf8af047f8b03046a05e6e9"
+  "gitHead": "787f6c182cf4264d332640d34bf91d5b0cf326db"
 }
diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
@@ -576,8 +576,7 @@ describe('record integration tests', function (this: ISuite) {
           );
         });
     });
-    await page.waitForTimeout(20); // 20ms of sleep time
-    await waitForRAF(page); // wait for events to get created
+    await waitForRAF(page);
 
     const snapshots = await page.evaluate('window.snapshots');
     assertSnapshot(snapshots);