Skip to content

Commit

Permalink
fix duplicated shadow dom (rrweb-io#1095)
Browse files Browse the repository at this point in the history
* fix: duplicated elements in shadow doms

clean observers before taking new full snapshots

* add checker for replayer to make it stable when data has duplicated nodes

* apply review suggestions

* add change log

* Apply formatting changes

* update prettier to fit the master branch

---------

Co-authored-by: Mark-Fenng <Mark-Fenng@users.noreply.github.com>
  • Loading branch information
YunFeng0817 and Mark-Fenng authored Feb 12, 2023
1 parent 2946f10 commit 1385f7a
Show file tree
Hide file tree
Showing 9 changed files with 281 additions and 81 deletions.
6 changes: 6 additions & 0 deletions .changeset/loud-seals-raise.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'rrweb-snapshot': patch
'rrweb': patch
---

Fix duplicated shadow doms
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
"lerna": "^4.0.0",
"markdownlint": "^0.25.1",
"markdownlint-cli": "^0.31.1",
"prettier": "2.8.4",
"turbo": "^1.2.4",
"typescript": "^4.7.3"
},
Expand Down
15 changes: 14 additions & 1 deletion packages/rrweb-snapshot/src/rebuild.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
attributes,
legacyAttributes,
} from './types';
import { isElement, Mirror } from './utils';
import { isElement, Mirror, isNodeMetaEqual } from './utils';

