@highlight-run/rrweb 2.0.8 → 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.
package/lib/rrweb-all.js CHANGED
@@ -928,6 +928,8 @@ function serializeNodeWithId(n, options) {
928
928
  onSerialize: onSerialize,
929
929
  onIframeLoad: onIframeLoad,
930
930
  iframeLoadTimeout: iframeLoadTimeout,
931
+ onStylesheetLoad: onStylesheetLoad,
932
+ stylesheetLoadTimeout: stylesheetLoadTimeout,
931
933
  keepIframeSrcFn: keepIframeSrcFn,
932
934
  enableStrictPrivacy: enableStrictPrivacy
933
935
  });
@@ -961,8 +963,9 @@ function serializeNodeWithId(n, options) {
961
963
  preserveWhiteSpace: preserveWhiteSpace,
962
964
  onSerialize: onSerialize,
963
965
  onIframeLoad: onIframeLoad,
964
- onStylesheetLoad: onStylesheetLoad,
965
966
  iframeLoadTimeout: iframeLoadTimeout,
967
+ onStylesheetLoad: onStylesheetLoad,
968
+ stylesheetLoadTimeout: stylesheetLoadTimeout,
966
969
  keepIframeSrcFn: keepIframeSrcFn,
967
970
  enableStrictPrivacy: enableStrictPrivacy
968
971
  });
@@ -1703,6 +1706,7 @@ function buildNode(n, options) {
1703
1706
  if (!image.currentSrc.startsWith('data:')) {
1704
1707
  image.setAttribute('rrweb-original-src', n.attributes.src);
1705
1708
  image.src = value;
1709
+ image.setAttribute('rrweb-inline-src', value);
1706
1710
  }
1707
1711
  }
