Skip to content

Commit 0627d4d

Browse files
YunFeng0817YunFeng0817
authored
add option to record on DOMContentLoaded event (#1109)
1 parent 07d22e7 commit 0627d4d

File tree

7 files changed

+117
-11
lines changed

7 files changed

+117
-11
lines changed

‎guide.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,7 @@ The parameter of `rrweb.record` accepts the following options.
158158
| sampling | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
159159
| recordCanvas | false | Whether to record the canvas element. Available options:<br/>`false`, <br/>`true` |
160160
| recordCrossOriginIframes | false | Whether to record cross origin iframes. rrweb has to be injected in each child iframe for this to work. Available options:<br/>`false`, <br/>`true` |
161+
| recordAfter | 'load' | If the document is not ready, then the recorder will start recording after the specified event is fired. Available options: `DOMContentLoaded`, `load` |
161162
| inlineImages | false | whether to record the image content |
162163
| collectFonts | false | whether to collect fonts in the website |
163164
| userTriggeredOnInput | false | whether to add `userTriggered` on input events that indicates if this event was triggered directly by the user or not. [What is `userTriggered`?](https://github.com/rrweb-io/rrweb/pull/495) |

‎guide.zh_CN.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,7 @@ setInterval(save, 10 * 1000);
154154
| dataURLOptions | {} | Canvas 图像快照的格式和质量,这个参数将传递给 OffscreenCanvas.convertToBlob()，使用这个参数能有效减小录制数据的大小 |
155155
| recordCanvas | false | 是否记录 canvas 内容, 可用选项：`false`, `true` |
156156
| recordCrossOriginIframes | false | 是否记录 cross origin iframes。 必须在每个子 iframe 中注入 rrweb 才能使其工作。 可用选项：`false`, `true` |
157+
| recordAfter | 'load' | 如果 document 还没有加载完成，recorder 将会在指定的事件触发后开始录制。可用选项： `DOMContentLoaded`, `load` |
157158
| inlineImages | false | 是否将图片内容记内联录制 |
158159
| collectFonts | false | 是否记录页面中的字体文件 |
159160
| userTriggeredOnInput | false | [什么是 `userTriggered`](https://github.com/rrweb-io/rrweb/pull/495) |

‎packages/rrweb/src/record/index.ts‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,9 @@ function record<T = eventWithTime>(
7676
mousemoveWait,
7777
recordCanvas = false,
7878
recordCrossOriginIframes = false,
79+
recordAfter = options.recordAfter === 'DOMContentLoaded'
80+
? options.recordAfter
81+
: 'load',
7982
userTriggeredOnInput = false,
8083
collectFonts = false,
8184
inlineImages = false,
@@ -408,16 +411,6 @@ function record<T = eventWithTime>(
408411

409412
try {
410413
const handlers: listenerHandler[] = [];
411-
handlers.push(
412-
on('DOMContentLoaded', () => {
413-
wrappedEmit(
414-
wrapEvent({
415-
type: EventType.DomContentLoaded,
416-
data: {},
417-
}),
418-
);
419-
}),
420-
);
421414

422415
const observe = (doc: Document) => {
423416
return initObservers(
@@ -583,6 +576,17 @@ function record<T = eventWithTime>(
583576
) {
584577
init();
585578
} else {
579+
handlers.push(
580+
on('DOMContentLoaded', () => {
581+
wrappedEmit(
582+
wrapEvent({
583+
type: EventType.DomContentLoaded,
584+
data: {},
585+
}),
586+
);
587+
if (recordAfter === 'DOMContentLoaded') init();
588+
}),
589+
);
586590
handlers.push(
587591
on(
588592
'load',
@@ -593,7 +597,7 @@ function record<T = eventWithTime>(
593597
data: {},
594598
}),
595599
);
596-
init();
600+
if (recordAfter === 'load') init();
597601
},
598602
window,
599603
),

‎packages/rrweb/src/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ export type recordOptions<T> = {
6161
dataURLOptions?: DataURLOptions;
6262
recordCanvas?: boolean;
6363
recordCrossOriginIframes?: boolean;
64+
recordAfter?: 'DOMContentLoaded' | 'load';
6465
userTriggeredOnInput?: boolean;
6566
collectFonts?: boolean;
6667
inlineImages?: boolean;

‎packages/rrweb/test/__snapshots__/integration.test.ts.snap‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8408,6 +8408,89 @@ exports[`record integration tests should record DOM node movement 2 1`] = `
84088408
]"
84098409
`;
84108410

8411+
exports[`record integration tests should record after DOMContentLoaded event 1`] = `
8412+
"[
8413+
{
8414+
\\"type\\": 0,
8415+
\\"data\\": {}
8416+
},
8417+
{
8418+
\\"type\\": 4,
8419+
\\"data\\": {
8420+
\\"href\\": \\"about:blank\\",
8421+
\\"width\\": 1920,
8422+
\\"height\\": 1080
8423+
}
8424+
},
8425+
{
8426+
\\"type\\": 2,
8427+
\\"data\\": {
8428+
\\"node\\": {
8429+
\\"type\\": 0,
8430+
\\"childNodes\\": [
8431+
{
8432+
\\"type\\": 2,
8433+
\\"tagName\\": \\"html\\",
8434+
\\"attributes\\": {},
8435+
\\"childNodes\\": [
8436+
{
8437+
\\"type\\": 2,
8438+
\\"tagName\\": \\"head\\",
8439+
\\"attributes\\": {},
8440+
\\"childNodes\\": [],
8441+
\\"id\\": 3
8442+
},
8443+
{
8444+
\\"type\\": 2,
8445+
\\"tagName\\": \\"body\\",
8446+
\\"attributes\\": {},
8447+
\\"childNodes\\": [
8448+
{
8449+
\\"type\\": 3,
8450+
\\"textContent\\": \\"\\\\n \\",
8451+
\\"id\\": 5
8452+
},
8453+
{
8454+
\\"type\\": 2,
8455+
\\"tagName\\": \\"script\\",
8456+
\\"attributes\\": {},
8457+
\\"childNodes\\": [
8458+
{
8459+
\\"type\\": 3,
8460+
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
8461+
\\"id\\": 7
8462+
}
8463+
],
8464+
\\"id\\": 6
8465+
},
8466+
{
8467+
\\"type\\": 3,
8468+
\\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\",
8469+
\\"id\\": 8
8470+
}
8471+
],
8472+
\\"id\\": 4
8473+
}
8474+
],
8475+
\\"id\\": 2
8476+
}
8477+
],
8478+
\\"compatMode\\": \\"BackCompat\\",
8479+
\\"id\\": 1
8480+
},
8481+
\\"initialOffset\\": {
8482+
\\"left\\": 0,
8483+
\\"top\\": 0
8484+
}
8485+
}
8486+
},
8487+
{
8488+
\\"type\\": 1,
8489+
\\"data\\": {}
8490+
}
8491+
]"
8492+
`;
8493+
84118494
exports[`record integration tests should record canvas mutations 1`] = `
84128495
"[
84138496
{

‎packages/rrweb/test/integration.test.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -984,4 +984,19 @@ describe('record integration tests', function (this: ISuite) {
984984
)) as eventWithTime[];
985985
assertSnapshot(snapshots);
986986
});
987+
988+
it('should record after DOMContentLoaded event', async () => {
989+
const page: puppeteer.Page = await browser.newPage();
990+
await page.goto('about:blank');
991+
await page.setContent(
992+
getHtml.call(this, 'blank.html', {
993+
recordAfter: 'DOMContentLoaded',
994+
}),
995+
);
996+
997+
const snapshots = (await page.evaluate(
998+
'window.snapshots',
999+
)) as eventWithTime[];
1000+
assertSnapshot(snapshots);
1001+
});
9871002
});

‎packages/rrweb/test/utils.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -601,6 +601,7 @@ export function generateRecordSnippet(options: recordOptions<eventWithTime>) {
601601
userTriggeredOnInput: ${options.userTriggeredOnInput},
602602
maskTextFn: ${options.maskTextFn},
603603
recordCanvas: ${options.recordCanvas},
604+
recordAfter: '${options.recordAfter || 'load'}',
604605
inlineImages: ${options.inlineImages},
605606
plugins: ${options.plugins}
606607
});

0 commit comments

Comments
 (0)