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

fix: can't record SVG element inside iframe properly (#843)

Browse Source 
el instanceof SVGElement is false if the svg element is inside iframe so that the isSVG property is missing in the recorded data
This commit is contained in:
Yun Feng
2022-02-24 12:02:55 +11:00
committed by GitHub
parent 5ae208b174
commit e9531d420a
4 changed files with 113 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/rrweb-snapshot/src/snapshot.ts
View File

@@ -219,7 +219,7 @@ export function absoluteToDoc(doc: Document, attributeValue: string): string {
} }
function isSVGElement(el: Element): boolean { function isSVGElement(el: Element): boolean {
return el.tagName === 'svg' || el instanceof SVGElement; return Boolean(el.tagName === 'svg' || (el as SVGElement).ownerSVGElement);
} }
function getHref() { function getHref() {

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

@@ -4874,9 +4874,58 @@ exports[`record integration tests should nest record iframe 1`] = `
}, },
{ {
\\"type\\": 3, \\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n\\\\n\\", \\"textContent\\": \\"\\\\n \\",
\\"rootId\\": 32, \\"rootId\\": 32,
\\"id\\": 50 \\"id\\": 50
},
{
\\"type\\": 2,
\\"tagName\\": \\"svg\\",
\\"attributes\\": {
\\"xmlns\\": \\"http://www.w3.org/2000/svg\\",
\\"xmlns:xlink\\": \\"http://www.w3.org/1999/xlink\\",
\\"width\\": \\"300\\",
\\"height\\": \\"300\\"
},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"rootId\\": 32,
\\"id\\": 52
},
{
\\"type\\": 2,
\\"tagName\\": \\"rect\\",
\\"attributes\\": {
\\"id\\": \\"el\\",
\\"width\\": \\"100\\",
\\"height\\": \\"50\\",
\\"x\\": \\"40\\",
\\"y\\": \\"20\\",
\\"fill\\": \\"red\\"
},
\\"childNodes\\": [],
\\"isSVG\\": true,
\\"rootId\\": 32,
\\"id\\": 53
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"rootId\\": 32,
\\"id\\": 54
}
],
\\"isSVG\\": true,
\\"rootId\\": 32,
\\"id\\": 51
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n\\\\n\\",
\\"rootId\\": 32,
\\"id\\": 55
} }
], ],
\\"rootId\\": 32, \\"rootId\\": 32,
@@ -4918,24 +4967,24 @@ exports[`record integration tests should nest record iframe 1`] = `
\\"tagName\\": \\"head\\", \\"tagName\\": \\"head\\",
\\"attributes\\": {}, \\"attributes\\": {},
\\"childNodes\\": [], \\"childNodes\\": [],
\\"rootId\\": 51, \\"rootId\\": 56,
\\"id\\": 53 \\"id\\": 58
}, },
{ {
\\"type\\": 2, \\"type\\": 2,
\\"tagName\\": \\"body\\", \\"tagName\\": \\"body\\",
\\"attributes\\": {}, \\"attributes\\": {},
\\"childNodes\\": [], \\"childNodes\\": [],
\\"rootId\\": 51, \\"rootId\\": 56,
\\"id\\": 54 \\"id\\": 59
} }
], ],
\\"rootId\\": 51, \\"rootId\\": 56,
\\"id\\": 52 \\"id\\": 57
} }
], ],
\\"compatMode\\": \\"BackCompat\\", \\"compatMode\\": \\"BackCompat\\",
\\"id\\": 51 \\"id\\": 56
} }
} }
], ],
@@ -4961,8 +5010,8 @@ exports[`record integration tests should nest record iframe 1`] = `
\\"name\\": \\"html\\", \\"name\\": \\"html\\",
\\"publicId\\": \\"\\", \\"publicId\\": \\"\\",
\\"systemId\\": \\"\\", \\"systemId\\": \\"\\",
\\"rootId\\": 55, \\"rootId\\": 60,
\\"id\\": 56 \\"id\\": 61
}, },
{ {
\\"type\\": 2, \\"type\\": 2,
@@ -4979,8 +5028,8 @@ exports[`record integration tests should nest record iframe 1`] = `
{ {
\\"type\\": 3, \\"type\\": 3,
\\"textContent\\": \\"\\\\n \\", \\"textContent\\": \\"\\\\n \\",
\\"rootId\\": 55, \\"rootId\\": 60,
\\"id\\": 59 \\"id\\": 64
}, },
{ {
\\"type\\": 2, \\"type\\": 2,
@@ -4989,14 +5038,14 @@ exports[`record integration tests should nest record iframe 1`] = `
\\"charset\\": \\"UTF-8\\" \\"charset\\": \\"UTF-8\\"
}, },
\\"childNodes\\": [], \\"childNodes\\": [],
\\"rootId\\": 55, \\"rootId\\": 60,
\\"id\\": 60 \\"id\\": 65
}, },
{ {
\\"type\\": 3, \\"type\\": 3,
\\"textContent\\": \\"\\\\n \\", \\"textContent\\": \\"\\\\n \\",
\\"rootId\\": 55, \\"rootId\\": 60,
\\"id\\": 61 \\"id\\": 66
}, },
{ {
\\"type\\": 2, \\"type\\": 2,
@@ -5006,14 +5055,14 @@ exports[`record integration tests should nest record iframe 1`] = `
\\"content\\": \\"width=device-width, initial-scale=1.0\\" \\"content\\": \\"width=device-width, initial-scale=1.0\\"
}, },
\\"childNodes\\": [], \\"childNodes\\": [],
\\"rootId\\": 55, \\"rootId\\": 60,
\\"id\\": 62 \\"id\\": 67
}, },
{ {
\\"type\\": 3, \\"type\\": 3,
\\"textContent\\": \\"\\\\n \\", \\"textContent\\": \\"\\\\n \\",
\\"rootId\\": 55, \\"rootId\\": 60,
\\"id\\": 63 \\"id\\": 68
}, },
{ {
\\"type\\": 2, \\"type\\": 2,
@@ -5023,28 +5072,28 @@ exports[`record integration tests should nest record iframe 1`] = `
{ {
\\"type\\": 3, \\"type\\": 3,
\\"textContent\\": \\"Frame 2\\", \\"textContent\\": \\"Frame 2\\",
\\"rootId\\": 55, \\"rootId\\": 60,
\\"id\\": 65 \\"id\\": 70
} }
], ],
\\"rootId\\": 55, \\"rootId\\": 60,
\\"id\\": 64 \\"id\\": 69
}, },
{ {
\\"type\\": 3, \\"type\\": 3,
\\"textContent\\": \\"\\\\n \\", \\"textContent\\": \\"\\\\n \\",
\\"rootId\\": 55, \\"rootId\\": 60,
\\"id\\": 66 \\"id\\": 71
} }
], ],
\\"rootId\\": 55, \\"rootId\\": 60,
\\"id\\": 58 \\"id\\": 63
}, },
{ {
\\"type\\": 3, \\"type\\": 3,
\\"textContent\\": \\"\\\\n \\", \\"textContent\\": \\"\\\\n \\",
\\"rootId\\": 55, \\"rootId\\": 60,
\\"id\\": 67 \\"id\\": 72
}, },
{ {
\\"type\\": 2, \\"type\\": 2,
@@ -5054,8 +5103,8 @@ exports[`record integration tests should nest record iframe 1`] = `
{ {
\\"type\\": 3, \\"type\\": 3,
\\"textContent\\": \\"\\\\n frame 2\\\\n \\\\n \\", \\"textContent\\": \\"\\\\n frame 2\\\\n \\\\n \\",
\\"rootId\\": 55, \\"rootId\\": 60,
\\"id\\": 69 \\"id\\": 74
}, },
{ {
\\"type\\": 2, \\"type\\": 2,
@@ -5065,29 +5114,29 @@ exports[`record integration tests should nest record iframe 1`] = `
{ {
\\"type\\": 3, \\"type\\": 3,
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
\\"rootId\\": 55, \\"rootId\\": 60,
\\"id\\": 71 \\"id\\": 76
} }
], ],
\\"rootId\\": 55, \\"rootId\\": 60,
\\"id\\": 70 \\"id\\": 75
}, },
{ {
\\"type\\": 3, \\"type\\": 3,
\\"textContent\\": \\"\\\\n\\\\n\\", \\"textContent\\": \\"\\\\n\\\\n\\",
\\"rootId\\": 55, \\"rootId\\": 60,
\\"id\\": 72 \\"id\\": 77
} }
], ],
\\"rootId\\": 55, \\"rootId\\": 60,
\\"id\\": 68 \\"id\\": 73
} }
], ],
\\"rootId\\": 55, \\"rootId\\": 60,
\\"id\\": 57 \\"id\\": 62
} }
], ],
\\"id\\": 55 \\"id\\": 60
} }
} }
], ],
@@ -5106,7 +5155,7 @@ exports[`record integration tests should nest record iframe 1`] = `
\\"removes\\": [], \\"removes\\": [],
\\"adds\\": [ \\"adds\\": [
{ {
\\"parentId\\": 68, \\"parentId\\": 73,
\\"nextId\\": null, \\"nextId\\": null,
\\"node\\": { \\"node\\": {
\\"type\\": 2, \\"type\\": 2,
@@ -5115,8 +5164,8 @@ exports[`record integration tests should nest record iframe 1`] = `
\\"id\\": \\"five\\" \\"id\\": \\"five\\"
}, },
\\"childNodes\\": [], \\"childNodes\\": [],
\\"rootId\\": 55, \\"rootId\\": 60,
\\"id\\": 73 \\"id\\": 78
} }
} }
] ]
@@ -5128,7 +5177,7 @@ exports[`record integration tests should nest record iframe 1`] = `
\\"source\\": 0, \\"source\\": 0,
\\"adds\\": [ \\"adds\\": [
{ {
\\"parentId\\": 73, \\"parentId\\": 78,
\\"nextId\\": null, \\"nextId\\": null,
\\"node\\": { \\"node\\": {
\\"type\\": 0, \\"type\\": 0,
@@ -5143,24 +5192,24 @@ exports[`record integration tests should nest record iframe 1`] = `
\\"tagName\\": \\"head\\", \\"tagName\\": \\"head\\",
\\"attributes\\": {}, \\"attributes\\": {},
\\"childNodes\\": [], \\"childNodes\\": [],
\\"rootId\\": 74, \\"rootId\\": 79,
\\"id\\": 76 \\"id\\": 81
}, },
{ {
\\"type\\": 2, \\"type\\": 2,
\\"tagName\\": \\"body\\", \\"tagName\\": \\"body\\",
\\"attributes\\": {}, \\"attributes\\": {},
\\"childNodes\\": [], \\"childNodes\\": [],
\\"rootId\\": 74, \\"rootId\\": 79,
\\"id\\": 77 \\"id\\": 82
} }
], ],
\\"rootId\\": 74, \\"rootId\\": 79,
\\"id\\": 75 \\"id\\": 80
} }
], ],
\\"compatMode\\": \\"BackCompat\\", \\"compatMode\\": \\"BackCompat\\",
\\"id\\": 74 \\"id\\": 79
} }
} }
], ],

8
packages/rrweb/test/html/frame1.html
View File

@@ -9,5 +9,13 @@
frame 1 frame 1
<iframe id="three" frameborder="0"></iframe> <iframe id="three" frameborder="0"></iframe>
<iframe id="four" src="./frame2.html" frameborder="0"></iframe> <iframe id="four" src="./frame2.html" frameborder="0"></iframe>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300"
height="300"
>
<rect id="el" width="100" height="50" x="40" y="20" fill="red" />
</svg>
</body> </body>
</html> </html>

2
packages/rrweb/typings/record/observers/canvas/canvas-manager.d.ts vendored
View File

@@ -8,7 +8,7 @@ export declare class CanvasManager {
private rafStamps; private rafStamps;
private mirror; private mirror;
private mutationCb; private mutationCb;
private resetObservers; private resetObservers?;
private frozen; private frozen;
private locked; private locked;
reset(): void; reset(): void;