cal/strat-gameplay-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CLAUDE: Add error boundary UI for WebSocket failures (HIGH-001)

Browse Source 
When WebSocket connection fails after max attempts (permanentlyFailed state):
- Show red error banner with "Connection Failed" message and "Try Again" button
- Loading modal distinguishes between connecting/reconnecting/failed states
- "Try Again" button uses manualRetry() to reset state and attempt fresh connection
- Yellow reconnecting banner only shows during active reconnection attempts

Uses permanentlyFailed state and manualRetry() from HIGH-002.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Cal Corum 2026-01-13 20:52:34 -06:00
parent ac7712d2cc
commit a9a3e9992d
1 changed files with 44 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
frontend-sba/pages/games/[id].vue
View File

@ -14,9 +14,39 @@
<!-- Main Game Container -->
<div class="container mx-auto px-4 py-6 lg:py-8">
<!-- Connection Status Banner -->
<!-- Connection Error Banner (Permanently Failed) -->
<div
v-if="!isConnected"
v-if="permanentlyFailed"
class="mb-4 bg-red-50 border-l-4 border-red-500 p-4 rounded-lg"
>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-red-800">
Connection Failed
</p>
<p class="text-sm text-red-700 mt-1">
Unable to connect to the game server after multiple attempts. Please check your internet connection and try again.
</p>
</div>
</div>
<button
@click="manualRetry"
class="ml-4 px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md transition flex-shrink-0"
>
Try Again
</button>
</div>
</div>
<!-- Connection Status Banner (Reconnecting) -->
<div
v-else-if="!isConnected"
class="mb-4 bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-lg"
>
<div class="flex items-center justify-between">
@ -186,7 +216,10 @@
</div>
<p class="text-gray-900 dark:text-white font-semibold">
{{ isConnecting ? 'Connecting to game...' : 'Connection Failed' }}
{{ isConnecting ? 'Connecting to game...' : permanentlyFailed ? 'Connection Failed' : 'Reconnecting...' }}
</p>
<p v-if="permanentlyFailed" class="text-sm text-gray-600 dark:text-gray-400 mt-1">
Unable to reach server after multiple attempts
</p>
<!-- Status info -->
@ -196,10 +229,10 @@
<span class="text-gray-700 dark:text-gray-300">Auth: {{ authStore.isAuthenticated ? 'OK' : authStore.isLoading ? 'Checking...' : 'Failed' }}</span>
</div>
<div class="flex items-center gap-2 text-sm mt-1">
<span :class="isConnected ? 'text-green-600' : isConnecting ? 'text-yellow-600' : 'text-red-600'">●</span>
<span class="text-gray-700 dark:text-gray-300">WebSocket: {{ isConnected ? 'Connected' : isConnecting ? 'Connecting...' : 'Disconnected' }}</span>
<span :class="isConnected ? 'text-green-600' : isConnecting ? 'text-yellow-600' : permanentlyFailed ? 'text-red-600' : 'text-orange-500'">●</span>
<span class="text-gray-700 dark:text-gray-300">WebSocket: {{ isConnected ? 'Connected' : isConnecting ? 'Connecting...' : permanentlyFailed ? 'Failed' : 'Reconnecting...' }}</span>
</div>
<p v-if="connectionError" class="text-xs text-red-600 mt-2">Error: {{ connectionError }}</p>
<p v-if="connectionError" class="text-xs text-red-600 mt-2">{{ connectionError }}</p>
<!-- Debug info -->
<div class="mt-2 text-xs text-gray-500 border-t pt-2">
<p>WS URL: {{ wsDebugUrl }}</p>
@ -211,10 +244,11 @@
<!-- Action buttons -->
<div class="mt-4 flex flex-col gap-2">
<button
@click="forceReconnect"
class="w-full px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition"
@click="permanentlyFailed ? manualRetry() : forceReconnect()"
:class="permanentlyFailed ? 'bg-red-600 hover:bg-red-700' : 'bg-blue-600 hover:bg-blue-700'"
class="w-full px-4 py-2 text-sm font-medium text-white rounded-lg transition"
>
Retry Connection
{{ permanentlyFailed ? 'Try Again' : 'Retry Connection' }}
</button>
<button
v-if="!authStore.isAuthenticated"
@ -359,7 +393,7 @@ const uiStore = useUiStore()
const gameId = computed(() => route.params.id as string)
// WebSocket connection
const { socket, isConnected, isConnecting, connectionError, connect, forceReconnect } = useWebSocket()
const { socket, isConnected, isConnecting, connectionError, permanentlyFailed, connect, forceReconnect, manualRetry } = useWebSocket()
// Debug info for troubleshooting Safari WebSocket issues
const config = useRuntimeConfig()