Skip to content

Commit 0fc6afe

Browse files
committed
Add enhanced debug page with detailed error handling
1 parent 937aeec commit 0fc6afe

1 file changed

Lines changed: 130 additions & 0 deletions

File tree

news-recommend/debug2.html

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Web App 诊断 - 增强版</title>
7+
<script src="https://telegram.org/js/telegram-web-app.js"></script>
8+
<style>
9+
* { margin: 0; padding: 0; box-sizing: border-box; }
10+
body { background: #0a0a0f; color: #0f0; font-family: monospace; padding: 10px; font-size: 11px; }
11+
h2 { color: #00ff88; margin: 15px 0 8px; font-size: 14px; }
12+
pre { background: #1a1a2e; padding: 8px; border-radius: 6px; overflow-x: auto; margin: 8px 0; white-space: pre-wrap; word-wrap: break-word; }
13+
.btn { background: #00ff88; color: #000; border: none; padding: 10px 20px; border-radius: 8px; font-size: 13px; cursor: pointer; margin: 8px 0; width: 100%; }
14+
.btn:disabled { opacity: 0.5; }
15+
.success { color: #00ff88; border: 1px solid #00ff88; }
16+
.error { color: #ff4444; border: 1px solid #ff4444; }
17+
.log { max-height: 200px; overflow-y: auto; }
18+
</style>
19+
</head>
20+
<body>
21+
<h1>🔍 增强诊断版</h1>
22+
23+
<h2>1️⃣ 环境检测</h2>
24+
<pre id="env"></pre>
25+
26+
<h2>2️⃣ 测试 sendData</h2>
27+
<button class="btn" id="testBtn" onclick="testSendData()">🧪 发送测试数据</button>
28+
<pre id="testResult"></pre>
29+
30+
<h2>3️⃣ 操作日志</h2>
31+
<pre class="log" id="log"></pre>
32+
33+
<script>
34+
const tg = window.Telegram.WebApp;
35+
const logEl = document.getElementById('log');
36+
let logs = [];
37+
38+
function log(msg, type = 'info') {
39+
const time = new Date().toLocaleTimeString();
40+
const prefix = type === 'error' ? '❌' : type === 'success' ? '✅' : 'ℹ️';
41+
logs.unshift(`[${time}] ${prefix} ${msg}`);
42+
logEl.textContent = logs.join('\n');
43+
console.log('[WebApp]', msg);
44+
}
45+
46+
// 初始化
47+
log('页面加载开始');
48+
tg.ready();
49+
log('tg.ready() 调用完成');
50+
tg.expand();
51+
log('tg.expand() 调用完成');
52+
53+
// 环境信息
54+
const env = {
55+
isInTelegram: !!tg.initDataUnsafe?.user,
56+
userId: tg.initDataUnsafe?.user?.id,
57+
username: tg.initDataUnsafe?.user?.username,
58+
sdkVersion: tg.version,
59+
hasSendData: typeof tg.sendData === 'function',
60+
platform: tg.platform,
61+
colorScheme: tg.colorScheme
62+
};
63+
document.getElementById('env').textContent = JSON.stringify(env, null, 2);
64+
log(`环境检测完成:isInTelegram=${env.isInTelegram}`);
65+
66+
// 测试 sendData
67+
async function testSendData() {
68+
const btn = document.getElementById('testBtn');
69+
const resultEl = document.getElementById('testResult');
70+
71+
btn.disabled = true;
72+
btn.textContent = '发送中...';
73+
log('开始发送测试数据...');
74+
75+
const testData = {
76+
type: 'diagnostic_test',
77+
timestamp: Date.now(),
78+
env: env
79+
};
80+
81+
try {
82+
// 检查是否在 Telegram 内
83+
if (!env.isInTelegram) {
84+
throw new Error('不在 Telegram 环境中 - 无法使用 sendData');
85+
}
86+
87+
// 检查 sendData 是否存在
88+
if (!tg.sendData) {
89+
throw new Error('tg.sendData 方法不存在');
90+
}
91+
92+
// 调用 sendData
93+
log('调用 tg.sendData()...');
94+
const jsonData = JSON.stringify(testData);
95+
log(`数据大小:${jsonData.length} 字节`);
96+
97+
tg.sendData(jsonData);
98+
log('sendData 调用成功 - 无异常抛出');
99+
100+
resultEl.className = 'success';
101+
resultEl.textContent = '✅ sendData 调用成功!\n\n数据已发送到 Bot。\n如果 Bot 没收到,可能是:\n1. Bot 权限问题\n2. Telegram 服务器延迟\n3. Web App 链接问题';
102+
103+
// 2 秒后关闭
104+
setTimeout(() => {
105+
log('关闭 Web App...');
106+
tg.close();
107+
}, 2000);
108+
109+
} catch (e) {
110+
log(`发送失败:${e.message}`, 'error');
111+
resultEl.className = 'error';
112+
resultEl.textContent = `❌ 发送失败\n\n错误:${e.message}\n堆栈:${e.stack}\n\n建议:\n1. 确认在 Telegram 内打开\n2. 更新 Telegram 到最新版\n3. 重启 Telegram App`;
113+
btn.disabled = false;
114+
btn.textContent = '🧪 重试';
115+
}
116+
}
117+
118+
// 设置 MainButton
119+
if (env.isInTelegram) {
120+
tg.MainButton.setText('发送测试数据');
121+
tg.MainButton.setParams({ color: '#00ff88', text_color: '#000000' });
122+
tg.MainButton.show();
123+
tg.MainButton.onClick(() => testSendData());
124+
log('MainButton 已配置');
125+
}
126+
127+
log('页面初始化完成');
128+
</script>
129+
</body>
130+
</html>

0 commit comments

Comments
 (0)