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

Fix mutation edge case when blocked class gets unblocked (#867)

Browse Source 
* Fix mutation edge case when blocked class gets unblocked

* Add integration test

* Update isSerialized logic
This commit is contained in:
Rahul Lingala
2026-04-01 12:00:00 +08:00
committed by GitHub
parent d4f5d8dc48
commit bff6a24ddf
5 changed files with 854 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/rrweb/src/record/mutation.ts
View File

@@ -22,6 +22,7 @@ import {
isBlocked, isBlocked,
isAncestorRemoved, isAncestorRemoved,
isIgnored, isIgnored,
isSerialized,
hasShadowRoot, hasShadowRoot,
isSerializedIframe, isSerializedIframe,
} from '../utils'; } from '../utils';
@@ -525,7 +526,8 @@ export default class MutationBuffer {
: this.mirror.getId(m.target); : this.mirror.getId(m.target);
if ( if (
isBlocked(m.target, this.blockClass) || isBlocked(m.target, this.blockClass) ||
isIgnored(n, this.mirror) isIgnored(n, this.mirror) ||
!isSerialized(n, this.mirror)
) { ) {
return; return;
} }

4
packages/rrweb/src/utils.ts
View File

@@ -213,6 +213,10 @@ export function isBlocked(node: Node | null, blockClass: blockClass): boolean {
return isBlocked(node.parentNode, blockClass); return isBlocked(node.parentNode, blockClass);
} }
export function isSerialized(n: Node, mirror: Mirror): boolean {
return mirror.getId(n) !== -1;
}
export function isIgnored(n: Node, mirror: Mirror): boolean { export function isIgnored(n: Node, mirror: Mirror): boolean {
// The main part of the slimDOM check happens in // The main part of the slimDOM check happens in
// rrweb-snapshot::serializeNodeWithId // rrweb-snapshot::serializeNodeWithId

744
packages/rrweb/test/__snapshots__/integration.test.ts.snap
View File

@@ -3546,6 +3546,750 @@ exports[`record integration tests can use maskInputOptions to configure which ty
]" ]"
`; `;
exports[`record integration tests mutations should work when blocked class is unblocked 1`] = `
"[
{
\\"type\\": 0,
\\"data\\": {}
},
{
\\"type\\": 1,
\\"data\\": {}
},
{
\\"type\\": 4,
\\"data\\": {
\\"href\\": \\"about:blank\\",
\\"width\\": 1920,
\\"height\\": 1080
}
},
{
\\"type\\": 2,
\\"data\\": {
\\"node\\": {
\\"type\\": 0,
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"html\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 4
},
{
\\"type\\": 2,
\\"tagName\\": \\"title\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"Uber Application for Codegen Testing\\",
\\"id\\": 6
}
],
\\"id\\": 5
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n\\\\n\\",
\\"id\\": 7
}
],
\\"id\\": 3
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n\\\\n\\",
\\"id\\": 8
},
{
\\"type\\": 2,
\\"tagName\\": \\"body\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 10
},
{
\\"type\\": 2,
\\"tagName\\": \\"script\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
\\"id\\": 12
}
],
\\"id\\": 11
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 13
},
{
\\"type\\": 2,
\\"tagName\\": \\"br\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 14
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 15
},
{
\\"type\\": 2,
\\"tagName\\": \\"h1\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n Verify that block class bugs are fixed\\\\n \\",
\\"id\\": 17
}
],
\\"id\\": 16
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 18
},
{
\\"type\\": 2,
\\"tagName\\": \\"br\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 19
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 20
},
{
\\"type\\": 2,
\\"tagName\\": \\"div\\",
\\"attributes\\": {
\\"class\\": \\"first\\"
},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 22
},
{
\\"type\\": 2,
\\"tagName\\": \\"div\\",
\\"attributes\\": {
\\"class\\": \\"visible\\"
},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 24
},
{
\\"type\\": 2,
\\"tagName\\": \\"button\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"VISIBLE\\",
\\"id\\": 26
}
],
\\"id\\": 25
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 27
}
],
\\"id\\": 23
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 28
},
{
\\"type\\": 2,
\\"tagName\\": \\"br\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 29
},
{
\\"type\\": 2,
\\"tagName\\": \\"br\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 30
},
{
\\"type\\": 2,
\\"tagName\\": \\"br\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 31
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 32
},
{
\\"type\\": 2,
\\"tagName\\": \\"div\\",
\\"attributes\\": {
\\"class\\": \\"rr-block\\",
\\"rr_width\\": \\"1904px\\",
\\"rr_height\\": \\"21px\\"
},
\\"childNodes\\": [],
\\"id\\": 33
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 34
},
{
\\"type\\": 2,
\\"tagName\\": \\"br\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 35
},
{
\\"type\\": 2,
\\"tagName\\": \\"br\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 36
},
{
\\"type\\": 2,
\\"tagName\\": \\"br\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 37
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 38
},
{
\\"type\\": 2,
\\"tagName\\": \\"button\\",
\\"attributes\\": {
\\"onclick\\": \\"mutate1()\\"
},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"MUTATE\\",
\\"id\\": 40
}
],
\\"id\\": 39
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 41
}
],
\\"id\\": 21
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 42
},
{
\\"type\\": 2,
\\"tagName\\": \\"br\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 43
},
{
\\"type\\": 2,
\\"tagName\\": \\"br\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 44
},
{
\\"type\\": 2,
\\"tagName\\": \\"br\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 45
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 46
},
{
\\"type\\": 2,
\\"tagName\\": \\"div\\",
\\"attributes\\": {
\\"class\\": \\"second\\"
},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 48
},
{
\\"type\\": 2,
\\"tagName\\": \\"div\\",
\\"attributes\\": {
\\"class\\": \\"visible2\\"
},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 50
},
{
\\"type\\": 2,
\\"tagName\\": \\"button\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"VISIBLE\\",
\\"id\\": 52
}
],
\\"id\\": 51
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 53
}
],
\\"id\\": 49
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 54
},
{
\\"type\\": 2,
\\"tagName\\": \\"br\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 55
},
{
\\"type\\": 2,
\\"tagName\\": \\"br\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 56
},
{
\\"type\\": 2,
\\"tagName\\": \\"br\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 57
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 58
},
{
\\"type\\": 2,
\\"tagName\\": \\"div\\",
\\"attributes\\": {
\\"class\\": \\"rr-block\\",
\\"rr_width\\": \\"1904px\\",
\\"rr_height\\": \\"21px\\"
},
\\"childNodes\\": [],
\\"id\\": 59
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 60
},
{
\\"type\\": 2,
\\"tagName\\": \\"br\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 61
},
{
\\"type\\": 2,
\\"tagName\\": \\"br\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 62
},
{
\\"type\\": 2,
\\"tagName\\": \\"br\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 63
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 64
},
{
\\"type\\": 2,
\\"tagName\\": \\"button\\",
\\"attributes\\": {
\\"onclick\\": \\"mutate2()\\"
},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"MUTATE\\",
\\"id\\": 66
}
],
\\"id\\": 65
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 67
}
],
\\"id\\": 47
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n\\\\n \\",
\\"id\\": 68
},
{
\\"type\\": 2,
\\"tagName\\": \\"script\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
\\"id\\": 70
}
],
\\"id\\": 69
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n\\",
\\"id\\": 71
}
],
\\"id\\": 9
}
],
\\"id\\": 2
}
],
\\"compatMode\\": \\"BackCompat\\",
\\"id\\": 1
},
\\"initialOffset\\": {
\\"left\\": 0,
\\"top\\": 0
}
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 2,
\\"type\\": 1,
\\"id\\": 39
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 2,
\\"type\\": 5,
\\"id\\": 39
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 2,
\\"type\\": 0,
\\"id\\": 39
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 2,
\\"type\\": 2,
\\"id\\": 39
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 0,
\\"texts\\": [],
\\"attributes\\": [
{
\\"id\\": 33,
\\"attributes\\": {
\\"class\\": \\"notB\\"
}
}
],
\\"removes\\": [],
\\"adds\\": [
{
\\"parentId\\": 23,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
\\"tagName\\": \\"div\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 72
}
},
{
\\"parentId\\": 72,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
\\"tagName\\": \\"div\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 73
}
},
{
\\"parentId\\": 73,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
\\"tagName\\": \\"button\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 74
}
},
{
\\"parentId\\": 74,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 3,
\\"textContent\\": \\"I1I2 VISIBLE\\",
\\"id\\": 75
}
},
{
\\"parentId\\": 72,
\\"nextId\\": 73,
\\"node\\": {
\\"type\\": 2,
\\"tagName\\": \\"div\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 76
}
},
{
\\"parentId\\": 76,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
\\"tagName\\": \\"button\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 77
}
},
{
\\"parentId\\": 77,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 3,
\\"textContent\\": \\"I1I1 VISIBLE\\",
\\"id\\": 78
}
}
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 2,
\\"type\\": 1,
\\"id\\": 65
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 2,
\\"type\\": 6,
\\"id\\": 39
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 2,
\\"type\\": 5,
\\"id\\": 65
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 2,
\\"type\\": 0,
\\"id\\": 65
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 2,
\\"type\\": 2,
\\"id\\": 65
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 0,
\\"texts\\": [],
\\"attributes\\": [
{
\\"id\\": 59,
\\"attributes\\": {
\\"class\\": \\"notB\\"
}
}
],
\\"removes\\": [],
\\"adds\\": [
{
\\"parentId\\": 49,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
\\"tagName\\": \\"div\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 79
}
},
{
\\"parentId\\": 79,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
\\"tagName\\": \\"div\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 80
}
},
{
\\"parentId\\": 80,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
\\"tagName\\": \\"button\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 81
}
},
{
\\"parentId\\": 81,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 3,
\\"textContent\\": \\"I1I2 VISIBLE\\",
\\"id\\": 82
}
},
{
\\"parentId\\": 79,
\\"nextId\\": 80,
\\"node\\": {
\\"type\\": 2,
\\"tagName\\": \\"div\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 83
}
},
{
\\"parentId\\": 83,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
\\"tagName\\": \\"button\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 84
}
},
{
\\"parentId\\": 84,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 3,
\\"textContent\\": \\"I1I1 VISIBLE\\",
\\"id\\": 85
}
}
]
}
}
]"
`;
exports[`record integration tests should mask texts 1`] = ` exports[`record integration tests should mask texts 1`] = `
"[ "[
{ {

88
packages/rrweb/test/html/blocked-unblocked.html Normal file
View File

@@ -0,0 +1,88 @@
<head>
<title>Uber Application for Codegen Testing</title>
</head>
<body>
<script>
function mutate1() {
const bClassDiv = document.getElementById("b-class");
bClassDiv.className = "notB";
const removeBlockedButton = document.getElementById("remove");
removeBlockedButton.remove();
const visibleCollection = document.getElementsByClassName("visible");
const i1Div = document.createElement("div");
const i1i1Div = document.createElement("div");
const i1i2Div = document.createElement("div");
const i1i1Button = document.createElement("button");
i1i1Button.innerHTML = "I1I1 VISIBLE";
i1i1Div.appendChild(i1i1Button);
const i1i2Button = document.createElement("button");
i1i2Button.innerHTML = "I1I2 VISIBLE";
i1i2Div.appendChild(i1i2Button);
i1Div.appendChild(i1i1Div);
i1Div.appendChild(i1i2Div);
visibleCollection[0].appendChild(i1Div);
}
function mutate2() {
const bClassDiv = document.getElementById("b-class-2");
bClassDiv.className = "notB";
const removeBlockedButton = document.getElementById("remove2");
const innerButton = document.createElement("button");
innerButton.innerHTML = "INNER BLOCKED";
removeBlockedButton.appendChild(innerButton)
removeBlockedButton.remove();
const visibleCollection = document.getElementsByClassName("visible2");
const i1Div = document.createElement("div");
const i1i1Div = document.createElement("div");
const i1i2Div = document.createElement("div");
const i1i1Button = document.createElement("button");
i1i1Button.innerHTML = "I1I1 VISIBLE";
i1i1Div.appendChild(i1i1Button);
const i1i2Button = document.createElement("button");
i1i2Button.innerHTML = "I1I2 VISIBLE";
i1i2Div.appendChild(i1i2Button);
i1Div.appendChild(i1i1Div);
i1Div.appendChild(i1i2Div);
visibleCollection[0].appendChild(i1Div);
}
</script>
<br/>
<h1>
Verify that block class bugs are fixed
</h1>
<br/>
<div class="first">
<div class="visible">
<button>VISIBLE</button>
</div>
<br/><br/><br/>
<div class="rr-block" id="b-class">
<button id="remove">BLOCKED</button>
</div>
<br/><br/><br/>
<button onclick="mutate1()">MUTATE</button>
</div>
<br/><br/><br/>
<div class="second">
<div class="visible2">
<button>VISIBLE</button>
</div>
<br/><br/><br/>
<div class="rr-block" id="b-class-2">
<button id="remove2">BLOCKED</button>
</div>
<br/><br/><br/>
<button onclick="mutate2()">MUTATE</button>
</div>
</body>

15
packages/rrweb/test/integration.test.ts
View File

@@ -326,6 +326,21 @@ describe('record integration tests', function (this: ISuite) {
assertSnapshot(snapshots); assertSnapshot(snapshots);
}); });
it('mutations should work when blocked class is unblocked', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto('about: blank');
await page.setContent(getHtml.call(this, 'blocked-unblocked.html'));
const elements1 = await page.$x('/html/body/div[1]/button');
await elements1[0].click();
const elements2 = await page.$x('/html/body/div[2]/button');
await elements2[0].click();
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots);
});
it('should record DOM node movement 1', async () => { it('should record DOM node movement 1', async () => {
const page: puppeteer.Page = await browser.newPage(); const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank'); await page.goto('about:blank');