1708
1712
  if (name_1 === 'rr_width') {
@@ -1731,6 +1735,15 @@ function buildNode(n, options) {
1731
1735
  for (var name_1 in n.attributes) {
1732
1736
  _loop_1(name_1);
1733
1737
  }
1738
+ if (tagName === 'img') {
1739
+ var image = node_1;
1740
+ if (!image.currentSrc.startsWith('data:')) {
1741
+ var inlineSrc = image.getAttribute('rrweb-inline-src');
1742
+ if (inlineSrc === null || inlineSrc === void 0 ? void 0 : inlineSrc.startsWith('data:')) {
1743
+ image.src = inlineSrc;
1744
+ }
1745
+ }
1746
+ }
1734
1747
  if (n.isShadowHost) {
1735
1748
  if (!node_1.shadowRoot) {
1736
1749
  node_1.attachShadow({ mode: 'open' });
@@ -4179,6 +4192,9 @@ function record(options = {}) {
4179
4192
  if (isSerializedIframe(n, mirror)) {
4180
4193
  iframeManager.addIframe(n);
4181
4194
  }
4195
+ if (isSerializedStylesheet(n, mirror)) {
4196
+ stylesheetManager.addStylesheet(n);
4197
+ }
4182
4198
  if (hasShadowRoot(n)) {
4183
4199
  shadowDomManager.addShadowRoot(n.shadowRoot, document);
4184
4200
  }
@@ -4188,7 +4204,7 @@ function record(options = {}) {
4188
4204
  shadowDomManager.observeAttachShadow(iframe);
4189
4205
  },
4190
4206
  onStylesheetLoad: (linkEl, childSn) => {
4191
- this.stylesheetManager.attachStylesheet(linkEl, childSn, this.mirror);
4207
+ stylesheetManager.attachStylesheet(linkEl, childSn, mirror);
4192
4208
  },
4193
4209
  keepIframeSrcFn,
4194
4210
  });
@@ -4889,7 +4905,7 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
4889
4905
  break;
4890
4906
  }
4891
4907
  case NodeType$1.Element: {
4892
- const oldElement = (oldTree);
4908
+ const oldElement = oldTree;
4893
4909
  const newRRElement = newTree;
4894
4910
  diffProps(oldElement, newRRElement, rrnodeMirror);
4895
4911
  scrollDataToApply = newRRElement.scrollData;
@@ -4897,7 +4913,7 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
4897
4913
  switch (newRRElement.tagName) {
4898
4914
  case 'AUDIO':
4899
4915
  case 'VIDEO': {
4900
- const oldMediaElement = (oldTree);
4916
+ const oldMediaElement = oldTree;
4901
4917
  const newMediaRRElement = newRRElement;
4902
4918
  if (newMediaRRElement.paused !== undefined)
4903
4919
  newMediaRRElement.paused
@@ -4912,7 +4928,7 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
4912
4928
  break;
4913
4929
  }
4914
4930
  case 'CANVAS':
4915
- newTree.canvasMutations.forEach((canvasMutation) => replayer.applyCanvas(canvasMutation.event, canvasMutation.mutation, (oldTree)));
4931
+ newTree.canvasMutations.forEach((canvasMutation) => replayer.applyCanvas(canvasMutation.event, canvasMutation.mutation, oldTree));
4916
4932
  break;
4917
4933
  case 'STYLE':
4918
4934
  applyVirtualStyleRulesToNode(oldElement, newTree.rules);
@@ -4939,8 +4955,7 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
4939
4955
  scrollDataToApply && replayer.applyScroll(scrollDataToApply, true);
4940
4956
  inputDataToApply && replayer.applyInput(inputDataToApply);
4941
4957
  if (newTree.nodeName === 'IFRAME') {
4942
- const oldContentDocument = (oldTree)
4943
- .contentDocument;
4958
+ const oldContentDocument = oldTree.contentDocument;
4944
4959
  const newIFrameElement = newTree;
4945
4960
  if (oldContentDocument) {
4946
4961
  const sn = rrnodeMirror.getMeta(newIFrameElement.contentDocument);
@@ -5001,16 +5016,26 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
5001
5016
  newEndNode = newChildren[--newEndIndex];
5002
5017
  }
5003
5018
  else if (replayer.mirror.getId(oldStartNode) === rrnodeMirror.getId(newEndNode)) {
5004
- parentNode.insertBefore(oldStartNode, oldEndNode.nextSibling);
5005
- diff(oldStartNode, newEndNode, replayer, rrnodeMirror);
5006
- oldStartNode = oldChildren[++oldStartIndex];
5007
- newEndNode = newChildren[--newEndIndex];
5019
+ try {
5020
+ parentNode.insertBefore(oldStartNode, oldEndNode.nextSibling);
5021
+ diff(oldStartNode, newEndNode, replayer, rrnodeMirror);
5022
+ oldStartNode = oldChildren[++oldStartIndex];
5023
+ newEndNode = newChildren[--newEndIndex];
5024
+ }
5025
+ catch (e) {
5026
+ console.error(e, parentNode, oldStartNode, oldEndNode);
5027
+ }
5008
5028
  }
5009
5029
  else if (replayer.mirror.getId(oldEndNode) === rrnodeMirror.getId(newStartNode)) {
5010
- parentNode.insertBefore(oldEndNode, oldStartNode);
5011
- diff(oldEndNode, newStartNode, replayer, rrnodeMirror);
5012
- oldEndNode = oldChildren[--oldEndIndex];
5013
- newStartNode = newChildren[++newStartIndex];
5030
+ try {
5031
+ parentNode.insertBefore(oldEndNode, oldStartNode);
5032
+ diff(oldEndNode, newStartNode, replayer, rrnodeMirror);
5033
+ oldEndNode = oldChildren[--oldEndIndex];
5034
+ newStartNode = newChildren[++newStartIndex];
5035
+ }
5036
+ catch (e) {
5037
+ console.error(e, parentNode, oldEndNode, oldStartNode);
5038
+ }
5014
5039
  }
5015
5040
  else {
5016
5041
  if (!oldIdToIndex) {
@@ -5024,21 +5049,31 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
5024
5049
  indexInOld = oldIdToIndex[rrnodeMirror.getId(newStartNode)];
5025
5050
  if (indexInOld) {
5026
5051
  const nodeToMove = oldChildren[indexInOld];
5027
- parentNode.insertBefore(nodeToMove, oldStartNode);
5028
- diff(nodeToMove, newStartNode, replayer, rrnodeMirror);
5029
- oldChildren[indexInOld] = undefined;
5052
+ try {
5053
+ parentNode.insertBefore(nodeToMove, oldStartNode);
5054
+ diff(nodeToMove, newStartNode, replayer, rrnodeMirror);
5055
+ oldChildren[indexInOld] = undefined;
5056
+ }
5057
+ catch (e) {
5058
+ console.error(e, parentNode, nodeToMove, oldStartNode);
5059
+ }
5030
5060
  }
5031
5061
  else {
5032
5062
  const newNode = createOrGetNode(newStartNode, replayer.mirror, rrnodeMirror);
5033
5063
  if (((_a = replayer.mirror.getMeta(parentNode)) === null || _a === void 0 ? void 0 : _a.type) === NodeType$1.Document &&
5034
5064
  ((_b = replayer.mirror.getMeta(newNode)) === null || _b === void 0 ? void 0 : _b.type) === NodeType$1.Element &&
5035
- (parentNode).documentElement) {
5036
- parentNode.removeChild((parentNode).documentElement);
5065
+ parentNode.documentElement) {
5066
+ parentNode.removeChild(parentNode.documentElement);
5037
5067
  oldChildren[oldStartIndex] = undefined;
5038
5068
  oldStartNode = undefined;
5039
5069
  }
5040
- parentNode.insertBefore(newNode, oldStartNode || null);
5041
- diff(newNode, newStartNode, replayer, rrnodeMirror);
5070
+ try {
5071
+ parentNode.insertBefore(newNode, oldStartNode || null);
5072
+ diff(newNode, newStartNode, replayer, rrnodeMirror);
5073
+ }
5074
+ catch (e) {
5075
+ console.error(e, parentNode, newNode, oldStartNode || null);
5076
+ }
5042
5077
  }
5043
5078
  newStartNode = newChildren[++newStartIndex];
5044
5079
  }
@@ -5053,8 +5088,13 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
5053
5088
  });
5054
5089
  for (; newStartIndex <= newEndIndex; ++newStartIndex) {
5055
5090
  const newNode = createOrGetNode(newChildren[newStartIndex], replayer.mirror, rrnodeMirror);
5056
- parentNode.insertBefore(newNode, referenceNode);
5057
- diff(newNode, newChildren[newStartIndex], replayer, rrnodeMirror);
5091
+ try {
5092
+ parentNode.insertBefore(newNode, referenceNode);
5093
+ diff(newNode, newChildren[newStartIndex], replayer, rrnodeMirror);
5094
+ }
5095
+ catch (e) {
5096
+ console.error(e, parentNode, newNode, referenceNode);
5097
+ }
5058
5098
  }
5059
5099
  }
5060
5100
  else if (newStartIndex > newEndIndex) {
@@ -5108,8 +5148,7 @@ function getNestedRule(rules, position) {
5108
5148
  return rule;
5109
5149
  }
5110
5150
  else {
5111
- return getNestedRule((rule).cssRules[position[1]]
5112
- .cssRules, position.slice(2));
5151
+ return getNestedRule(rule.cssRules[position[1]].cssRules, position.slice(2));
5113
5152
  }
5114
5153
  }
5115
5154
  var StyleRuleType;
package/lib/rrweb.js CHANGED
@@ -928,6 +928,8 @@ function serializeNodeWithId(n, options) {
928
928
  onSerialize: onSerialize,
929
929
  onIframeLoad: onIframeLoad,
930
930
  iframeLoadTimeout: iframeLoadTimeout,
931
+ onStylesheetLoad: onStylesheetLoad,
932
+ stylesheetLoadTimeout: stylesheetLoadTimeout,
931
933
  keepIframeSrcFn: keepIframeSrcFn,
932
934
  enableStrictPrivacy: enableStrictPrivacy
933
935
  });
@@ -961,8 +963,9 @@ function serializeNodeWithId(n, options) {
961
963
  preserveWhiteSpace: preserveWhiteSpace,
962
964
  onSerialize: onSerialize,
963
965
  onIframeLoad: onIframeLoad,
964
- onStylesheetLoad: onStylesheetLoad,
965
966
  iframeLoadTimeout: iframeLoadTimeout,
967
+ onStylesheetLoad: onStylesheetLoad,
968
+ stylesheetLoadTimeout: stylesheetLoadTimeout,
966
969
  keepIframeSrcFn: keepIframeSrcFn,
967
970
  enableStrictPrivacy: enableStrictPrivacy
968
971
  });
@@ -1703,6 +1706,7 @@ function buildNode(n, options) {
1703
1706
  if (!image.currentSrc.startsWith('data:')) {
1704
1707
  image.setAttribute('rrweb-original-src', n.attributes.src);
1705
1708
  image.src = value;
1709
+ image.setAttribute('rrweb-inline-src', value);
1706
1710
  }
1707
1711
  }
1708
1712
  if (name_1 === 'rr_width') {
@@ -1731,6 +1735,15 @@ function buildNode(n, options) {
1731
1735
  for (var name_1 in n.attributes) {
1732
1736
  _loop_1(name_1);
1733
1737
  }
1738
+ if (tagName === 'img') {
1739
+ var image = node_1;
1740
+ if (!image.currentSrc.startsWith('data:')) {
1741
+ var inlineSrc = image.getAttribute('rrweb-inline-src');
1742
+ if (inlineSrc === null || inlineSrc === void 0 ? void 0 : inlineSrc.startsWith('data:')) {
1743
+ image.src = inlineSrc;
1744
+ }
1745
+ }
1746
+ }
1734
1747
  if (n.isShadowHost) {
1735
1748
  if (!node_1.shadowRoot) {
1736
1749
  node_1.attachShadow({ mode: 'open' });
@@ -4179,6 +4192,9 @@ function record(options = {}) {
4179
4192
  if (isSerializedIframe(n, mirror)) {
4180
4193
  iframeManager.addIframe(n);
4181
4194
  }
4195
+ if (isSerializedStylesheet(n, mirror)) {
4196
+ stylesheetManager.addStylesheet(n);
4197
+ }
4182
4198
  if (hasShadowRoot(n)) {
4183
4199
  shadowDomManager.addShadowRoot(n.shadowRoot, document);
4184
4200
  }
@@ -4188,7 +4204,7 @@ function record(options = {}) {
4188
4204
  shadowDomManager.observeAttachShadow(iframe);
4189
4205
  },
4190
4206
  onStylesheetLoad: (linkEl, childSn) => {
4191
- this.stylesheetManager.attachStylesheet(linkEl, childSn, this.mirror);
4207
+ stylesheetManager.attachStylesheet(linkEl, childSn, mirror);
4192
4208
  },
4193
4209
  keepIframeSrcFn,
4194
4210
  });
@@ -4889,7 +4905,7 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
4889
4905
  break;
4890
4906
  }
4891
4907
  case NodeType$1.Element: {
4892
- const oldElement = (oldTree);
4908
+ const oldElement = oldTree;
4893
4909
  const newRRElement = newTree;
4894
4910
  diffProps(oldElement, newRRElement, rrnodeMirror);
4895
4911
  scrollDataToApply = newRRElement.scrollData;
@@ -4897,7 +4913,7 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
4897
4913
  switch (newRRElement.tagName) {
4898
4914
  case 'AUDIO':
4899
4915
  case 'VIDEO': {
4900
- const oldMediaElement = (oldTree);
4916
+ const oldMediaElement = oldTree;
4901
4917
  const newMediaRRElement = newRRElement;
4902
4918
  if (newMediaRRElement.paused !== undefined)
4903
4919
  newMediaRRElement.paused
@@ -4912,7 +4928,7 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
4912
4928
  break;
4913
4929
  }
4914
4930
  case 'CANVAS':
4915
- newTree.canvasMutations.forEach((canvasMutation) => replayer.applyCanvas(canvasMutation.event, canvasMutation.mutation, (oldTree)));
4931
+ newTree.canvasMutations.forEach((canvasMutation) => replayer.applyCanvas(canvasMutation.event, canvasMutation.mutation, oldTree));
4916
4932
  break;
4917
4933
  case 'STYLE':
4918
4934
  applyVirtualStyleRulesToNode(oldElement, newTree.rules);
@@ -4939,8 +4955,7 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
4939
4955
  scrollDataToApply && replayer.applyScroll(scrollDataToApply, true);
4940
4956
  inputDataToApply && replayer.applyInput(inputDataToApply);
4941
4957
  if (newTree.nodeName === 'IFRAME') {
4942
- const oldContentDocument = (oldTree)
4943
- .contentDocument;
4958
+ const oldContentDocument = oldTree.contentDocument;
4944
4959
  const newIFrameElement = newTree;
4945
4960
  if (oldContentDocument) {
4946
4961
  const sn = rrnodeMirror.getMeta(newIFrameElement.contentDocument);
@@ -5001,16 +5016,26 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
5001
5016
  newEndNode = newChildren[--newEndIndex];
5002
5017
  }
5003
5018
  else if (replayer.mirror.getId(oldStartNode) === rrnodeMirror.getId(newEndNode)) {
5004
- parentNode.insertBefore(oldStartNode, oldEndNode.nextSibling);
5005
- diff(oldStartNode, newEndNode, replayer, rrnodeMirror);
5006
- oldStartNode = oldChildren[++oldStartIndex];
5007
- newEndNode = newChildren[--newEndIndex];
5019
+ try {
5020
+ parentNode.insertBefore(oldStartNode, oldEndNode.nextSibling);
5021
+ diff(oldStartNode, newEndNode, replayer, rrnodeMirror);
5022
+ oldStartNode = oldChildren[++oldStartIndex];
5023
+ newEndNode = newChildren[--newEndIndex];
5024
+ }
5025
+ catch (e) {
5026
+ console.error(e, parentNode, oldStartNode, oldEndNode);
5027
+ }
5008
5028
  }
5009
5029
  else if (replayer.mirror.getId(oldEndNode) === rrnodeMirror.getId(newStartNode)) {
5010
- parentNode.insertBefore(oldEndNode, oldStartNode);
5011
- diff(oldEndNode, newStartNode, replayer, rrnodeMirror);
5012
- oldEndNode = oldChildren[--oldEndIndex];
5013
- newStartNode = newChildren[++newStartIndex];
5030
+ try {
5031
+ parentNode.insertBefore(oldEndNode, oldStartNode);
5032
+ diff(oldEndNode, newStartNode, replayer, rrnodeMirror);
5033
+ oldEndNode = oldChildren[--oldEndIndex];
5034
+ newStartNode = newChildren[++newStartIndex];
5035
+ }
5036
+ catch (e) {
5037
+ console.error(e, parentNode, oldEndNode, oldStartNode);
5038
+ }
5014
5039
  }
5015
5040
  else {
5016
5041
  if (!oldIdToIndex) {
@@ -5024,21 +5049,31 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
5024
5049
  indexInOld = oldIdToIndex[rrnodeMirror.getId(newStartNode)];
5025
5050
  if (indexInOld) {
5026
5051
  const nodeToMove = oldChildren[indexInOld];
5027
- parentNode.insertBefore(nodeToMove, oldStartNode);
5028
- diff(nodeToMove, newStartNode, replayer, rrnodeMirror);
5029
- oldChildren[indexInOld] = undefined;
5052
+ try {
5053
+ parentNode.insertBefore(nodeToMove, oldStartNode);
5054
+ diff(nodeToMove, newStartNode, replayer, rrnodeMirror);
5055
+ oldChildren[indexInOld] = undefined;
5056
+ }
5057
+ catch (e) {
5058
+ console.error(e, parentNode, nodeToMove, oldStartNode);
5059
+ }
5030
5060
  }
5031
5061
  else {
5032
5062
  const newNode = createOrGetNode(newStartNode, replayer.mirror, rrnodeMirror);
5033
5063
  if (((_a = replayer.mirror.getMeta(parentNode)) === null || _a === void 0 ? void 0 : _a.type) === NodeType$1.Document &&
5034
5064
  ((_b = replayer.mirror.getMeta(newNode)) === null || _b === void 0 ? void 0 : _b.type) === NodeType$1.Element &&
5035
- (parentNode).documentElement) {
5036
- parentNode.removeChild((parentNode).documentElement);
5065
+ parentNode.documentElement) {
5066
+ parentNode.removeChild(parentNode.documentElement);
5037
5067
  oldChildren[oldStartIndex] = undefined;
5038
5068
  oldStartNode = undefined;
5039
5069
  }
5040
- parentNode.insertBefore(newNode, oldStartNode || null);
5041
- diff(newNode, newStartNode, replayer, rrnodeMirror);
5070
+ try {
5071
+ parentNode.insertBefore(newNode, oldStartNode || null);
5072
+ diff(newNode, newStartNode, replayer, rrnodeMirror);
5073
+ }
5074
+ catch (e) {
5075
+ console.error(e, parentNode, newNode, oldStartNode || null);
5076
+ }
5042
5077
  }
5043
5078
  newStartNode = newChildren[++newStartIndex];
5044
5079
  }
@@ -5053,8 +5088,13 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
5053
5088
  });
5054
5089
  for (; newStartIndex <= newEndIndex; ++newStartIndex) {
5055
5090
  const newNode = createOrGetNode(newChildren[newStartIndex], replayer.mirror, rrnodeMirror);
5056
- parentNode.insertBefore(newNode, referenceNode);
5057
- diff(newNode, newChildren[newStartIndex], replayer, rrnodeMirror);
5091
+ try {
5092
+ parentNode.insertBefore(newNode, referenceNode);
5093
+ diff(newNode, newChildren[newStartIndex], replayer, rrnodeMirror);
5094
+ }
5095
+ catch (e) {
5096
+ console.error(e, parentNode, newNode, referenceNode);
5097
+ }
5058
5098
  }
5059
5099
  }
5060
5100
  else if (newStartIndex > newEndIndex) {
@@ -5108,8 +5148,7 @@ function getNestedRule(rules, position) {
5108
5148
  return rule;
5109
5149
  }
5110
5150
  else {
5111
- return getNestedRule((rule).cssRules[position[1]]
5112
- .cssRules, position.slice(2));
5151
+ return getNestedRule(rule.cssRules[position[1]].cssRules, position.slice(2));
5113
5152
  }
5114
5153
  }
5115
5154
  var StyleRuleType;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@highlight-run/rrweb",
3
- "version": "2.0.8",
3
+ "version": "2.0.9",
4
4
  "description": "record and replay the web",
5
5
  "scripts": {
6
6
  "prepare": "npm run prepack",
@@ -74,13 +74,13 @@
74
74
  "typescript": "^4.6.2"
75
75
  },
76
76
  "dependencies": {
77
- "@highlight-run/rrdom": "^0.1.2",
78
- "@highlight-run/rrweb-snapshot": "^1.1.15",
77
+ "@highlight-run/rrdom": ">0.1.2",
78
+ "@highlight-run/rrweb-snapshot": ">1.1.15",
79
79
  "@types/css-font-loading-module": "0.0.7",
80
80
  "@xstate/fsm": "^1.4.0",
81
81
  "base64-arraybuffer": "^1.0.1",
82
82
  "fflate": "^0.4.4",
83
83
  "mitt": "^1.1.3"
84
84
  },
85
- "gitHead": "a84184254c5f4ae8ca0c6b17b08ac896b3ded341"
85
+ "gitHead": "32a0a83dd05f5772e2f1820e3481837b24aa14fd"
86
86
  }