@highlight-run/rrweb 2.0.6 → 2.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/plugins/console-record.min.js.map +1 -1
  2. package/dist/plugins/console-replay.min.js.map +1 -1
  3. package/dist/record/rrweb-record-pack.min.js.map +1 -1
  4. package/dist/record/rrweb-record.js +3 -3
  5. package/dist/record/rrweb-record.min.js +3 -3
  6. package/dist/record/rrweb-record.min.js.map +1 -1
  7. package/dist/replay/rrweb-replay-unpack.js +4 -4
  8. package/dist/replay/rrweb-replay-unpack.min.js +4 -4
  9. package/dist/replay/rrweb-replay-unpack.min.js.map +1 -1
  10. package/dist/replay/rrweb-replay.js +4 -4
  11. package/dist/replay/rrweb-replay.min.js +4 -4
  12. package/dist/replay/rrweb-replay.min.js.map +1 -1
  13. package/dist/rrweb-all.js +12 -12
  14. package/dist/rrweb-all.min.js +12 -12
  15. package/dist/rrweb-all.min.js.map +1 -1
  16. package/dist/rrweb.js +5 -5
  17. package/dist/rrweb.min.js +5 -5
  18. package/dist/rrweb.min.js.map +1 -1
  19. package/es/rrweb/packages/rrdom/es/virtual-dom.js +47 -24
  20. package/es/rrweb/packages/rrweb/src/record/index.js +5 -2
  21. package/es/rrweb/packages/rrweb/src/record/mutation.js +23 -11
  22. package/es/rrweb/packages/rrweb/src/record/observer.js +6 -6
  23. package/es/rrweb/packages/rrweb/src/record/observers/canvas/2d.js +1 -1
  24. package/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas.js +2 -2
  25. package/es/rrweb/packages/rrweb/src/record/observers/canvas/webgl.js +1 -2
  26. package/es/rrweb/packages/rrweb/src/utils.js +16 -23
  27. package/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js +292 -236
  28. package/lib/record/rrweb-record.js +333 -280
  29. package/lib/replay/rrweb-replay-unpack.js +57 -24
  30. package/lib/replay/rrweb-replay.js +57 -24
  31. package/lib/rrweb-all.js +390 -304
  32. package/lib/rrweb.js +390 -304
  33. package/package.json +4 -4
  34. package/typings/utils.d.ts +1 -1
package/lib/replay/rrweb-replay-unpack.js CHANGED
@@ -751,6 +751,7 @@ function buildNode(n, options) {
751
751
  if (!image.currentSrc.startsWith('data:')) {
752
752
  image.setAttribute('rrweb-original-src', n.attributes.src);
753
753
  image.src = value;
754
+ image.setAttribute('rrweb-inline-src', value);
754
755
  }
755
756
  }
