From bf7eda3f6a06d0127c478bfe6ce53d097be0a92c Mon Sep 17 00:00:00 2001
From: matitos <matitos@matitos.org>
Date: Sun, 20 Sep 2026 12:48:10 +0000
Subject: [PATCH] Fall back to REST polling when the WebSocket cannot connect

On some mobile networks/browsers the wss:// upgrade is blocked even though the
page loads (the server side is verified working: a browser-style handshake gets
101). After three socket failures the header now shows "polling (5s)" instead
of a misleading perpetual "reconnecting", since the 5s REST poll keeps all data
correct. The socket error handler also surfaces the browser's message.
---
 frontend/src/App.vue | 13 ++++++++++---
 frontend/src/api.js  |  7 ++++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 57c7ddb..8627023 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import * as api from './api'
 import BacktestPanel from './components/BacktestPanel.vue'
 import EquityChart from './components/EquityChart.vue'
@@ -37,6 +37,10 @@ const equityPoints = ref([])
 const busy = ref(false)
 const connected = ref(false)
 const socketError = ref('')
+const socketFailures = ref(0)
+// After a few failed socket attempts (some mobile browsers/DPIs refuse wss://),
+// stop advertising "reconnecting" and rely on the 5s REST poll instead.
+const usePolling = computed(() => socketFailures.value >= 3)
 
 let socket
 let pollTimer
@@ -139,6 +143,7 @@ onMounted(async () => {
     },
     onClose: () => (connected.value = false),
     onError: (code) => {
+      socketFailures.value += 1
       if (code === 1008) socketError.value = 'rejected by the server (token/auth)'
       else socketError.value = `socket closed (code ${code})`
     },
@@ -166,9 +171,11 @@ onUnmounted(() => {
         <span class="flex items-center gap-1.5 text-xs text-slate-400">
           <span
             class="h-2 w-2 rounded-full"
-            :class="connected ? 'bg-emerald-400' : 'bg-slate-500'"
+            :class="connected ? 'bg-emerald-400' : usePolling ? 'bg-sky-400' : 'bg-slate-500'"
           ></span>
-          {{ connected ? 'live' : 'reconnecting' }}
+          <template v-if="connected">live</template>
+          <template v-else-if="usePolling">polling (5s)</template>
+          <template v-else>reconnecting</template>
           <span v-if="!connected && socketError" class="text-amber-300">· {{ socketError }}</span>
         </span>
       </div>
diff --git a/frontend/src/api.js b/frontend/src/api.js
index 6b41fa7..f3d49f2 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -58,7 +58,12 @@ export function openSocket({ onMessage, onOpen, onClose, onError }) {
       onError?.(event.code, event.reason)
       schedule()
     }
-    socket.onerror = () => socket.close()
+    socket.onerror = (event) => {
+      // The browser hides details here; surface what it does give us.
+      const detail = event?.message || 'connection error'
+      onError?.(0, detail)
+      socket.close()
+    }
   }
   connect()