chore(ui): temporary on-device boot diagnostic for the Android WebView white screen

Add a classic ES5 <script> to index.html, before the ES2022 module bundle, that renders an on-screen diagnostic overlay. It runs and paints even when the bundle fails to parse on an old Android System WebView (the Telegram/VK in-app case we are chasing: Firefox/Gecko renders the SPA on the same device, the in-app WebView shows only a white screen). The overlay installs error capture first (so a module SyntaxError / load failure / unhandled rejection is printed), then reports the engine (userAgent + Chromium version), the JS syntax and Web API support the es2022 bundle needs — each row dated by the Chrome version that shipped it, so the first failing row dates the engine — and whether the module ran (<html> gets .app-shell) and Svelte mounted (#app has children). A verdict flags the likely cause; a Copy button exports the report. vite.config.ts strip-boot-diag removes the whole BOOT-DIAG block from every non-production build, so the mock e2e (whose first taps a full-screen overlay would intercept) and the dev server stay clear; only the production build shipped to the test contour carries it. Temporary: revert this commit (the index.html block and the plugin) after the diagnosis. It must never reach master / production.
2026-07-04 12:30:47 +02:00
parent 44117e906c
commit 8c55b2d239
2 changed files with 313 additions and 2 deletions
@@ -1,7 +1,25 @@
 import { resolve } from 'node:path';
-import { defineConfig } from 'vite';
+import { defineConfig, type Plugin } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';

+/**
+ * stripBootDiag removes the temporary on-device boot-diagnostic block from index.html — the span
+ * between the `<!-- BOOT-DIAG:START -->` and `<!-- BOOT-DIAG:END -->` markers. That block is a
+ * full-screen ES5 overlay meant only for the production build shipped to the test contour, so it
+ * is dropped from every non-production build: the `mock` e2e (whose first taps the overlay would
+ * intercept) and the dev server. It is wired only when mode !== 'production'. Remove this plugin
+ * together with the index.html block once the Android WebView diagnosis is finished — it must
+ * never reach master / production.
+ */
+function stripBootDiag(): Plugin {
+  return {
+    name: 'strip-boot-diag',
+    transformIndexHtml(html) {
+      return html.replace(/\s*<!-- BOOT-DIAG:START[\s\S]*?BOOT-DIAG:END -->/g, '');
+    },
+  };
+}
+
 // The edge Connect service is scrabble.edge.v1.Gateway; the gateway serves it over
 // h2c on :8081 by default. In dev we proxy the RPC path so the browser (which can
 // not speak h2c directly) talks to the dev server on the same origin. In `mock`
@@ -19,7 +37,10 @@ export default defineConfig(({ mode }) => ({
    // so a missing build-arg never breaks the build.
    __APP_VERSION__: JSON.stringify(process.env.VITE_APP_VERSION || 'dev'),
  },
-  plugins: [svelte()],
+  // The boot-diagnostic overlay ships only in the production build (the test contour); it is
+  // stripped from the dev server and the mock e2e build, where a full-screen overlay would
+  // intercept Playwright's taps. See stripBootDiag / the index.html BOOT-DIAG block.
+  plugins: [svelte(), ...(mode !== 'production' ? [stripBootDiag()] : [])],
  server: {
    port: 5173,
    proxy: