rsgltzyd/testing-tool
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: 添加内置回放界面和错误修复

Browse Source
This commit is contained in:
雨霖铃
2026-03-16 23:40:56 +08:00
parent 9ff6b8985c
commit 789705c33b
16 changed files with 751 additions and 783 deletions
Download Patch File Download Diff File Expand all files Collapse all files
utils/recordUtils.tsx
+46 -27
View File
@@ -7,46 +7,65 @@ export const downloadHtmlInBackground = (events: unknown[]) => {
.replace(/`/g, '\\`')
.replace(/<\/script>/g, '<\\/script>');
// 使用固定版本的 rrweb-player，确保与项目使用的 rrweb 版本兼容
const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>RRWeb 回放</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb-player@1.0.0-alpha.4/dist/style.css" />
<style>
body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f0f2f5; }
#player { width: 100%; max-width: 1024px; }
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f0f2f5;
}
#player {
width: 100%;
max-width: 1024px;
}
</style>
</head>
<body>
<div id="player"></div>
<!-- 使用 UMD 版本，rrwebPlayer 会作为全局变量 -->
<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>
<!-- 使用与项目 rrweb 版本匹配的 rrweb-player -->
<script src="https://cdn.jsdelivr.net/npm/rrweb-player@1.0.0-alpha.4/dist/index.js"></script>
<script type="module">
import { getReplayConsolePlugin } from 'https://esm.sh/@rrweb/rrweb-plugin-console-replay?bundle';
<script>
try {
// 解析事件数据
const events = JSON.parse(\`${safeEventsString}\`);
console.log('Loaded events count:', events.length);
const events = JSON.parse(\`${safeEventsString}\`);
// 创建播放器
const player = new rrwebPlayer({
target: document.getElementById('player'),
props: {
events: events,
width: 1024,
height: 576,
autoPlay: true,
showController: true,
UNSAFE_replayCanvas: true
},
});
// rrwebPlayer 作为全局变量可用
new rrwebPlayer({
target: document.getElementById('player'),
props: {
events: events,
width: 1024,
height: 576,
autoPlay: true,
showController: true,
UNSAFE_replayCanvas: true,
plugins: [
getReplayConsolePlugin({
level: ['info', 'log', 'warn', 'error'],
}),
],
},
});
console.log('Player created successfully');
} catch (error) {
console.error('Replay error:', error);
document.body.innerHTML = \`
<div style="padding: 20px; text-align: center; color: #d32f2f;">
<h2>回放失败</h2>
<p>\${error.message}</p>
<p>请检查控制台（F12）获取详细错误信息。</p>
</div>
\`;
}
</script>
</body>
</html>`;
@@ -61,7 +80,7 @@ export const downloadHtmlInBackground = (events: unknown[]) => {
filename: `replay-${Date.now()}.html`,
saveAs: true,
})
.then((r) => console.log(r));
.then((r) => console.log('Download started:', r));
};
reader.readAsDataURL(blob);
};