Add backend health check, fetch timeouts, stale token cleanup, and error screen

Frontend now checks /health before starting auth flow. Shows a clear
"Cannot Connect to Server" screen with retry button when backend is
unreachable. Stale non-JWT tokens in localStorage are detected and
cleared automatically. All API calls have a 10s timeout via AbortController.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-27 19:55:50 -04:00
parent 066c3310ff
commit 2ab097ec8a
4 changed files with 117 additions and 43 deletions
+6 -3
View File
@@ -1,6 +1,6 @@
import { useEffect, useRef } from 'react';
import { useGameStore } from '@/store';
import { api, getAuthToken, setAuthToken } from '@/lib/api';
import { api, getAuthToken, setAuthToken, clearAuthToken, decodeTokenPayload } from '@/lib/api';
import { AUTO_SAVE_INTERVAL_TICKS } from '@ai-tycoon/shared';
export function useCloudSave() {
@@ -31,8 +31,11 @@ export function useCloudSave() {
}
export async function ensureAuth(): Promise<string | null> {
let token = getAuthToken();
if (token) return token;
const token = getAuthToken();
if (token) {
if (decodeTokenPayload(token)) return token;
clearAuthToken();
}
try {
const result = await api.auth.anonymous();