feat(ui): show modal when frontend loses connection to backend (#2370)

Author: diamonwiggins

web/src/App.tsx

@@ -3,6 +3,7 @@ import { ConfigProvider } from "./contexts/ConfigContext";
 import { WizardModeProvider } from "./contexts/WizardModeContext";
 import { BrandingProvider } from "./contexts/BrandingContext";
 import { AuthProvider } from "./contexts/AuthContext";
+import ConnectionMonitor from "./components/common/ConnectionMonitor";
 import InstallWizard from "./components/wizard/InstallWizard";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { getQueryClient } from "./query-client";
@@ -33,6 +34,7 @@ function App() {
           </BrandingProvider>
         </ConfigProvider>
       </AuthProvider>
+      <ConnectionMonitor />
     </QueryClientProvider>
   );
 }

web/src/components/common/ConnectionMonitor.tsx

@@ -0,0 +1,124 @@
+import React, { useEffect, useState, useCallback } from 'react';
+
+// Connection modal component
+const ConnectionModal: React.FC<{ onRetry: () => void; isRetrying: boolean }> = ({ onRetry, isRetrying }) => {
+  const [retryCount, setRetryCount] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setRetryCount(count => count + 1);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center">
+      <div className="bg-white rounded-lg p-6 max-w-md mx-4 shadow-xl">
+        <div className="flex items-center justify-center mb-4">
+          <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mr-4">
+            <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+            </svg>
+          </div>
+        </div>
+        
+        <h2 className="text-xl font-bold text-gray-900 text-center mb-2">
+          Cannot connect
+        </h2>
+        
+        <p className="text-gray-700 text-center mb-6">
+          We're unable to reach the server right now. Please check that the 
+          installer is running and accessible.
+        </p>
+        
+        <div className="flex items-center justify-between">
+          <div className="flex items-center text-sm font-semibold text-gray-600">
+            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600 mr-2"></div>
+            Trying again in {Math.max(1, 10 - (retryCount % 10))} second{Math.max(1, 10 - (retryCount % 10)) !== 1 ? 's' : ''}
+          </div>
+          <button 
+            onClick={onRetry}
+            disabled={isRetrying}
+            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isRetrying ? 'Retrying...' : 'Try Now'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ConnectionMonitor: React.FC = () => {
+  const [isConnected, setIsConnected] = useState(true);
+  const [isChecking, setIsChecking] = useState(false);
+
+  const checkConnection = useCallback(async () => {
+    setIsChecking(true);
+    
+    try {
+      // Try up to 3 times before marking as disconnected
+      let attempts = 0;
+      const maxAttempts = 3;
+      
+      while (attempts < maxAttempts) {
+        try {
+          // Create a timeout promise
+          const timeoutPromise = new Promise((_, reject) => 
+            setTimeout(() => reject(new Error('Timeout')), 5000)
+          );
+          
+          const fetchPromise = fetch('/api/health', {
+            method: 'GET',
+            headers: { 'Content-Type': 'application/json' },
+          });
+          
+          const response = await Promise.race([fetchPromise, timeoutPromise]) as Response;
+          
+          if (response.ok) {
+            setIsConnected(true);
+            return;
+          } else {
+            throw new Error(`HTTP ${response.status}`);
+          }
+        } catch {
+          attempts++;
+          if (attempts < maxAttempts) {
+            await new Promise(resolve => setTimeout(resolve, 1000));
+          }
+        }
+      }
+      
+      // All attempts failed - show modal immediately
+      setIsConnected(false);
+      
+    } catch {
+      setIsConnected(false);
+    } finally {
+      setIsChecking(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    // Initial check
+    checkConnection();
+    
+    // Set up periodic health checks every 5 seconds
+    const interval = setInterval(checkConnection, 5000);
+    
+    return () => clearInterval(interval);
+  }, [checkConnection]);
+
+  return (
+    <>
+      {!isConnected && (
+        <ConnectionModal 
+          onRetry={checkConnection}
+          isRetrying={isChecking}
+        />
+      )}
+    </>
+  );
+};
+
+export default ConnectionMonitor;

web/src/components/common/tests/ConnectionMonitor.test.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { http, HttpResponse } from 'msw';
+import { setupServer } from 'msw/node';
+import ConnectionMonitor from '../ConnectionMonitor';
+
+const server = setupServer(
+  http.get('*/api/health', () => {
+    return new HttpResponse(JSON.stringify({ status: 'ok' }), {
+      status: 200,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  })
+);
+
+describe('ConnectionMonitor', () => {
+  beforeEach(() => {
+    server.listen({ onUnhandledRequest: 'warn' });
+  });
+
+  afterEach(() => {
+    server.resetHandlers();
+    vi.clearAllMocks();
+  });
+
+  it('should not show modal when API is available', async () => {
+    render(<ConnectionMonitor />);
+
+    // Modal should not appear when connected
+    await new Promise(resolve => setTimeout(resolve, 100));
+    expect(screen.queryByText('Cannot connect')).not.toBeInTheDocument();
+  });
+
+  it('should show modal when health check fails', async () => {
+    server.use(
+      http.get('*/api/health', () => {
+        return HttpResponse.error();
+      })
+    );
+
+    render(<ConnectionMonitor />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Cannot connect')).toBeInTheDocument();
+    }, { timeout: 4000 });
+  }, 6000);
+
+  it('should handle manual retry', async () => {
+    let manualRetryClicked = false;
+    
+    server.use(
+      http.get('*/api/health', () => {
+        
+        // Keep failing until manual retry is clicked, then succeed
+        if (!manualRetryClicked) {
+          return HttpResponse.error();
+        }
+        
+        return new HttpResponse(JSON.stringify({ status: 'ok' }), {
+          status: 200,
+          headers: { 'Content-Type': 'application/json' },
+        });
+      })
+    );
+
+    render(<ConnectionMonitor />);
+
+    // Wait for modal to appear after first health check fails
+    await waitFor(() => {
+      expect(screen.getByText('Cannot connect')).toBeInTheDocument();
+    }, { timeout: 6000 });
+
+    // Wait for the retry button to be available
+    await waitFor(() => {
+      expect(screen.getByText('Try Now')).toBeInTheDocument();
+    }, { timeout: 1000 });
+
+    // Mark that manual retry was clicked, then click it
+    manualRetryClicked = true;
+    fireEvent.click(screen.getByText('Try Now'));
+
+    // Modal should disappear when connection is restored
+    await waitFor(() => {
+      expect(screen.queryByText('Cannot connect')).not.toBeInTheDocument();
+    }, { timeout: 6000 });
+  }, 12000);
+
+  it('should show retry countdown timer', async () => {
+    server.use(
+      http.get('*/api/health', () => {
+        return HttpResponse.error();
+      })
+    );
+
+    render(<ConnectionMonitor />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Cannot connect')).toBeInTheDocument();
+    }, { timeout: 4000 });
+
+    expect(screen.getByText(/Trying again in \d+ second/)).toBeInTheDocument();
+  }, 6000);
+});