Chore: Make inject script more robust on repl & stream (#1429)
* try/catch injection of recording script in rrweb repl and stream * Add empty changesets
This commit is contained in:
2
.changeset/light-fireants-exercise.md
Normal file
2
.changeset/light-fireants-exercise.md
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
---
|
||||||
|
---
|
||||||
@@ -22,40 +22,44 @@ void (async () => {
|
|||||||
let events = [];
|
let events = [];
|
||||||
|
|
||||||
async function injectRecording(frame) {
|
async function injectRecording(frame) {
|
||||||
await frame.evaluate((rrwebCode) => {
|
try {
|
||||||
const win = window;
|
await frame.evaluate((rrwebCode) => {
|
||||||
if (win.__IS_RECORDING__) return;
|
const win = window;
|
||||||
win.__IS_RECORDING__ = true;
|
if (win.__IS_RECORDING__) return;
|
||||||
|
win.__IS_RECORDING__ = true;
|
||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
function loadScript(code) {
|
function loadScript(code) {
|
||||||
const s = document.createElement('script');
|
const s = document.createElement('script');
|
||||||
let r = false;
|
let r = false;
|
||||||
s.type = 'text/javascript';
|
s.type = 'text/javascript';
|
||||||
s.innerHTML = code;
|
s.innerHTML = code;
|
||||||
if (document.head) {
|
if (document.head) {
|
||||||
document.head.append(s);
|
|
||||||
} else {
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
document.head.append(s);
|
document.head.append(s);
|
||||||
});
|
} else {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
document.head.append(s);
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
loadScript(rrwebCode);
|
||||||
loadScript(rrwebCode);
|
|
||||||
|
|
||||||
win.events = [];
|
win.events = [];
|
||||||
rrweb.record({
|
rrweb.record({
|
||||||
emit: (event) => {
|
emit: (event) => {
|
||||||
win.events.push(event);
|
win.events.push(event);
|
||||||
win._replLog(event);
|
win._replLog(event);
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
recordCanvas: true,
|
recordCanvas: true,
|
||||||
recordCrossOriginIframes: true,
|
recordCrossOriginIframes: true,
|
||||||
collectFonts: true,
|
collectFonts: true,
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
}, code);
|
}, code);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('failed to inject recording script:', e);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
await start('https://react-redux.realworld.io');
|
await start('https://react-redux.realworld.io');
|
||||||
|
|||||||
@@ -24,55 +24,58 @@ const pluginCode = fs.readFileSync(
|
|||||||
);
|
);
|
||||||
|
|
||||||
async function injectRecording(frame) {
|
async function injectRecording(frame) {
|
||||||
await frame.evaluate(
|
try {
|
||||||
(rrwebCode, pluginCode) => {
|
await frame.evaluate(
|
||||||
const win = window;
|
(rrwebCode, pluginCode) => {
|
||||||
if (win.__IS_RECORDING__) return;
|
const win = window;
|
||||||
win.__IS_RECORDING__ = true;
|
if (win.__IS_RECORDING__) return;
|
||||||
|
win.__IS_RECORDING__ = true;
|
||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
function loadScript(code) {
|
function loadScript(code) {
|
||||||
const s = document.createElement('script');
|
const s = document.createElement('script');
|
||||||
s.type = 'text/javascript';
|
s.type = 'text/javascript';
|
||||||
s.innerHTML = code;
|
s.innerHTML = code;
|
||||||
if (document.head) {
|
if (document.head) {
|
||||||
document.head.append(s);
|
|
||||||
} else {
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
document.head.append(s);
|
document.head.append(s);
|
||||||
});
|
} else {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
document.head.append(s);
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
loadScript(rrwebCode);
|
||||||
loadScript(rrwebCode);
|
loadScript(pluginCode);
|
||||||
loadScript(pluginCode);
|
|
||||||
|
|
||||||
win.events = [];
|
win.events = [];
|
||||||
window.record = win.rrweb.record;
|
window.record = win.rrweb.record;
|
||||||
window.plugin = new rrwebCanvasWebRTCRecord.RRWebPluginCanvasWebRTCRecord(
|
window.plugin =
|
||||||
{
|
new rrwebCanvasWebRTCRecord.RRWebPluginCanvasWebRTCRecord({
|
||||||
signalSendCallback: (msg) => {
|
signalSendCallback: (msg) => {
|
||||||
// [record#callback] provides canvas id, stream, and webrtc sdpOffer signal & connect message
|
// [record#callback] provides canvas id, stream, and webrtc sdpOffer signal & connect message
|
||||||
_signal(msg);
|
_signal(msg);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
window.record({
|
||||||
|
emit: (event) => {
|
||||||
|
win.events.push(event);
|
||||||
|
win._captureEvent(event);
|
||||||
},
|
},
|
||||||
},
|
plugins: [window.plugin.initPlugin()],
|
||||||
);
|
recordCanvas: false,
|
||||||
|
recordCrossOriginIframes: true,
|
||||||
window.record({
|
collectFonts: true,
|
||||||
emit: (event) => {
|
inlineImages: true,
|
||||||
win.events.push(event);
|
});
|
||||||
win._captureEvent(event);
|
})();
|
||||||
},
|
},
|
||||||
plugins: [window.plugin.initPlugin()],
|
code,
|
||||||
recordCanvas: false,
|
pluginCode,
|
||||||
recordCrossOriginIframes: true,
|
);
|
||||||
collectFonts: true,
|
} catch (e) {
|
||||||
inlineImages: true,
|
console.error('failed to inject script, error:', e);
|
||||||
});
|
}
|
||||||
})();
|
|
||||||
},
|
|
||||||
code,
|
|
||||||
pluginCode,
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function startReplay(page, serverURL, recordedPage) {
|
async function startReplay(page, serverURL, recordedPage) {
|
||||||
|
|||||||
Reference in New Issue
Block a user