feat: implement phone-home debugging for frontend errors

backend/app/api/routes.py

@@ -442,3 +442,10 @@ async def get_logs(lines: int = Query(100, ge=1, le=1000)):
     except Exception as e:
         return {"error": str(e)}
 
+
+@router.post("/debug/report_error")
+async def report_error(error_data: dict):
+    """Log a frontend-side error to the server log for debugging."""
+    logger.error(f"[FRONTEND-ERROR] {json.dumps(error_data)}")
+    return {"status": "ok"}
+

frontend/js/alt_app.js

@@ -20,159 +20,177 @@ let additionalFiles = []; // For add photos modal
 // Uses fetch-based SSE instead of EventSource (which can't set headers
 // required by HuggingFace's ZeroGPU proxy).
 async function callGradioApi(apiName, dataArr) {
-    const API_PATHS = ['/gradio_api/call/', '/call/'];
-    let hfToken = '';
-
-    // Fetch config for ZeroGPU token
     try {
-        const confRes = await fetch(`${API_BASE}/config`);
-        if (confRes.ok) {
-            const confData = await confRes.json();
-            hfToken = confData.hf_token || '';
-        }
-    } catch (e) {
-        console.warn('Failed to fetch config', e);
-    }
-
-    const headers = { 'Content-Type': 'application/json' };
-    if (hfToken) headers['Authorization'] = `Bearer ${hfToken}`;
+        const API_PATHS = ['/gradio_api/call/', '/call/'];
+        let hfToken = '';
 
-    let lastError = null;
-    let selectedApiBase = '';
-    let eventId = '';
-
-    // Step 1: Find working endpoint
-    for (const apiBase of API_PATHS) {
+        // Fetch config for ZeroGPU token
         try {
-            const queueUrl = apiBase + apiName;
-            console.log(`[Gradio] Attempting POST: ${queueUrl}`);
+            const confRes = await fetch(`${API_BASE}/config`);
+            if (confRes.ok) {
+                const confData = await confRes.json();
+                hfToken = confData.hf_token || '';
+            }
+        } catch (e) {
+            console.warn('Failed to fetch config', e);
+        }
 
-            const res = await fetch(queueUrl, {
-                method: 'POST',
-                headers: headers,
-                credentials: 'include',
-                body: JSON.stringify({ data: dataArr })
-            });
+        const headers = { 'Content-Type': 'application/json' };
+        if (hfToken) headers['Authorization'] = `Bearer ${hfToken}`;
+
+        let lastError = null;
+        let selectedApiBase = '';
+        let eventId = '';
+
+        // Step 1: Find working endpoint
+        for (const apiBase of API_PATHS) {
+            try {
+                const queueUrl = apiBase + apiName;
+                console.log(`[Gradio] Attempting POST: ${queueUrl}`);
+
+                const res = await fetch(queueUrl, {
+                    method: 'POST',
+                    headers: headers,
+                    credentials: 'include',
+                    body: JSON.stringify({ data: dataArr })
+                });
+
+                if (res.status === 404) {
+                    console.warn(`[Gradio] 404 at ${queueUrl}, trying next fallback...`);
+                    continue;
+                }
 
-            if (res.status === 404) {
-                console.warn(`[Gradio] 404 at ${queueUrl}, trying next fallback...`);
-                continue;
-            }
+                if (!res.ok) {
+                    throw new Error(`Gradio API Request Failed (${res.status})`);
+                }
 
-            if (!res.ok) {
-                throw new Error(`Gradio API Request Failed (${res.status})`);
+                const eventObj = await res.json();
+                eventId = eventObj.event_id;
+                selectedApiBase = apiBase;
+                console.log(`[Gradio] Success at ${queueUrl}. Event ID: ${eventId}`);
+                break;
+            } catch (e) {
+                lastError = e;
+                console.error(`[Gradio] Error at ${apiBase}:`, e);
             }
-
-            const eventObj = await res.json();
-            eventId = eventObj.event_id;
-            selectedApiBase = apiBase;
-            console.log(`[Gradio] Success at ${queueUrl}. Event ID: ${eventId}`);
-            break;
-        } catch (e) {
-            lastError = e;
-            console.error(`[Gradio] Error at ${apiBase}:`, e);
         }
-    }
 
-    if (!selectedApiBase || !eventId) {
-        throw lastError || new Error('Gradio API could not be reached (All paths failed)');
-    }
+        if (!selectedApiBase || !eventId) {
+            throw lastError || new Error('Gradio API could not be reached (All paths failed)');
+        }
 
-    // Step 2: Stream the result via fetch (not EventSource)
-    const streamUrl = selectedApiBase + apiName + '/' + eventId;
-    console.log(`[Gradio] Streaming from: ${streamUrl}`);
+        // Step 2: Stream the result via fetch (not EventSource)
+        const streamUrl = selectedApiBase + apiName + '/' + eventId;
+        console.log(`[Gradio] Streaming from: ${streamUrl}`);
 
-    const streamHeaders = { 'Accept': 'text/event-stream' };
-    if (hfToken) {
-        streamHeaders['Authorization'] = `Bearer ${hfToken}`;
-    }
+        const streamHeaders = { 'Accept': 'text/event-stream' };
+        if (hfToken) {
+            streamHeaders['Authorization'] = `Bearer ${hfToken}`;
+        }
 
-    const sseRes = await fetch(streamUrl, {
-        method: 'GET',
-        headers: streamHeaders,
-        credentials: 'include',
-        cache: 'no-cache',
-    });
+        const sseRes = await fetch(streamUrl, {
+            method: 'GET',
+            headers: streamHeaders,
+            credentials: 'include',
+            cache: 'no-cache',
+        });
 
-    if (!sseRes.ok) {
-        throw new Error('Gradio SSE Stream Failed (' + sseRes.status + ')');
-    }
+        if (!sseRes.ok) {
+            throw new Error('Gradio SSE Stream Failed (' + sseRes.status + ')');
+        }
 
-    const reader = sseRes.body.getReader();
-    const decoder = new TextDecoder();
-    let buffer = '';
+        const reader = sseRes.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
 
-    while (true) {
-        const { done, value } = await reader.read();
+        while (true) {
+            const { done, value } = await reader.read();
 
-        if (value) {
-            buffer += decoder.decode(value, { stream: true });
-        }
-        if (done) {
-            buffer += decoder.decode();
-            if (buffer.trim()) {
-                buffer += '\n\n';
+            if (value) {
+                buffer += decoder.decode(value, { stream: true });
+            }
+            if (done) {
+                buffer += decoder.decode();
+                if (buffer.trim()) {
+                    buffer += '\n\n';
+                }
             }
-        }
 
-        // Parse SSE events from buffer (events separated by double newline)
-        const parts = buffer.split('\n\n');
-        // Keep the last incomplete chunk in the buffer
-        buffer = parts.pop();
+            // Parse SSE events from buffer (events separated by double newline)
+            const parts = buffer.split('\n\n');
+            // Keep the last incomplete chunk in the buffer
+            buffer = parts.pop();
 
-        for (const part of parts) {
-            let eventType = '';
-            const dataLines = [];
+            for (const part of parts) {
+                let eventType = '';
+                const dataLines = [];
 
-            for (const line of part.split('\n')) {
-                if (line.startsWith('event:')) {
-                    eventType = line.substring(6).trim();
-                } else if (line.startsWith('data:')) {
-                    dataLines.push(line.substring(5).replace(/^ /, ''));
+                for (const line of part.split('\n')) {
+                    if (line.startsWith('event:')) {
+                        eventType = line.substring(6).trim();
+                    } else if (line.startsWith('data:')) {
+                        dataLines.push(line.substring(5).replace(/^ /, ''));
+                    }
                 }
-            }
 
-            const dataLine = dataLines.join('\n');
-            if (!dataLine && !eventType) continue;
-
-            // ZeroGPU format: event type is "complete" or "error",
-            // data is a raw JSON array of outputs
-            if (eventType === 'complete') {
-                if (!done) reader.cancel();
-                try {
-                    const result = JSON.parse(dataLine);
-                    return Array.isArray(result) ? result : [result];
-                } catch {
-                    return [dataLine];
+                const dataLine = dataLines.join('\n');
+                if (!dataLine && !eventType) continue;
+
+                // ZeroGPU format: event type is "complete" or "error",
+                // data is a raw JSON array of outputs
+                if (eventType === 'complete') {
+                    if (!done) reader.cancel();
+                    try {
+                        const result = JSON.parse(dataLine);
+                        return Array.isArray(result) ? result : [result];
+                    } catch {
+                        return [dataLine];
+                    }
+                } else if (eventType === 'error') {
+                    if (!done) reader.cancel();
+                    console.error(`[Gradio] SSE Error event:`, part);
+                    const errorDetail = dataLine === 'null' ? 'Server Error (null)' : dataLine;
+                    // Phone home specifically for SSE error
+                    throw new Error(`SSE_ERROR: ${errorDetail}`);
                 }
-            } else if (eventType === 'error') {
-                if (!done) reader.cancel();
-                console.error(`[Gradio] SSE Error event:`, part);
-                const errorDetail = dataLine === 'null' ? 'Server Error (null)' : dataLine;
-                throw new Error(`${errorDetail}`);
-            }
-            // Also handle the non-ZeroGPU format (Gradio standard)
-            if (dataLine) {
-                try {
-                    const msg = JSON.parse(dataLine);
-                    if (msg.msg === 'process_completed') {
-                        if (!done) reader.cancel();
-                        if (msg.success) {
-                            return msg.output.data;
-                        } else {
-                            throw new Error(msg.output?.error || 'Server Error');
+                // Also handle the non-ZeroGPU format (Gradio standard)
+                if (dataLine) {
+                    try {
+                        const msg = JSON.parse(dataLine);
+                        if (msg.msg === 'process_completed') {
+                            if (!done) reader.cancel();
+                            if (msg.success) {
+                                return msg.output.data;
+                            } else {
+                                throw new Error(msg.output?.error || 'Server Error');
+                            }
                         }
+                    } catch {
+                        // Not JSON or not the expected format, skip
                     }
-                } catch {
-                    // Not JSON or not the expected format, skip
                 }
             }
-        }
 
-        if (done) break;
+            if (done) break;
+        }
+    } catch (err) {
+        // Phone-home error report
+        try {
+            fetch(`${API_BASE}/debug/report_error`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    apiName,
+                    error: err.message,
+                    stack: err.stack,
+                    userAgent: navigator.userAgent,
+                    url: window.location.href,
+                    timestamp: new Date().toISOString()
+                })
+            });
+        } catch (e) { /* ignore secondary error */ }
+        throw err;
     }
-
-    throw new Error('Gradio stream ended without a result');
 }
 
 // ── Init ──────────────────────────────────────────────────────────────