xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve rrdom robustness (#1091)

Browse Source
This commit is contained in:
Yun Feng
2026-04-01 12:00:00 +08:00
committed by GitHub
parent a9c01eb8d0
commit 12c2671644
7 changed files with 872 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

410
packages/rrdom/src/diff.ts
View File

@@ -1,4 +1,8 @@
import { NodeType as RRNodeType, Mirror as NodeMirror } from 'rrweb-snapshot';
import {
NodeType as RRNodeType,
Mirror as NodeMirror,
elementNode,
} from 'rrweb-snapshot';
import type {
canvasMutationData,
canvasEventWithTime,
@@ -10,7 +14,6 @@ import type {
import type {
IRRCDATASection,
IRRComment,
IRRDocument,
IRRDocumentType,
IRRElement,
IRRNode,
@@ -85,21 +88,36 @@ export type ReplayerHandler = {
data: styleDeclarationData | styleSheetRuleData,
styleSheet: CSSStyleSheet,
) => void;
// Similar to the `afterAppend` callback in the `rrweb-snapshot` package. It's a postorder traversal of the newly appended nodes.
afterAppend?(node: Node, id: number): void;
};
// A set contains newly appended nodes. It's used to make sure the afterAppend callback can iterate newly appended nodes in the same traversal order as that in the `rrweb-snapshot` package.
let createdNodeSet: WeakSet<Node> | null = null;
/**
* Make the old tree to have the same structure and properties as the new tree with the diff algorithm.
* @param oldTree - The old tree to be modified.
* @param newTree - The new tree which the old tree will be modified to.
* @param replayer - A slimmed replayer instance including the mirror of the old tree.
* @param rrnodeMirror - The mirror of the new tree.
*/
export function diff(
oldTree: Node,
newTree: IRRNode,
replayer: ReplayerHandler,
rrnodeMirror?: Mirror,
rrnodeMirror: Mirror = (newTree as RRDocument).mirror ||
(newTree.ownerDocument as RRDocument).mirror,
) {
oldTree = diffBeforeUpdatingChildren(
oldTree,
newTree,
replayer,
rrnodeMirror,
);
const oldChildren = oldTree.childNodes;
const newChildren = newTree.childNodes;
rrnodeMirror =
rrnodeMirror ||
(newTree as RRDocument).mirror ||
(newTree.ownerDocument as RRDocument).mirror;
if (oldChildren.length > 0 || newChildren.length > 0) {
diffChildren(
Array.from(oldChildren),
@@ -110,20 +128,119 @@ export function diff(
);
}
let inputDataToApply = null,
scrollDataToApply = null;
diffAfterUpdatingChildren(oldTree, newTree, replayer, rrnodeMirror);
}
/**
* Do some preparation work before updating the children of the old tree.
*/
function diffBeforeUpdatingChildren(
oldTree: Node,
newTree: IRRNode,
replayer: ReplayerHandler,
rrnodeMirror: Mirror,
) {
if (replayer.afterAppend && !createdNodeSet) {
createdNodeSet = new WeakSet();
setTimeout(() => {
createdNodeSet = null;
}, 0);
}
// If the Mirror data has some flaws, the diff function may throw errors. We check the node consistency here to make it robust.
if (!sameNodeType(oldTree, newTree)) {
const calibratedOldTree = createOrGetNode(
newTree,
replayer.mirror,
rrnodeMirror,
);
oldTree.parentNode?.replaceChild(calibratedOldTree, oldTree);
oldTree = calibratedOldTree;
}
switch (newTree.RRNodeType) {
case RRNodeType.Document: {
const newRRDocument = newTree as IRRDocument;
scrollDataToApply = (newRRDocument as RRDocument).scrollData;
/**
* Special cases for updating the document node:
* Case 1: If the oldTree is the content document of an iframe element and its content (HTML, HEAD, and BODY) is automatically mounted by browsers, we need to remove them to avoid unexpected behaviors. e.g. Selector matches may be case insensitive.
* Case 2: The newTree has a different serialized Id (a different document object), we need to reopen it and update the nodeMirror.
*/
if (!nodeMatching(oldTree, newTree, replayer.mirror, rrnodeMirror)) {
const newMeta = rrnodeMirror.getMeta(newTree);
if (newMeta) {
replayer.mirror.removeNodeFromMap(oldTree);
(oldTree as Document).close();
(oldTree as Document).open();
replayer.mirror.add(oldTree, newMeta);
createdNodeSet?.add(oldTree);
}
}
break;
}
case RRNodeType.Element: {
const oldElement = oldTree as HTMLElement;
const newRRElement = newTree as IRRElement;
switch (newRRElement.tagName) {
case 'IFRAME': {
const oldContentDocument = (oldTree as HTMLIFrameElement)
.contentDocument;
// If the iframe is cross-origin, the contentDocument will be null.
if (!oldContentDocument) break;
// IFrame element doesn't have child nodes, so here we update its content document separately.
diff(
oldContentDocument,
(newTree as RRIFrameElement).contentDocument,
replayer,
rrnodeMirror,
);
break;
}
}
if (newRRElement.shadowRoot) {
if (!oldElement.shadowRoot) oldElement.attachShadow({ mode: 'open' });
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const oldChildren = oldElement.shadowRoot!.childNodes;
const newChildren = newRRElement.shadowRoot.childNodes;
if (oldChildren.length > 0 || newChildren.length > 0)
diffChildren(
Array.from(oldChildren),
newChildren,
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
oldElement.shadowRoot!,
replayer,
rrnodeMirror,
);
}
break;
}
}
return oldTree;
}
/**
* Finish the diff work after updating the children of the old tree.
*/
function diffAfterUpdatingChildren(
oldTree: Node,
newTree: IRRNode,
replayer: ReplayerHandler,
rrnodeMirror: Mirror,
) {
switch (newTree.RRNodeType) {
case RRNodeType.Document: {
const scrollData = (newTree as RRDocument).scrollData;
scrollData && replayer.applyScroll(scrollData, true);
break;
}
case RRNodeType.Element: {
const oldElement = oldTree as HTMLElement;
const newRRElement = newTree as RRElement;
diffProps(oldElement, newRRElement, rrnodeMirror);
scrollDataToApply = (newRRElement as RRElement).scrollData;
inputDataToApply = (newRRElement as RRElement).inputData;
newRRElement.scrollData &&
replayer.applyScroll(newRRElement.scrollData, true);
/**
* Input data need to get applied after all children of this node are updated.
* Otherwise when we set a value for a select element whose options are empty, the value won't actually update.
*/
newRRElement.inputData && replayer.applyInput(newRRElement.inputData);
switch (newRRElement.tagName) {
case 'AUDIO':
case 'VIDEO': {
@@ -143,59 +260,43 @@ export function diff(
oldMediaElement.playbackRate = newMediaRRElement.playbackRate;
break;
}
case 'CANVAS':
{
const rrCanvasElement = newTree as RRCanvasElement;
// This canvas element is created with initial data in an iframe element. https://github.com/rrweb-io/rrweb/pull/944
if (rrCanvasElement.rr_dataURL !== null) {
const image = document.createElement('img');
image.onload = () => {
const ctx = (oldElement as HTMLCanvasElement).getContext('2d');
if (ctx) {
ctx.drawImage(image, 0, 0, image.width, image.height);
}
};
image.src = rrCanvasElement.rr_dataURL;
}
rrCanvasElement.canvasMutations.forEach((canvasMutation) =>
replayer.applyCanvas(
canvasMutation.event,
canvasMutation.mutation,
oldTree as HTMLCanvasElement,
),
);
case 'CANVAS': {
const rrCanvasElement = newTree as RRCanvasElement;
// This canvas element is created with initial data in an iframe element. https://github.com/rrweb-io/rrweb/pull/944
if (rrCanvasElement.rr_dataURL !== null) {
const image = document.createElement('img');
image.onload = () => {
const ctx = (oldElement as HTMLCanvasElement).getContext('2d');
if (ctx) {
ctx.drawImage(image, 0, 0, image.width, image.height);
}
};
image.src = rrCanvasElement.rr_dataURL;
}
break;
case 'STYLE':
{
const styleSheet = (oldElement as HTMLStyleElement).sheet;
styleSheet &&
(newTree as RRStyleElement).rules.forEach((data) =>
replayer.applyStyleSheetMutation(data, styleSheet),
);
}
break;
}
if (newRRElement.shadowRoot) {
if (!oldElement.shadowRoot) oldElement.attachShadow({ mode: 'open' });
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const oldChildren = oldElement.shadowRoot!.childNodes;
const newChildren = newRRElement.shadowRoot.childNodes;
if (oldChildren.length > 0 || newChildren.length > 0)
diffChildren(
Array.from(oldChildren),
newChildren,
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
oldElement.shadowRoot!,
replayer,
rrnodeMirror,
rrCanvasElement.canvasMutations.forEach((canvasMutation) =>
replayer.applyCanvas(
canvasMutation.event,
canvasMutation.mutation,
oldTree as HTMLCanvasElement,
),
);
break;
}
// Props of style elements have to be updated after all children are updated. Otherwise the props can be overwritten by textContent.
case 'STYLE': {
const styleSheet = (oldElement as HTMLStyleElement).sheet;
styleSheet &&
(newTree as RRStyleElement).rules.forEach((data) =>
replayer.applyStyleSheetMutation(data, styleSheet),
);
break;
}
}
break;
}
case RRNodeType.Text:
case RRNodeType.Comment:
case RRNodeType.CDATA:
case RRNodeType.CDATA: {
if (
oldTree.textContent !==
(newTree as IRRText | IRRComment | IRRCDATASection).data
@@ -205,34 +306,12 @@ export function diff(
| IRRComment
| IRRCDATASection).data;
break;
default:
}
scrollDataToApply && replayer.applyScroll(scrollDataToApply, true);
/**
* Input data need to get applied after all children of this node are updated.
* Otherwise when we set a value for a select element whose options are empty, the value won't actually update.
*/
inputDataToApply && replayer.applyInput(inputDataToApply);
// IFrame element doesn't have child nodes.
if (newTree.nodeName === 'IFRAME') {
const oldContentDocument = (oldTree as HTMLIFrameElement).contentDocument;
const newIFrameElement = newTree as RRIFrameElement;
// If the iframe is cross-origin, the contentDocument will be null.
if (oldContentDocument) {
const sn = rrnodeMirror.getMeta(newIFrameElement.contentDocument);
if (sn) {
replayer.mirror.add(oldContentDocument, { ...sn });
}
diff(
oldContentDocument,
newIFrameElement.contentDocument,
replayer,
rrnodeMirror,
);
}
}
if (createdNodeSet?.has(oldTree)) {
createdNodeSet.delete(oldTree);
replayer.afterAppend?.(oldTree, replayer.mirror.getId(oldTree));
}
}
function diffProps(
@@ -245,8 +324,8 @@ function diffProps(
for (const name in newAttributes) {
const newValue = newAttributes[name];
const sn = rrnodeMirror.getMeta(newTree);
if (sn && 'isSVG' in sn && sn.isSVG && NAMESPACES[name])
const sn = rrnodeMirror.getMeta(newTree) as elementNode | null;
if (sn?.isSVG && NAMESPACES[name])
oldTree.setAttributeNS(NAMESPACES[name], name, newValue);
else if (newTree.tagName === 'CANVAS' && name === 'rr_dataURL') {
const image = document.createElement('img');
@@ -283,53 +362,47 @@ function diffChildren(
newStartNode = newChildren[newStartIndex],
newEndNode = newChildren[newEndIndex];
let oldIdToIndex: Record<number, number> | undefined = undefined,
indexInOld;
indexInOld: number | undefined = undefined;
while (oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex) {
const oldStartId = replayer.mirror.getId(oldStartNode);
const oldEndId = replayer.mirror.getId(oldEndNode);
const newStartId = rrnodeMirror.getId(newStartNode);
const newEndId = rrnodeMirror.getId(newEndNode);
// rrdom contains elements with negative ids, we don't want to accidentally match those to a mirror mismatch (-1) id.
// Negative oldStartId happen when nodes are not in the mirror, but are in the DOM.
// eg.iframes come with a document, html, head and body nodes.
// thats why below we always check if an id is negative.
if (oldStartNode === undefined) {
oldStartNode = oldChildren[++oldStartIndex];
} else if (oldEndNode === undefined) {
oldEndNode = oldChildren[--oldEndIndex];
} else if (
oldStartId !== -1 &&
// same first element?
oldStartId === newStartId
// same first node?
nodeMatching(oldStartNode, newStartNode, replayer.mirror, rrnodeMirror)
) {
diff(oldStartNode, newStartNode, replayer, rrnodeMirror);
oldStartNode = oldChildren[++oldStartIndex];
newStartNode = newChildren[++newStartIndex];
} else if (
oldEndId !== -1 &&
// same last element?
oldEndId === newEndId
// same last node?
nodeMatching(oldEndNode, newEndNode, replayer.mirror, rrnodeMirror)
) {
diff(oldEndNode, newEndNode, replayer, rrnodeMirror);
oldEndNode = oldChildren[--oldEndIndex];
newEndNode = newChildren[--newEndIndex];
} else if (
oldStartId !== -1 &&
// is the first old element the same as the last new element?
oldStartId === newEndId
// is the first old node the same as the last new node?
nodeMatching(oldStartNode, newEndNode, replayer.mirror, rrnodeMirror)
) {
parentNode.insertBefore(oldStartNode, oldEndNode.nextSibling);
try {
parentNode.insertBefore(oldStartNode, oldEndNode.nextSibling);
} catch (e) {
console.warn(e);
}
diff(oldStartNode, newEndNode, replayer, rrnodeMirror);
oldStartNode = oldChildren[++oldStartIndex];
newEndNode = newChildren[--newEndIndex];
} else if (
oldEndId !== -1 &&
// is the last old element the same as the first new element?
oldEndId === newStartId
// is the last old node the same as the first new node?
nodeMatching(oldEndNode, newStartNode, replayer.mirror, rrnodeMirror)
) {
parentNode.insertBefore(oldEndNode, oldStartNode);
try {
parentNode.insertBefore(oldEndNode, oldStartNode);
} catch (e) {
console.warn(e);
}
diff(oldEndNode, newStartNode, replayer, rrnodeMirror);
oldEndNode = oldChildren[--oldEndIndex];
newStartNode = newChildren[++newStartIndex];
@@ -345,10 +418,17 @@ function diffChildren(
}
}
indexInOld = oldIdToIndex[rrnodeMirror.getId(newStartNode)];
if (indexInOld) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const nodeToMove = oldChildren[indexInOld]!;
parentNode.insertBefore(nodeToMove, oldStartNode);
const nodeToMove = oldChildren[indexInOld];
if (
indexInOld !== undefined &&
nodeToMove &&
nodeMatching(nodeToMove, newStartNode, replayer.mirror, rrnodeMirror)
) {
try {
parentNode.insertBefore(nodeToMove, oldStartNode);
} catch (e) {
console.warn(e);
}
diff(nodeToMove, newStartNode, replayer, rrnodeMirror);
oldChildren[indexInOld] = undefined;
} else {
@@ -358,50 +438,66 @@ function diffChildren(
rrnodeMirror,
);
/**
* A mounted iframe element has an automatically created HTML element.
* We should delete it before insert a serialized one. Otherwise, an error 'Only one element on document allowed' will be thrown.
*/
if (
parentNode.nodeName === '#document' &&
replayer.mirror.getMeta(newNode)?.type === RRNodeType.Element &&
(parentNode as Document).documentElement
oldStartNode &&
/**
* Special case 1: one document isn't allowed to have two doctype nodes at the same time, so we need to remove the old one first before inserting the new one.
* How this case happens: A parent document in the old tree already has a doctype node with an id e.g. #1. A new full snapshot rebuilds the replayer with a new doctype node with another id #2. According to the algorithm, the new doctype node will be inserted before the old one, which is not allowed by the Document standard.
*/
((newNode.nodeType === newNode.DOCUMENT_TYPE_NODE &&
oldStartNode.nodeType === oldStartNode.DOCUMENT_TYPE_NODE) ||
/**
* Special case 2: one document isn't allowed to have two HTMLElements at the same time, so we need to remove the old one first before inserting the new one.
* How this case happens: A mounted iframe element has an automatically created HTML element. We should delete it before inserting a serialized one. Otherwise, an error 'Only one element on document allowed' will be thrown.
*/
(newNode.nodeType === newNode.ELEMENT_NODE &&
oldStartNode.nodeType === oldStartNode.ELEMENT_NODE))
) {
parentNode.removeChild((parentNode as Document).documentElement);
oldChildren[oldStartIndex] = undefined;
oldStartNode = undefined;
parentNode.removeChild(oldStartNode);
replayer.mirror.removeNodeFromMap(oldStartNode);
oldStartNode = oldChildren[++oldStartIndex];
}
try {
parentNode.insertBefore(newNode, oldStartNode || null);
diff(newNode, newStartNode, replayer, rrnodeMirror);
} catch (e) {
console.warn(e);
}
parentNode.insertBefore(newNode, oldStartNode || null);
diff(newNode, newStartNode, replayer, rrnodeMirror);
}
newStartNode = newChildren[++newStartIndex];
}
}
if (oldStartIndex > oldEndIndex) {
const referenceRRNode = newChildren[newEndIndex + 1];
let referenceNode = null;
let referenceNode: Node | null = null;
if (referenceRRNode)
parentNode.childNodes.forEach((child) => {
if (
replayer.mirror.getId(child) === rrnodeMirror.getId(referenceRRNode)
)
referenceNode = child;
});
referenceNode = replayer.mirror.getNode(
rrnodeMirror.getId(referenceRRNode),
);
for (; newStartIndex <= newEndIndex; ++newStartIndex) {
const newNode = createOrGetNode(
newChildren[newStartIndex],
replayer.mirror,
rrnodeMirror,
);
parentNode.insertBefore(newNode, referenceNode);
diff(newNode, newChildren[newStartIndex], replayer, rrnodeMirror);
try {
parentNode.insertBefore(newNode, referenceNode);
diff(newNode, newChildren[newStartIndex], replayer, rrnodeMirror);
} catch (e) {
console.warn(e);
}
}
} else if (newStartIndex > newEndIndex) {
for (; oldStartIndex <= oldEndIndex; oldStartIndex++) {
const node = oldChildren[oldStartIndex];
if (node) {
if (!node || !parentNode.contains(node)) continue;
try {
parentNode.removeChild(node);
replayer.mirror.removeNodeFromMap(node);
} catch (e) {
console.warn(e);
}
}
}
@@ -417,7 +513,7 @@ export function createOrGetNode(
let node: Node | null = null;
// negative ids shouldn't be compared accross mirrors
if (nodeId > -1) node = domMirror.getNode(nodeId);
if (node !== null) return node;
if (node !== null && sameNodeType(node, rrNode)) return node;
switch (rrNode.RRNodeType) {
case RRNodeType.Document:
node = new Document();
@@ -449,5 +545,41 @@ export function createOrGetNode(
}
if (sn) domMirror.add(node, { ...sn });
try {
createdNodeSet?.add(node);
} catch (e) {
// Just for safety concern.
}
return node;
}
/**
* To check whether two nodes are the same type of node. If they are both Elements, check wether their tagNames are same or not.
*/
export function sameNodeType(node1: Node, node2: IRRNode) {
if (node1.nodeType !== node2.nodeType) return false;
return (
node1.nodeType !== node1.ELEMENT_NODE ||
(node1 as HTMLElement).tagName.toUpperCase() ===
(node2 as IRRElement).tagName
);
}
/**
* To check whether two nodes are matching. If so, they are supposed to have the same serialized Id and node type. If they are both Elements, their tagNames should be the same as well. Otherwise, they are not matching.
*/
export function nodeMatching(
node1: Node,
node2: IRRNode,
domMirror: NodeMirror,
rrdomMirror: Mirror,
): boolean {
const node1Id = domMirror.getId(node1);
const node2Id = rrdomMirror.getId(node2);
// rrdom contains elements with negative ids, we don't want to accidentally match those to a mirror mismatch (-1) id.
// Negative oldStartId happen when nodes are not in the mirror, but are in the DOM.
// eg.iframes come with a document, html, head and body nodes.
// thats why below we always check if an id is negative.
if (node1Id === -1 || node1Id !== node2Id) return false;
return sameNodeType(node1, node2);
}