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:
Justin Halsall
2026-04-01 12:00:00 +08:00
committed by GitHub
parent fb2d921180
commit 169e10e94a
3 changed files with 83 additions and 74 deletions

View File

@@ -0,0 +1,2 @@
---
---

View File

@@ -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');

View File

@@ -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) {