const tagMap: tagMap = {
script: 'noscript',
Expand Down Expand Up @@ -364,6 +364,19 @@ export function buildNodeWithSN(
afterAppend,
cache,
} = options;
/**
* Add a check to see if the node is already in the mirror. If it is, we can skip the whole process.
* This situation (duplicated nodes) can happen when recorder has some unfixed bugs and the same node is recorded twice. Or something goes wrong when saving or transferring event data.
* Duplicated node creation may cause unexpected errors in replayer. This check tries best effort to prevent the errors.
*/
if (mirror.has(n.id)) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const nodeInMirror = mirror.getNode(n.id)!;
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const meta = mirror.getMeta(nodeInMirror)!;
// For safety concern, check if the node in mirror is the same as the node we are trying to build
if (isNodeMetaEqual(meta, n)) return mirror.getNode(n.id);
}
let node = buildNode(n, { doc, hackCss, cache });
if (!node) {
return null;
Expand Down
33 changes: 33 additions & 0 deletions packages/rrweb-snapshot/src/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ import {
nodeMetaMap,
IMirror,
serializedNodeWithId,
serializedNode,
NodeType,
documentNode,
documentTypeNode,
textNode,
elementNode,
} from './types';

export function isElement(n: Node): n is Element {
Expand Down Expand Up @@ -213,3 +219,30 @@ export function is2DCanvasBlank(canvas: HTMLCanvasElement): boolean {
}
return true;
}

export function isNodeMetaEqual(a: serializedNode, b: serializedNode): boolean {
if (!a || !b || a.type !== b.type) return false;
if (a.type === NodeType.Document)
return a.compatMode === (b as documentNode).compatMode;
else if (a.type === NodeType.DocumentType)
return (
a.name === (b as documentTypeNode).name &&
a.publicId === (b as documentTypeNode).publicId &&
a.systemId === (b as documentTypeNode).systemId
);
else if (
a.type === NodeType.Comment ||
a.type === NodeType.Text ||
a.type === NodeType.CDATA
)
return a.textContent === (b as textNode).textContent;
else if (a.type === NodeType.Element)
return (
a.tagName === (b as elementNode).tagName &&
JSON.stringify(a.attributes) ===
JSON.stringify((b as elementNode).attributes) &&
a.isSVG === (b as elementNode).isSVG &&
a.needBlock === (b as elementNode).needBlock
);
return false;
}
150 changes: 150 additions & 0 deletions packages/rrweb-snapshot/test/utils.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
/**
* @jest-environment jsdom
*/
import { NodeType, serializedNode } from '../src/types';
import { isNodeMetaEqual } from '../src/utils';
import { serializedNodeWithId } from 'rrweb-snapshot';

describe('utils', () => {
describe('isNodeMetaEqual()', () => {
const document1: serializedNode = {
type: NodeType.Document,
compatMode: 'CSS1Compat',
childNodes: [],
};
const document2: serializedNode = {
type: NodeType.Document,
compatMode: 'BackCompat',
childNodes: [],
};
const documentType1: serializedNode = {
type: NodeType.DocumentType,
name: 'html',
publicId: '',
systemId: '',
};
const documentType2: serializedNode = {
type: NodeType.DocumentType,
name: 'html',
publicId: '',
systemId: 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd',
};
const text1: serializedNode = {
type: NodeType.Text,
textContent: 'Hello World',
};
const text2: serializedNode = {
type: NodeType.Text,
textContent: 'Hello world',
};
const comment1: serializedNode = {
type: NodeType.Comment,
textContent: 'Hello World',
};
const comment2: serializedNode = {
type: NodeType.Comment,
textContent: 'Hello world',
};
const element1: serializedNode = {
type: NodeType.Element,
tagName: 'div',
attributes: {
className: 'test',
},
childNodes: [],
};
const element2: serializedNode = {
type: NodeType.Element,
tagName: 'span',
attributes: {
'aria-label': 'Hello World',
},
childNodes: [],
};
const element3: serializedNode = {
type: NodeType.Element,
tagName: 'div',
attributes: { id: 'test' },
childNodes: [comment1 as serializedNodeWithId],
};

it('should return false if two nodes have different node types', () => {
expect(
isNodeMetaEqual(
undefined as unknown as serializedNode,
null as unknown as serializedNode,
),
).toBeFalsy();
expect(isNodeMetaEqual(document1, element1)).toBeFalsy();
expect(isNodeMetaEqual(document1, documentType1)).toBeFalsy();
expect(isNodeMetaEqual(documentType1, element1)).toBeFalsy();
expect(isNodeMetaEqual(text1, comment1)).toBeFalsy();
expect(isNodeMetaEqual(text1, element1)).toBeFalsy();
expect(isNodeMetaEqual(comment1, element1)).toBeFalsy();
});

it('should compare meta data of two document nodes', () => {
expect(
isNodeMetaEqual(document1, JSON.parse(JSON.stringify(document1))),
).toBeTruthy();
expect(
isNodeMetaEqual(JSON.parse(JSON.stringify(document2)), document2),
).toBeTruthy();
expect(isNodeMetaEqual(document1, document2)).toBeFalsy();
});

it('should compare meta data of two documentType nodes', () => {
expect(
isNodeMetaEqual(
documentType1,
JSON.parse(JSON.stringify(documentType1)),
),
).toBeTruthy();
expect(
isNodeMetaEqual(
JSON.parse(JSON.stringify(documentType2)),
documentType2,
),
).toBeTruthy();
expect(isNodeMetaEqual(documentType1, documentType2)).toBeFalsy();
});

it('should compare meta data of two text nodes', () => {
expect(
isNodeMetaEqual(text1, JSON.parse(JSON.stringify(text1))),
).toBeTruthy();
expect(
isNodeMetaEqual(JSON.parse(JSON.stringify(text2)), text2),
).toBeTruthy();
expect(isNodeMetaEqual(text1, text2)).toBeFalsy();
});

it('should compare meta data of two comment nodes', () => {
expect(
isNodeMetaEqual(comment1, JSON.parse(JSON.stringify(comment1))),
).toBeTruthy();
expect(
isNodeMetaEqual(JSON.parse(JSON.stringify(comment2)), comment2),
).toBeTruthy();
expect(isNodeMetaEqual(comment1, comment2)).toBeFalsy();
});

it('should compare meta data of two HTML elements', () => {
expect(
isNodeMetaEqual(element1, JSON.parse(JSON.stringify(element1))),
).toBeTruthy();
expect(
isNodeMetaEqual(JSON.parse(JSON.stringify(element2)), element2),
).toBeTruthy();
expect(
isNodeMetaEqual(element1, {
...element1,
childNodes: [comment2 as serializedNodeWithId],
}),
).toBeTruthy();
expect(isNodeMetaEqual(element1, element2)).toBeFalsy();
expect(isNodeMetaEqual(element1, element3)).toBeFalsy();
expect(isNodeMetaEqual(element2, element3)).toBeFalsy();
});
});
});
2 changes: 0 additions & 2 deletions packages/rrweb/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@
"@types/jest-image-snapshot": "^5.1.0",
"@types/node": "^17.0.21",
"@types/offscreencanvas": "^2019.6.4",
"@types/prettier": "^2.3.2",
"@types/puppeteer": "^5.4.4",
"construct-style-sheets-polyfill": "^3.1.0",
"cross-env": "^5.2.0",
Expand All @@ -65,7 +64,6 @@
"jest": "^27.5.1",
"jest-image-snapshot": "^5.2.0",
"jest-snapshot": "^23.6.0",
"prettier": "2.2.1",
"puppeteer": "^11.0.0",
"rollup": "^2.68.0",
"rollup-plugin-esbuild": "^4.9.1",
Expand Down
4 changes: 2 additions & 2 deletions packages/rrweb/src/record/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -348,8 +348,8 @@ function record<T = eventWithTime>(

// When we take a full snapshot, old tracked StyleSheets need to be removed.
stylesheetManager.reset();
// Old shadow doms cache need to be cleared.
shadowDomManager.clearCache();

shadowDomManager.init();

mutationBuffers.forEach((buf) => buf.lock()); // don't allow any mirror modifications during snapshotting
const node = snapshot(document, {
Expand Down
Loading

0 comments on commit 1385f7a

Please sign in to comment.