feat(ui): diagnostic screen on /telegram/ instead of the landing bounce
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 55s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m22s
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 55s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m22s
A Mini App launch on /telegram/ without sign-in data (empty initData) used to
location.replace('/') — bouncing the visitor to the marketing landing. That
destroyed all diagnosability and, on some Android clients that reach the entry
with no initData, simply looked like the app refusing to open.
Replace the bounce with a compact, privacy-safe launch-error screen
(screens/TelegramLaunchError.svelte) that renders a one-screenshot diagnostic
snapshot captured at the moment of failure: SDK/WebApp presence, Telegram
platform/version, whether initData is empty, whether the URL fragment carried
tgWebAppData, the initData field NAMES present/missing (never the signed
values, never an IP), and OS/mobile/browser via User-Agent Client Hints plus
the full User-Agent. A Share button delivers it through the OS share sheet
(clipboard copy on desktop, reusing the GCG no-webview-strand guard); Retry
re-checks in place to recover a late initData without a reload (which would
discard the launch fragment).
This is the instrument to root-cause the Android empty-initData failure, which
is not reproducible in Playwright.
Tests: collectTelegramDiag + shareText/pickTextShare unit tests; the /telegram/
e2e now asserts the diagnostic screen, not a redirect. Docs: ARCHITECTURE.md +
UI_DESIGN.md updated.
This commit is contained in:
@@ -0,0 +1,132 @@
|
||||
<script lang="ts">
|
||||
// Shown on the dedicated /telegram/ entry when a Mini App launch carried no sign-in data (empty
|
||||
// initData) — instead of bouncing the visitor to the marketing landing. It states the problem
|
||||
// plainly and renders a compact, privacy-safe diagnostic snapshot (taken at the moment of
|
||||
// failure, app.launchError) sized to fit one screenshot, with a Share button (the OS share sheet,
|
||||
// or a clipboard copy on desktop) so a stuck user can send it to the developer to pinpoint why
|
||||
// Telegram provided no initData — notably on some Android clients. The snapshot carries only
|
||||
// presence / identification signals and field NAMES, never the signed initData itself, nor an IP.
|
||||
import { app, retryTelegramLaunch } from '../lib/app.svelte';
|
||||
import { shareText } from '../lib/share';
|
||||
import { t } from '../lib/i18n/index.svelte';
|
||||
|
||||
const diag = $derived(app.launchError);
|
||||
|
||||
// One compact "key: value" line per fact; the field labels are fixed diagnostic tokens (not UI
|
||||
// prose), so the developer reads the same report in any locale. Kept terse to fit one screenshot.
|
||||
const report = $derived(
|
||||
diag
|
||||
? [
|
||||
`sdk: ${diag.hasSDK ? 'yes' : 'no'} webapp: ${diag.hasWebApp ? 'yes' : 'no'}`,
|
||||
`tg-platform: ${diag.platform || '—'} tg-version: ${diag.version || '—'}`,
|
||||
`initData: ${diag.initDataLen > 0 ? diag.initDataLen : 'empty'} tgdata-in-url: ${diag.hashHadTgData ? 'yes' : 'no'}`,
|
||||
`fields: ${diag.fieldsPresent.join(',') || '—'}`,
|
||||
`missing: ${diag.fieldsMissing.join(',') || '—'}`,
|
||||
`os: ${diag.osPlatform || '—'} mobile: ${diag.mobile || '—'}`,
|
||||
`browser: ${diag.browser || '—'}`,
|
||||
`ua: ${diag.userAgent || '—'}`,
|
||||
].join('\n')
|
||||
: '',
|
||||
);
|
||||
|
||||
let retrying = $state(false);
|
||||
async function retry(): Promise<void> {
|
||||
if (retrying) return;
|
||||
retrying = true;
|
||||
try {
|
||||
await retryTelegramLaunch();
|
||||
} finally {
|
||||
retrying = false;
|
||||
}
|
||||
}
|
||||
|
||||
let copied = $state(false);
|
||||
let copyTimer: ReturnType<typeof setTimeout> | undefined;
|
||||
async function share(): Promise<void> {
|
||||
const r = await shareText(report, t('launch.errorTitle'));
|
||||
// The OS share sheet is its own feedback; a desktop clipboard copy is silent, so confirm it.
|
||||
if (r === 'copied') {
|
||||
copied = true;
|
||||
clearTimeout(copyTimer);
|
||||
copyTimer = setTimeout(() => (copied = false), 1500);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if diag}
|
||||
<div class="boot">
|
||||
<div class="card">
|
||||
<h1>{t('launch.errorTitle')}</h1>
|
||||
<p class="msg">{t('launch.errorBody')}</p>
|
||||
<pre class="diag">{report}</pre>
|
||||
<div class="actions">
|
||||
<button class="share" onclick={share}>{copied ? t('launch.copied') : t('launch.share')}</button>
|
||||
<button class="retry" onclick={retry} disabled={retrying}>{t('common.retry')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.boot {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 16px;
|
||||
background: var(--bg);
|
||||
}
|
||||
.card {
|
||||
max-width: 32rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
text-align: center;
|
||||
color: var(--text);
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.msg {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.diag {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
color: var(--text);
|
||||
background: var(--bg-elev);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 8px 10px;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.share,
|
||||
.retry {
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--accent);
|
||||
}
|
||||
.share {
|
||||
background: var(--accent);
|
||||
color: var(--accent-text);
|
||||
}
|
||||
.retry {
|
||||
background: transparent;
|
||||
color: var(--accent);
|
||||
}
|
||||
.retry:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user