333f6ccc6e
Production /login rendered a blank page (browser console: SyntaxError: 10 through the vue-i18n parser). Root cause proved with a RED regression (RES: vue-i18n public API reproduces 'Invalid linked format' code 10) plus an independent reviewer: auth.emailPlaceholder="name@company.com" is invalid vue-i18n linked-message syntax, so createI18n() throws a message-compilation SyntaxError while LoginView renders t('auth.emailPlaceholder'). Fix: escape the literal at-sign as name{'@'}company.com in th and en so the message compiles and the visible label is unchanged (name@company.com). Add an all-translations regression that translates every string in th/en (objects and arrays) through vue-i18n's public createI18n/global.t API and asserts the visible placeholder value. Verification: - RED test failed at th:auth.emailPlaceholder (code 10) before the fix. - Independent reviewer verified reproduction + fix, finished PASS. - Frontend tests 11 passed; production build passed (index-B4oVHpLg.js). - Chrome headless rendered the login card, Thai heading, and name@company.com from the production dist. Artifact checksum hash 3621155075b3d9245d2d05511aaf39b1b0cbcaeea local vs server.
2.6 KiB
2026-09-01 — Production Login White-Screen Root Cause
Status
Root cause fixed locally; fresh review and production redeploy pending.
Incident
Production redirected unauthenticated users to /login, then rendered a blank page. The browser console reported:
SyntaxError: 10
... nextToken -> parse
Earlier hypotheses around cache, gzip transport, stale assets, and minified line length were disproved: the served JavaScript asset matched the local build byte-for-byte and passed node --check.
Verified root cause
LoginView.vue renders t('auth.emailPlaceholder'). Both locales/th.json and locales/en.json contained:
"emailPlaceholder": "name@company.com"
vue-i18n treats @ as linked-message syntax. Direct compiler reproduction returned:
code 10: Invalid linked format
code 14: Unexpected lexical analysis
code 13: Unexpected empty linked key
A RED regression test that compiles every Thai and English message failed specifically at th:auth.emailPlaceholder, matching production error code 10.
Fix
- Escape the literal at-sign using vue-i18n syntax:
name{'@'}company.comin both locales. - Add a recursive contract test using
@intlify/message-compilerbaseCompilefor every string in both translation dictionaries.
The rendered translation remains name@company.com.
Verification
- RED focused test: failed at
th:auth.emailPlaceholderwith code 10 before the fix. - Reviewer cycle 1 failed closed because the initial compiler test skipped strings nested inside locale arrays and used an internal compiler package. The test was corrected to recurse arrays, use vue-i18n's public
createI18n/global.tAPI, and assert the visible placeholder value. - Frontend tests: 11 passed, 0 failed.
- Production build: 699 modules,
index-B4oVHpLg.js, build passed. - Chrome headless rendered DOM from the production build contains
login-card,เข้าสู่ระบบ CrowdSight, andname@company.com. - Browser runtime log contained no
SyntaxErroror uncaught exception. - Screenshot file was produced at 1280×800, but image-model analysis was unavailable because the configured vision provider returned HTTP 401; this remains an explicit visual-analysis gap.
git diff --check: passed.- Static dangerous-pattern scan on added lines: no findings.
Remaining
- Obtain a fresh independent reviewer verdict on the current diff.
- Commit/push after review.
- Rebuild EasyPanel and verify live
/loginuses the fresh chunk and renders visibly. - Mobile visual QA remains deferred as previously agreed.