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

fix: Explicitly handle null attribute values (#1157)

Browse Source 
* fix: Explicitly handle removed attributes

The attribute `value` can be null when a mutation observer triggers due to a removed attribute. This is currently not reflected by types and code.

* Apply formatting changes

* fix

* add changeset
This commit is contained in:
Francesco Novy
2023-02-27 20:32:56 +01:00
committed by GitHub
parent e65465e808
commit 8e47ca1021
7 changed files with 256 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -563,7 +563,7 @@ export default class MutationBuffer {
this.doc,
target.tagName,
m.attributeName!,
value!,
value,
);
}
break;

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

@@ -3960,6 +3960,205 @@ exports[`record integration tests can use maskInputOptions to configure which ty
]"
`;
exports[`record integration tests handles null attribute values 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\\": 1,
\\"name\\": \\"html\\",
\\"publicId\\": \\"\\",
\\"systemId\\": \\"\\",
\\"id\\": 2
},
{
\\"type\\": 2,
\\"tagName\\": \\"html\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 4
},
{
\\"type\\": 2,
\\"tagName\\": \\"body\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 6
},
{
\\"type\\": 2,
\\"tagName\\": \\"p\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"mutation observer\\",
\\"id\\": 8
}
],
\\"id\\": 7
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 9
},
{
\\"type\\": 2,
\\"tagName\\": \\"ul\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 11
},
{
\\"type\\": 2,
\\"tagName\\": \\"li\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 12
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 13
}
],
\\"id\\": 10
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 14
},
{
\\"type\\": 2,
\\"tagName\\": \\"canvas\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 15
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n\\\\n \\",
\\"id\\": 16
},
{
\\"type\\": 2,
\\"tagName\\": \\"script\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
\\"id\\": 18
}
],
\\"id\\": 17
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n\\",
\\"id\\": 19
}
],
\\"id\\": 5
}
],
\\"id\\": 3
}
],
\\"id\\": 1
},
\\"initialOffset\\": {
\\"left\\": 0,
\\"top\\": 0
}
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 0,
\\"texts\\": [],
\\"attributes\\": [
{
\\"id\\": 20,
\\"attributes\\": {
\\"aria-label\\": \\"label\\",
\\"id\\": \\"test-li\\"
}
}
],
\\"removes\\": [],
\\"adds\\": [
{
\\"parentId\\": 10,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
\\"tagName\\": \\"li\\",
\\"attributes\\": {
\\"aria-label\\": \\"label\\",
\\"id\\": \\"test-li\\"
},
\\"childNodes\\": [],
\\"id\\": 20
}
}
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 0,
\\"texts\\": [],
\\"attributes\\": [
{
\\"id\\": 20,
\\"attributes\\": {
\\"aria-label\\": null
}
}
],
\\"removes\\": [],
\\"adds\\": []
}
}
]"
`;
exports[`record integration tests mutations should work when blocked class is unblocked 1`] = `
"[
{

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

@@ -141,6 +141,32 @@ describe('record integration tests', function (this: ISuite) {
assertSnapshot(snapshots);
});
it('handles null attribute values', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'mutation-observer.html', {}));
await page.evaluate(() => {
const li = document.createElement('li');
const ul = document.querySelector('ul') as HTMLUListElement;
ul.appendChild(li);
li.setAttribute('aria-label', 'label');
li.setAttribute('id', 'test-li');
});
await new Promise((resolve) => setTimeout(resolve, 100));
await page.evaluate(() => {
const li = document.querySelector('#test-li') as HTMLLIElement;
// This triggers the mutation observer with a `null` attribute value
li.removeAttribute('aria-label');
});
const snapshots = await page.evaluate('window.snapshots');
assertSnapshot(snapshots);
});
it('can record node mutations', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');