756
757
  if (name_1 === 'rr_width') {
@@ -779,6 +780,15 @@ function buildNode(n, options) {
779
780
  for (var name_1 in n.attributes) {
780
781
  _loop_1(name_1);
781
782
  }
783
+ if (tagName === 'img') {
784
+ var image = node_1;
785
+ if (!image.currentSrc.startsWith('data:')) {
786
+ var inlineSrc = image.getAttribute('rrweb-inline-src');
787
+ if (inlineSrc === null || inlineSrc === void 0 ? void 0 : inlineSrc.startsWith('data:')) {
788
+ image.src = inlineSrc;
789
+ }
790
+ }
791
+ }
782
792
  if (n.isShadowHost) {
783
793
  if (!node_1.shadowRoot) {
784
794
  node_1.attachShadow({ mode: 'open' });
@@ -1444,7 +1454,7 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
1444
1454
  break;
1445
1455
  }
1446
1456
  case NodeType$1.Element: {
1447
- const oldElement = (oldTree);
1457
+ const oldElement = oldTree;
1448
1458
  const newRRElement = newTree;
1449
1459
  diffProps(oldElement, newRRElement, rrnodeMirror);
1450
1460
  scrollDataToApply = newRRElement.scrollData;
@@ -1452,7 +1462,7 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
1452
1462
  switch (newRRElement.tagName) {
1453
1463
  case 'AUDIO':
1454
1464
  case 'VIDEO': {
1455
- const oldMediaElement = (oldTree);
1465
+ const oldMediaElement = oldTree;
1456
1466
  const newMediaRRElement = newRRElement;
1457
1467
  if (newMediaRRElement.paused !== undefined)
1458
1468
  newMediaRRElement.paused
@@ -1467,7 +1477,7 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
1467
1477
  break;
1468
1478
  }
1469
1479
  case 'CANVAS':
1470
- newTree.canvasMutations.forEach((canvasMutation) => replayer.applyCanvas(canvasMutation.event, canvasMutation.mutation, (oldTree)));
1480
+ newTree.canvasMutations.forEach((canvasMutation) => replayer.applyCanvas(canvasMutation.event, canvasMutation.mutation, oldTree));
1471
1481
  break;
1472
1482
  case 'STYLE':
1473
1483
  applyVirtualStyleRulesToNode(oldElement, newTree.rules);
@@ -1494,8 +1504,7 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
1494
1504
  scrollDataToApply && replayer.applyScroll(scrollDataToApply, true);
1495
1505
  inputDataToApply && replayer.applyInput(inputDataToApply);
1496
1506
  if (newTree.nodeName === 'IFRAME') {
1497
- const oldContentDocument = (oldTree)
1498
- .contentDocument;
1507
+ const oldContentDocument = oldTree.contentDocument;
1499
1508
  const newIFrameElement = newTree;
1500
1509
  if (oldContentDocument) {
1501
1510
  const sn = rrnodeMirror.getMeta(newIFrameElement.contentDocument);
@@ -1556,16 +1565,26 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
1556
1565
  newEndNode = newChildren[--newEndIndex];
1557
1566
  }
1558
1567
  else if (replayer.mirror.getId(oldStartNode) === rrnodeMirror.getId(newEndNode)) {
1559
- parentNode.insertBefore(oldStartNode, oldEndNode.nextSibling);
1560
- diff(oldStartNode, newEndNode, replayer, rrnodeMirror);
1561
- oldStartNode = oldChildren[++oldStartIndex];
1562
- newEndNode = newChildren[--newEndIndex];
1568
+ try {
1569
+ parentNode.insertBefore(oldStartNode, oldEndNode.nextSibling);
1570
+ diff(oldStartNode, newEndNode, replayer, rrnodeMirror);
1571
+ oldStartNode = oldChildren[++oldStartIndex];
1572
+ newEndNode = newChildren[--newEndIndex];
1573
+ }
1574
+ catch (e) {
1575
+ console.error(e, parentNode, oldStartNode, oldEndNode);
1576
+ }
1563
1577
  }
1564
1578
  else if (replayer.mirror.getId(oldEndNode) === rrnodeMirror.getId(newStartNode)) {
1565
- parentNode.insertBefore(oldEndNode, oldStartNode);
1566
- diff(oldEndNode, newStartNode, replayer, rrnodeMirror);
1567
- oldEndNode = oldChildren[--oldEndIndex];
1568
- newStartNode = newChildren[++newStartIndex];
1579
+ try {
1580
+ parentNode.insertBefore(oldEndNode, oldStartNode);
1581
+ diff(oldEndNode, newStartNode, replayer, rrnodeMirror);
1582
+ oldEndNode = oldChildren[--oldEndIndex];
1583
+ newStartNode = newChildren[++newStartIndex];
1584
+ }
1585
+ catch (e) {
1586
+ console.error(e, parentNode, oldEndNode, oldStartNode);
1587
+ }
1569
1588
  }
1570
1589
  else {
1571
1590
  if (!oldIdToIndex) {
@@ -1579,21 +1598,31 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
1579
1598
  indexInOld = oldIdToIndex[rrnodeMirror.getId(newStartNode)];
1580
1599
  if (indexInOld) {
1581
1600
  const nodeToMove = oldChildren[indexInOld];
1582
- parentNode.insertBefore(nodeToMove, oldStartNode);
1583
- diff(nodeToMove, newStartNode, replayer, rrnodeMirror);
1584
- oldChildren[indexInOld] = undefined;
1601
+ try {
1602
+ parentNode.insertBefore(nodeToMove, oldStartNode);
1603
+ diff(nodeToMove, newStartNode, replayer, rrnodeMirror);
1604
+ oldChildren[indexInOld] = undefined;
1605
+ }
1606
+ catch (e) {
1607
+ console.error(e, parentNode, nodeToMove, oldStartNode);
1608
+ }
1585
1609
  }
1586
1610
  else {
1587
1611
  const newNode = createOrGetNode(newStartNode, replayer.mirror, rrnodeMirror);
1588
1612
  if (((_a = replayer.mirror.getMeta(parentNode)) === null || _a === void 0 ? void 0 : _a.type) === NodeType$1.Document &&
1589
1613
  ((_b = replayer.mirror.getMeta(newNode)) === null || _b === void 0 ? void 0 : _b.type) === NodeType$1.Element &&
1590
- (parentNode).documentElement) {
1591
- parentNode.removeChild((parentNode).documentElement);
1614
+ parentNode.documentElement) {
1615
+ parentNode.removeChild(parentNode.documentElement);
1592
1616
  oldChildren[oldStartIndex] = undefined;
1593
1617
  oldStartNode = undefined;
1594
1618
  }
1595
- parentNode.insertBefore(newNode, oldStartNode || null);
1596
- diff(newNode, newStartNode, replayer, rrnodeMirror);
1619
+ try {
1620
+ parentNode.insertBefore(newNode, oldStartNode || null);
1621
+ diff(newNode, newStartNode, replayer, rrnodeMirror);
1622
+ }
1623
+ catch (e) {
1624
+ console.error(e, parentNode, newNode, oldStartNode || null);
1625
+ }
1597
1626
  }
1598
1627
  newStartNode = newChildren[++newStartIndex];
1599
1628
  }
@@ -1608,8 +1637,13 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
1608
1637
  });
1609
1638
  for (; newStartIndex <= newEndIndex; ++newStartIndex) {
1610
1639
  const newNode = createOrGetNode(newChildren[newStartIndex], replayer.mirror, rrnodeMirror);
1611
- parentNode.insertBefore(newNode, referenceNode);
1612
- diff(newNode, newChildren[newStartIndex], replayer, rrnodeMirror);
1640
+ try {
1641
+ parentNode.insertBefore(newNode, referenceNode);
1642
+ diff(newNode, newChildren[newStartIndex], replayer, rrnodeMirror);
1643
+ }
1644
+ catch (e) {
1645
+ console.error(e, parentNode, newNode, referenceNode);
1646
+ }
1613
1647
  }
1614
1648
  }
1615
1649
  else if (newStartIndex > newEndIndex) {
@@ -1663,8 +1697,7 @@ function getNestedRule$1(rules, position) {
1663
1697
  return rule;
1664
1698
  }
1665
1699
  else {
1666
- return getNestedRule$1((rule).cssRules[position[1]]
1667
- .cssRules, position.slice(2));
1700
+ return getNestedRule$1(rule.cssRules[position[1]].cssRules, position.slice(2));
1668
1701
  }
1669
1702
  }
1670
1703
  var StyleRuleType;
package/lib/replay/rrweb-replay.js CHANGED
@@ -751,6 +751,7 @@ function buildNode(n, options) {
751
751
  if (!image.currentSrc.startsWith('data:')) {
752
752
  image.setAttribute('rrweb-original-src', n.attributes.src);
753
753
  image.src = value;
754
+ image.setAttribute('rrweb-inline-src', value);
754
755
  }
755
756
  }
756
757
  if (name_1 === 'rr_width') {
@@ -779,6 +780,15 @@ function buildNode(n, options) {
779
780
  for (var name_1 in n.attributes) {
780
781
  _loop_1(name_1);
781
782
  }
783
+ if (tagName === 'img') {
784
+ var image = node_1;
785
+ if (!image.currentSrc.startsWith('data:')) {
786
+ var inlineSrc = image.getAttribute('rrweb-inline-src');
787
+ if (inlineSrc === null || inlineSrc === void 0 ? void 0 : inlineSrc.startsWith('data:')) {
788
+ image.src = inlineSrc;
789
+ }
790
+ }
791
+ }
782
792
  if (n.isShadowHost) {
783
793
  if (!node_1.shadowRoot) {
784
794
  node_1.attachShadow({ mode: 'open' });
@@ -1444,7 +1454,7 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
1444
1454
  break;
1445
1455
  }
1446
1456
  case NodeType$1.Element: {
1447
- const oldElement = (oldTree);
1457
+ const oldElement = oldTree;
1448
1458
  const newRRElement = newTree;
1449
1459
  diffProps(oldElement, newRRElement, rrnodeMirror);
1450
1460
  scrollDataToApply = newRRElement.scrollData;
@@ -1452,7 +1462,7 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
1452
1462
  switch (newRRElement.tagName) {
1453
1463
  case 'AUDIO':
1454
1464
  case 'VIDEO': {
1455
- const oldMediaElement = (oldTree);
1465
+ const oldMediaElement = oldTree;
1456
1466
  const newMediaRRElement = newRRElement;
1457
1467
  if (newMediaRRElement.paused !== undefined)
1458
1468
  newMediaRRElement.paused
@@ -1467,7 +1477,7 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
1467
1477
  break;
1468
1478
  }
1469
1479
  case 'CANVAS':
1470
- newTree.canvasMutations.forEach((canvasMutation) => replayer.applyCanvas(canvasMutation.event, canvasMutation.mutation, (oldTree)));
1480
+ newTree.canvasMutations.forEach((canvasMutation) => replayer.applyCanvas(canvasMutation.event, canvasMutation.mutation, oldTree));
1471
1481
  break;
1472
1482
  case 'STYLE':
1473
1483
  applyVirtualStyleRulesToNode(oldElement, newTree.rules);
@@ -1494,8 +1504,7 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
1494
1504
  scrollDataToApply && replayer.applyScroll(scrollDataToApply, true);
1495
1505
  inputDataToApply && replayer.applyInput(inputDataToApply);
1496
1506
  if (newTree.nodeName === 'IFRAME') {
1497
- const oldContentDocument = (oldTree)
1498
- .contentDocument;
1507
+ const oldContentDocument = oldTree.contentDocument;
1499
1508
  const newIFrameElement = newTree;
1500
1509
  if (oldContentDocument) {
1501
1510
  const sn = rrnodeMirror.getMeta(newIFrameElement.contentDocument);
@@ -1556,16 +1565,26 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
1556
1565
  newEndNode = newChildren[--newEndIndex];
1557
1566
  }
1558
1567
  else if (replayer.mirror.getId(oldStartNode) === rrnodeMirror.getId(newEndNode)) {
1559
- parentNode.insertBefore(oldStartNode, oldEndNode.nextSibling);
1560
- diff(oldStartNode, newEndNode, replayer, rrnodeMirror);
1561
- oldStartNode = oldChildren[++oldStartIndex];
1562
- newEndNode = newChildren[--newEndIndex];
1568
+ try {
1569
+ parentNode.insertBefore(oldStartNode, oldEndNode.nextSibling);
1570
+ diff(oldStartNode, newEndNode, replayer, rrnodeMirror);
1571
+ oldStartNode = oldChildren[++oldStartIndex];
1572
+ newEndNode = newChildren[--newEndIndex];
1573
+ }
1574
+ catch (e) {
1575
+ console.error(e, parentNode, oldStartNode, oldEndNode);
1576
+ }
1563
1577
  }
1564
1578
  else if (replayer.mirror.getId(oldEndNode) === rrnodeMirror.getId(newStartNode)) {
1565
- parentNode.insertBefore(oldEndNode, oldStartNode);
1566
- diff(oldEndNode, newStartNode, replayer, rrnodeMirror);
1567
- oldEndNode = oldChildren[--oldEndIndex];
1568
- newStartNode = newChildren[++newStartIndex];
1579
+ try {
1580
+ parentNode.insertBefore(oldEndNode, oldStartNode);
1581
+ diff(oldEndNode, newStartNode, replayer, rrnodeMirror);
1582
+ oldEndNode = oldChildren[--oldEndIndex];
1583
+ newStartNode = newChildren[++newStartIndex];
1584
+ }
1585
+ catch (e) {
1586
+ console.error(e, parentNode, oldEndNode, oldStartNode);
1587
+ }
1569
1588
  }
1570
1589
  else {
1571
1590
  if (!oldIdToIndex) {
@@ -1579,21 +1598,31 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
1579
1598
  indexInOld = oldIdToIndex[rrnodeMirror.getId(newStartNode)];
1580
1599
  if (indexInOld) {
1581
1600
  const nodeToMove = oldChildren[indexInOld];
1582
- parentNode.insertBefore(nodeToMove, oldStartNode);
1583
- diff(nodeToMove, newStartNode, replayer, rrnodeMirror);
1584
- oldChildren[indexInOld] = undefined;
1601
+ try {
1602
+ parentNode.insertBefore(nodeToMove, oldStartNode);
1603
+ diff(nodeToMove, newStartNode, replayer, rrnodeMirror);
1604
+ oldChildren[indexInOld] = undefined;
1605
+ }
1606
+ catch (e) {
1607
+ console.error(e, parentNode, nodeToMove, oldStartNode);
1608
+ }
1585
1609
  }
1586
1610
  else {
1587
1611
  const newNode = createOrGetNode(newStartNode, replayer.mirror, rrnodeMirror);
1588
1612
  if (((_a = replayer.mirror.getMeta(parentNode)) === null || _a === void 0 ? void 0 : _a.type) === NodeType$1.Document &&
1589
1613
  ((_b = replayer.mirror.getMeta(newNode)) === null || _b === void 0 ? void 0 : _b.type) === NodeType$1.Element &&
1590
- (parentNode).documentElement) {
1591
- parentNode.removeChild((parentNode).documentElement);
1614
+ parentNode.documentElement) {
1615
+ parentNode.removeChild(parentNode.documentElement);
1592
1616
  oldChildren[oldStartIndex] = undefined;
1593
1617
  oldStartNode = undefined;
1594
1618
  }
1595
- parentNode.insertBefore(newNode, oldStartNode || null);
1596
- diff(newNode, newStartNode, replayer, rrnodeMirror);
1619
+ try {
1620
+ parentNode.insertBefore(newNode, oldStartNode || null);
1621
+ diff(newNode, newStartNode, replayer, rrnodeMirror);
1622
+ }
1623
+ catch (e) {
1624
+ console.error(e, parentNode, newNode, oldStartNode || null);
1625
+ }
1597
1626
  }
1598
1627
  newStartNode = newChildren[++newStartIndex];
1599
1628
  }
@@ -1608,8 +1637,13 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
1608
1637
  });
1609
1638
  for (; newStartIndex <= newEndIndex; ++newStartIndex) {
1610
1639
  const newNode = createOrGetNode(newChildren[newStartIndex], replayer.mirror, rrnodeMirror);
1611
- parentNode.insertBefore(newNode, referenceNode);
1612
- diff(newNode, newChildren[newStartIndex], replayer, rrnodeMirror);
1640
+ try {
1641
+ parentNode.insertBefore(newNode, referenceNode);
1642
+ diff(newNode, newChildren[newStartIndex], replayer, rrnodeMirror);
1643
+ }
1644
+ catch (e) {
1645
+ console.error(e, parentNode, newNode, referenceNode);
1646
+ }
1613
1647
  }
1614
1648
  }
1615
1649
  else if (newStartIndex > newEndIndex) {
@@ -1663,8 +1697,7 @@ function getNestedRule$1(rules, position) {
1663
1697
  return rule;
1664
1698
  }
1665
1699
  else {
1666
- return getNestedRule$1((rule).cssRules[position[1]]
1667
- .cssRules, position.slice(2));
1700
+ return getNestedRule$1(rule.cssRules[position[1]].cssRules, position.slice(2));
1668
1701
  }
1669
1702
  }
1670
1703
  var StyleRuleType;