diff --git a/package.json b/package.json
index 7f51a039..e675d3d3 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,6 @@
"dependencies": {
"delegated-events": "git+https://git@github.com/rrweb-io/delegated-events.git",
"mitt": "^1.1.3",
- "rrweb-snapshot": "^0.6.4"
+ "rrweb-snapshot": "^0.6.6"
}
}
diff --git a/scripts/repl.ts b/scripts/repl.ts
index 583b2fb4..2691ba5a 100644
--- a/scripts/repl.ts
+++ b/scripts/repl.ts
@@ -14,6 +14,13 @@ function getCode(): string {
return fs.readFileSync(bundlePath, 'utf8');
}
+function safeStringify(obj: Object): string {
+ return JSON.stringify(obj)
+ .replace(/&/g, '&')
+ .replace(//g, '>');
+}
+
(async () => {
const code = getCode();
@@ -110,7 +117,7 @@ function getCode(): string {
path: path.resolve(__dirname, '../dist/rrweb.min.css'),
});
await page.evaluate(`${code}
- const events = ${JSON.stringify(events)};
+ const events = ${safeStringify(events)};
const replayer = new rrweb.Replayer(events);
replayer.play();
`);
@@ -139,7 +146,7 @@ function getCode(): string {
diff --git a/src/replay/index.ts b/src/replay/index.ts
index 77c7d69b..ed5d695d 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -27,6 +27,7 @@ const mitt = (mittProxy as any).default || mittProxy;
const defaultConfig: playerConfig = {
speed: 1,
root: document.body,
+ loadTimeout: 10 * 1000,
};
export class Replayer {
@@ -207,6 +208,7 @@ export class Replayer {
event: fullSnapshotEvent & { timestamp: number },
) {
mirror.map = rebuild(event.data.node, this.iframe.contentDocument!)[1];
+ this.waitForStylesheetLoad();
// avoid form submit to refresh the iframe
off('submit', 'form', this.preventDefault, {
document: this.iframe.contentDocument!,
@@ -223,6 +225,43 @@ export class Replayer {
});
}
+ /**
+ * pause when loading style sheet, resume when loaded all timeout exceed
+ */
+ private waitForStylesheetLoad() {
+ const { head } = this.iframe.contentDocument!;
+ if (head) {
+ const unloadSheets: Set = new Set();
+ let timer: number;
+ head
+ .querySelectorAll('link[rel="stylesheet"]')
+ .forEach((css: HTMLLinkElement) => {
+ if (!css.sheet) {
+ if (unloadSheets.size === 0) {
+ this.pause();
+ this.emitter.emit('wait-stylesheet');
+ timer = window.setTimeout(() => {
+ this.resume();
+ // mark timer was called
+ timer = -1;
+ }, this.config.loadTimeout);
+ }
+ unloadSheets.add(css);
+ css.addEventListener('load', () => {
+ unloadSheets.delete(css);
+ if (unloadSheets.size === 0 && timer !== -1) {
+ this.resume();
+ this.emitter.emit('stylesheet-loaded');
+ if (timer) {
+ window.clearTimeout(timer);
+ }
+ }
+ });
+ }
+ });
+ }
+ }
+
private preventDefault(evt: Event) {
evt.preventDefault();
}
diff --git a/src/types.ts b/src/types.ts
index 70337891..ea28e2fe 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -226,6 +226,7 @@ export type hookResetter = () => void;
export type playerConfig = {
speed: number;
root: Element;
+ loadTimeout: number;
};
export type playerMetaData = {