Fix: Realtime API connection issues

Investigate and resolve issues with the real-time API, including connection timeouts and CORS errors.

src/components/SystemTracker.tsx

@@ -33,6 +33,7 @@ interface SystemTrackerProps {
 
 const SystemTracker = ({ system }: SystemTrackerProps) => {
   const queryClient = useQueryClient();
+  const [realtimeError, setRealtimeError] = useState<string | null>(null);
 
   // Query to get signatures for the current system
   const {
@@ -59,17 +60,21 @@ const SystemTracker = ({ system }: SystemTrackerProps) => {
       return data;
     },
     enabled: !!system,
-    refetchInterval: false, // Disable polling since we'll use real-time updates
+    refetchInterval: 30000, // Fallback polling every 30 seconds if real-time fails
   });
 
-  // Set up real-time subscription for signature updates
+  // Set up real-time subscription for signature updates with error handling
   useEffect(() => {
     if (!system) return;
 
     console.log('Setting up real-time subscription for system:', system);
+    setRealtimeError(null);
 
+    let unsubscribePromise: Promise<() => void> | null = null;
+
+    try {
       // Subscribe to changes in the sigview collection
-    const unsubscribe = pb.collection('sigview').subscribe('*', function (e) {
+      unsubscribePromise = pb.collection('sigview').subscribe('*', function (e) {
         console.log('Real-time update received:', e);
         
         // Check if the update is for our current system
@@ -88,10 +93,36 @@ const SystemTracker = ({ system }: SystemTrackerProps) => {
         }
       });
 
+      // Handle subscription promise
+      unsubscribePromise.catch((error) => {
+        console.error('Real-time subscription failed:', error);
+        setRealtimeError('Real-time updates unavailable. Using periodic refresh instead.');
+        
+        // Don't show error toast immediately to avoid spam
+        setTimeout(() => {
+          toast({
+            title: "Real-time Connection Failed",
+            description: "Falling back to periodic updates every 30 seconds.",
+            variant: "destructive",
+          });
+        }, 2000);
+      });
+
+    } catch (error) {
+      console.error('Failed to set up real-time subscription:', error);
+      setRealtimeError('Real-time updates unavailable. Using periodic refresh instead.');
+    }
+
     // Cleanup subscription on unmount or system change
     return () => {
+      if (unsubscribePromise) {
         console.log('Cleaning up real-time subscription for system:', system);
-      unsubscribe?.then(unsub => unsub()).catch(console.error);
+        unsubscribePromise
+          .then(unsub => unsub())
+          .catch(error => {
+            console.error('Error cleaning up subscription:', error);
+          });
+      }
     };
   }, [system, queryClient]);
 
@@ -133,8 +164,8 @@ const SystemTracker = ({ system }: SystemTrackerProps) => {
           <CardTitle className="text-xl text-white flex items-center gap-2">
             <Radar className="h-5 w-5 text-blue-400" />
             {system}
-            <Badge variant="outline" className="ml-2 bg-green-900/20 text-green-400 border-green-600">
-              Live
+            <Badge variant="outline" className={`ml-2 ${realtimeError ? 'bg-yellow-900/20 text-yellow-400 border-yellow-600' : 'bg-green-900/20 text-green-400 border-green-600'}`}>
+              {realtimeError ? 'Polling' : 'Live'}
             </Badge>
           </CardTitle>
           <Button
@@ -150,6 +181,18 @@ const SystemTracker = ({ system }: SystemTrackerProps) => {
         </CardHeader>
       </Card>
 
+      {/* Real-time Error Display */}
+      {realtimeError && (
+        <Card className="bg-yellow-900/20 border-yellow-700">
+          <CardContent className="pt-6">
+            <div className="flex items-center gap-2 text-yellow-400">
+              <AlertCircle className="h-5 w-5" />
+              <span>{realtimeError}</span>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
       {/* Error Display */}
       {signaturesError && (
         <Card className="bg-red-900/20 border-red-700">