diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts index 29cd3ffa..590e5d50 100644 --- a/packages/rrweb/src/record/mutation.ts +++ b/packages/rrweb/src/record/mutation.ts @@ -370,15 +370,31 @@ export default class MutationBuffer { } if (!node) { for (let index = addList.length - 1; index >= 0; index--) { - const _node = addList.get(index)!; + const _node = addList.get(index); // ensure _node is defined before attempting to find value if (_node) { const parentId = this.mirror.getId(_node.value.parentNode); const nextId = getNextId(_node.value); - if (parentId !== -1 && nextId !== -1) { + + if (nextId === -1) continue; + // nextId !== -1 && parentId !== -1 + else if (parentId !== -1) { node = _node; break; } + // nextId !== -1 && parentId === -1 This branch can happen if the node is the child of shadow root + else { + const nodeInShadowDom = _node.value; + // Get the host of the shadow dom and treat it as parent node. + const shadowHost: Element | null = nodeInShadowDom.getRootNode + ? (nodeInShadowDom.getRootNode() as ShadowRoot)?.host + : null; + const parentId = this.mirror.getId(shadowHost); + if (parentId !== -1) { + node = _node; + break; + } + } } } } diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap index b25764af..61516c91 100644 --- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap +++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap @@ -12053,6 +12053,18 @@ exports[`record integration tests should record shadow DOM 1`] = ` \\"id\\": 43, \\"isShadow\\": true } + }, + { + \\"parentId\\": 22, + \\"nextId\\": 43, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"span\\", + \\"attributes\\": {}, + \\"childNodes\\": [], + \\"id\\": 44, + \\"isShadow\\": true + } } ] } @@ -12073,7 +12085,7 @@ exports[`record integration tests should record shadow DOM 1`] = ` \\"tagName\\": \\"p\\", \\"attributes\\": {}, \\"childNodes\\": [], - \\"id\\": 44 + \\"id\\": 45 } } ] @@ -12104,12 +12116,12 @@ exports[`record integration tests should record shadow DOM 1`] = ` \\"removes\\": [], \\"adds\\": [ { - \\"parentId\\": 44, + \\"parentId\\": 45, \\"nextId\\": null, \\"node\\": { \\"type\\": 3, \\"textContent\\": \\"hi\\", - \\"id\\": 45 + \\"id\\": 46 } } ] @@ -12123,18 +12135,18 @@ exports[`record integration tests should record shadow DOM 1`] = ` \\"attributes\\": [], \\"removes\\": [ { - \\"parentId\\": 44, - \\"id\\": 45 + \\"parentId\\": 45, + \\"id\\": 46 } ], \\"adds\\": [ { - \\"parentId\\": 44, + \\"parentId\\": 45, \\"nextId\\": null, \\"node\\": { \\"type\\": 3, \\"textContent\\": \\"123\\", - \\"id\\": 46 + \\"id\\": 47 } } ] @@ -12149,24 +12161,24 @@ exports[`record integration tests should record shadow DOM 1`] = ` \\"removes\\": [], \\"adds\\": [ { - \\"parentId\\": 44, + \\"parentId\\": 45, \\"nextId\\": null, \\"node\\": { \\"type\\": 2, \\"tagName\\": \\"span\\", \\"attributes\\": {}, \\"childNodes\\": [], - \\"id\\": 47, + \\"id\\": 48, \\"isShadow\\": true } }, { - \\"parentId\\": 47, + \\"parentId\\": 48, \\"nextId\\": null, \\"node\\": { \\"type\\": 3, \\"textContent\\": \\"nested shadow dom\\", - \\"id\\": 48 + \\"id\\": 49 } } ] diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts index 0796736f..733e0318 100644 --- a/packages/rrweb/test/integration.test.ts +++ b/packages/rrweb/test/integration.test.ts @@ -561,6 +561,7 @@ describe('record integration tests', function (this: ISuite) { const el = document.querySelector('.my-element') as HTMLDivElement; const shadowRoot = el.shadowRoot as ShadowRoot; + shadowRoot.appendChild(document.createElement('span')); shadowRoot.appendChild(document.createElement('p')); sleep(1) .then(() => { diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts index 5fd249b5..f132a11c 100644 --- a/packages/rrweb/test/utils.ts +++ b/packages/rrweb/test/utils.ts @@ -81,7 +81,6 @@ export const startServer = (defaultPort: number = 3030) => resolve(s); }) .on('error', (e) => { - console.log('port in use, trying next one'); s.listen().on('listening', () => { resolve(s); }); @@ -152,14 +151,6 @@ function stringifySnapshots(snapshots: eventWithTime[]): string { coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript } } - - // strip blob:urls as they are different every time - console.log( - a.attributes.src, - 'src' in a.attributes && - a.attributes.src && - typeof a.attributes.src === 'string', - ); }); s.data.adds.forEach((add) => { if (add.node.type === NodeType.Element) {