Skip to content

Fix missed adopted style sheets of shadow doms in checkout full snapshot #1086

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jan 10, 2023
Merged

Fix missed adopted style sheets of shadow doms in checkout full snapshot #1086

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6bc30f8
fix: adoptedStyleSheets in shadow doms are missed when a full snapsho…
YunFeng0817 Jan 9, 2023
aecb7cf
fix: avoid removing monkey patch of all existed shadow doms when take…
YunFeng0817 Jan 9, 2023
c4dc237
Apply formatting changes
Jan 9, 2023
0074c10
Update packages/rrweb/test/record.test.ts
YunFeng0817 Jan 9, 2023
adbec5b
fix typo
YunFeng0817 Jan 9, 2023
81dc458
update outdated snapshot
YunFeng0817 Jan 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/rrweb/src/record/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,6 +335,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();

mutationBuffers.forEach((buf) => buf.lock()); // don't allow any mirror modifications during snapshotting
const node = snapshot(document, {
Expand Down
6 changes: 5 additions & 1 deletion packages/rrweb/src/record/shadow-dom-manager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,8 +129,12 @@ export class ShadowDomManager {
}
}

public clearCache() {
this.shadowDoms = new WeakSet();
}

public reset() {
this.restorePatches.forEach((restorePatch) => restorePatch());
this.shadowDoms = new WeakSet();
this.clearCache();
}
}
205 changes: 205 additions & 0 deletions packages/rrweb/test/__snapshots__/record.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1059,6 +1059,211 @@ exports[`record captures adopted stylesheets in shadow doms and iframe 1`] = `
]"
`;

exports[`record captures adopted stylesheets of shadow doms in checkout full snapshot 1`] = `
"[
{
\\"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\\": \\"div\\",
\\"attributes\\": {
\\"id\\": \\"shadow-host-1\\"
},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"entry\\",
\\"id\\": 8
}
],
\\"id\\": 7,
\\"isShadowHost\\": true
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 9
}
],
\\"id\\": 5
}
],
\\"id\\": 3
}
],
\\"id\\": 1
},
\\"initialOffset\\": {
\\"left\\": 0,
\\"top\\": 0
}
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 15,
\\"id\\": 7,
\\"styleIds\\": [
1
],
\\"styles\\": [
{
\\"styleId\\": 1,
\\"rules\\": [
{
\\"rule\\": \\"h1 { color: blue; }\\",
\\"index\\": 0
}
]
}
]
}
},
{
\\"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\\": \\"div\\",
\\"attributes\\": {
\\"id\\": \\"shadow-host-1\\"
},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"entry\\",
\\"id\\": 8
}
],
\\"id\\": 7,
\\"isShadowHost\\": true
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 9
}
],
\\"id\\": 5
}
],
\\"id\\": 3
}
],
\\"id\\": 1
},
\\"initialOffset\\": {
\\"left\\": 0,
\\"top\\": 0
}
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 15,
\\"id\\": 7,
\\"styleIds\\": [
1
],
\\"styles\\": [
{
\\"styleId\\": 1,
\\"rules\\": [
{
\\"rule\\": \\"h1 { color: blue; }\\",
\\"index\\": 0
}
]
}
]
}
}
]"
`;

exports[`record captures inserted style text nodes correctly 1`] = `
"[
{
Expand Down
48 changes: 40 additions & 8 deletions packages/rrweb/test/record.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,12 @@ interface ISuite {

interface IWindow extends Window {
rrweb: {
record: (
record: ((
options: recordOptions<eventWithTime>,
) => listenerHandler | undefined;
) => listenerHandler | undefined) & {
takeFullSnapshot: (isCheckout?: boolean | undefined) => void;
};

addCustomEvent<T>(tag: string, payload: T): void;
};
emit: (e: eventWithTime) => undefined;
Expand Down Expand Up @@ -491,9 +494,9 @@ describe('record', function (this: ISuite) {
iframe!.contentDocument!.adoptedStyleSheets = [sheet2];
iframe!.contentDocument!.body.innerHTML = '<h1>h1 in iframe</h1>';

const { record } = ((window as unknown) as IWindow).rrweb;
record({
emit: ((window as unknown) as IWindow).emit,
const { rrweb, emit } = (window as unknown) as IWindow;
rrweb.record({
emit,
});

setTimeout(() => {
Expand Down Expand Up @@ -565,9 +568,9 @@ describe('record', function (this: ISuite) {
sheet2.replaceSync!('div {font-size: large;}');
shadowHost.shadowRoot!.adoptedStyleSheets = [sheet2];

const { record } = ((window as unknown) as IWindow).rrweb;
record({
emit: ((window as unknown) as IWindow).emit,
const { rrweb, emit } = (window as unknown) as IWindow;
rrweb.record({
emit,
});

setTimeout(() => {
Expand All @@ -586,6 +589,35 @@ describe('record', function (this: ISuite) {
assertSnapshot(ctx.events);
});

it('captures adopted stylesheets of shadow doms in checkout full snapshot', async () => {
await ctx.page.evaluate(() => {
return new Promise((resolve) => {
document.body.innerHTML = `
<div id="shadow-host-1">entry</div>
`;

let shadowHost = document.querySelector('div')!;
shadowHost!.attachShadow({ mode: 'open' });
const sheet = new CSSStyleSheet();
sheet.replaceSync!('h1 {color: blue;}');
shadowHost.shadowRoot!.adoptedStyleSheets = [sheet];

const { rrweb, emit } = (window as unknown) as IWindow;
rrweb.record({
emit,
});

setTimeout(() => {
// When a full snapshot is checked out manually, all adoptedStylesheets should also be captured.
rrweb.record.takeFullSnapshot(true);
resolve(undefined);
}, 10);
});
});
await waitForRAF(ctx.page);
assertSnapshot(ctx.events);
});

it('captures stylesheets in iframes with `blob:` url', async () => {
await ctx.page.evaluate(() => {
const iframe = document.createElement('iframe');
Expand Down