@djangocfg/centrifugo 1.4.36 → 2.1.1

package/README.md

@@ -844,7 +844,7 @@ pnpm dev
 ## Requirements
 
 - React 18+
-- `@djangocfg/ui` - UI components (shadcn/ui based)
+- `@djangocfg/ui-nextjs` - UI components (shadcn/ui based)
 - `@djangocfg/layouts` - Layout components
 - `centrifuge` - WebSocket client library
 - `moment` - Date manipulation library

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/centrifugo",
-  "version": "1.4.36",
+  "version": "2.1.1",
   "description": "Production-ready Centrifugo WebSocket client for React with real-time subscriptions, RPC patterns, and connection state management",
   "keywords": [
     "centrifugo",
@@ -51,20 +51,20 @@
     "centrifuge": "^5.2.2"
   },
   "peerDependencies": {
-    "@djangocfg/ui": "^1.4.36",
-    "@djangocfg/layouts": "^2.0.6",
+    "@djangocfg/ui-nextjs": "^2.1.1",
+    "@djangocfg/layouts": "^2.1.1",
     "consola": "^3.4.2",
-    "lucide-react": "^0.468.0",
+    "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.4.36",
-    "@types/react": "^19.0.6",
-    "@types/react-dom": "^19.0.2",
+    "@djangocfg/typescript-config": "^2.1.1",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
     "moment": "^2.30.1",
-    "typescript": "^5.7.3"
+    "typescript": "^5.9.3"
   },
   "publishConfig": {
     "access": "public"

package/src/components/CentrifugoMonitor/CentrifugoMonitor.tsx

@@ -8,7 +8,7 @@
 'use client';
 
 import React from 'react';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@djangocfg/ui';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@djangocfg/ui-nextjs';
 import { ConnectionStatus } from '../ConnectionStatus';
 import { MessagesFeed } from '../MessagesFeed';
 import { SubscriptionsList } from '../SubscriptionsList';

package/src/components/CentrifugoMonitor/CentrifugoMonitorDialog.tsx

@@ -15,7 +15,7 @@ import {
   SheetTitle,
   SheetDescription,
   useEventListener,
-} from '@djangocfg/ui';
+} from '@djangocfg/ui-nextjs';
 import { Activity } from 'lucide-react';
 import { CentrifugoMonitor } from './CentrifugoMonitor';
 import { CENTRIFUGO_MONITOR_EVENTS, type OpenMonitorDialogPayload } from '../../events';

package/src/components/CentrifugoMonitor/CentrifugoMonitorWidget.tsx

@@ -8,7 +8,7 @@
 'use client';
 
 import React from 'react';
-import { Card, CardContent, CardHeader, CardTitle, Button } from '@djangocfg/ui';
+import { Card, CardContent, CardHeader, CardTitle, Button } from '@djangocfg/ui-nextjs';
 import { Activity, Maximize2 } from 'lucide-react';
 import { ConnectionStatus } from '../ConnectionStatus';
 import { emitOpenMonitorDialog } from '../../events';

package/src/components/ConnectionStatus/ConnectionStatus.tsx

@@ -8,7 +8,7 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import { Badge } from '@djangocfg/ui';
+import { Badge } from '@djangocfg/ui-nextjs';
 import { Wifi, WifiOff, Radio, Clock } from 'lucide-react';
 import moment from 'moment';
 import { useCentrifugo } from '../../providers/CentrifugoProvider';

package/src/components/ConnectionStatus/ConnectionStatusCard.tsx

@@ -8,7 +8,7 @@
 'use client';
 
 import React from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@djangocfg/ui';
+import { Card, CardContent, CardHeader, CardTitle } from '@djangocfg/ui-nextjs';
 import { Wifi, WifiOff } from 'lucide-react';
 import { useCentrifugo } from '../../providers/CentrifugoProvider';
 import { ConnectionStatus } from './ConnectionStatus';

package/src/components/MessagesFeed/MessageFilters.tsx

@@ -7,7 +7,7 @@
 'use client';
 
 import React from 'react';
-import { Input, Badge, Button } from '@djangocfg/ui';
+import { Input, Badge, Button } from '@djangocfg/ui-nextjs';
 import { Search, Filter, X } from 'lucide-react';
 import type { MessageFilters as MessageFiltersType } from './types';
 

package/src/components/MessagesFeed/MessagesFeed.tsx

@@ -16,7 +16,7 @@ import {
   Badge,
   Button,
   ScrollArea,
-} from '@djangocfg/ui';
+} from '@djangocfg/ui-nextjs';
 import {
   Trash2,
   Pause,
@@ -324,7 +324,7 @@ export function MessagesFeed({
           />
         )}
 
-        <ScrollArea className="h-[400px]" ref={scrollRef}>
+        <ScrollArea className="h-[400px]" viewportRef={scrollRef}>
           {filteredMessages.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-12 text-center">
               <Activity className="h-12 w-12 text-muted-foreground mb-4" />

package/src/components/SubscriptionsList/SubscriptionsList.tsx

@@ -15,7 +15,7 @@ import {
   Badge,
   Button,
   ScrollArea,
-} from '@djangocfg/ui';
+} from '@djangocfg/ui-nextjs';
 import { Radio, RefreshCw, Trash2 } from 'lucide-react';
 import { Subscription, SubscriptionState } from 'centrifuge';
 import { useCentrifugo } from '../../providers/CentrifugoProvider';

package/src/config.ts

@@ -8,9 +8,30 @@ export const isStaticBuild = process.env.NEXT_PHASE === 'phase-production-build'
 
 const showDebugPanel = isDevelopment && !isStaticBuild;
 
+/**
+ * Reconnect configuration with exponential backoff
+ */
+export const reconnectConfig = {
+  // Initial delay before first reconnect attempt (ms)
+  initialDelay: isDevelopment ? 2000 : 1000,
+  // Maximum delay between reconnect attempts (ms)
+  maxDelay: isDevelopment ? 30000 : 60000,
+  // Multiplier for exponential backoff
+  multiplier: 1.5,
+  // Maximum number of reconnect attempts
+  // Dev: 3 attempts then stop (server probably not running)
+  // Prod: 10 attempts then stop (avoid infinite reconnection spam)
+  maxAttempts: isDevelopment ? 3 : 10,
+  // Jitter factor to randomize delays (0-1)
+  jitter: 0.1,
+} as const;
+
 export const centrifugoConfig = {
   // Show debug panel only in development and not in static builds
   showDebugPanel,
+  // Reconnect settings
+  reconnect: reconnectConfig,
 } as const;
 
 export type CentrifugoConfig = typeof centrifugoConfig;
+export type ReconnectConfig = typeof reconnectConfig;

package/src/debug/ConnectionTab/ConnectionTab.tsx

@@ -15,7 +15,7 @@ import {
   Badge,
   Button,
   Separator,
-} from '@djangocfg/ui';
+} from '@djangocfg/ui-nextjs';
 import { useCentrifugo } from '../../providers/CentrifugoProvider';
 
 // ─────────────────────────────────────────────────────────────────────────

package/src/debug/DebugPanel/DebugPanel.tsx

@@ -19,7 +19,7 @@ import {
   TabsList,
   TabsTrigger,
   TabsContent,
-} from '@djangocfg/ui';
+} from '@djangocfg/ui-nextjs';
 import { ConnectionTab } from '../ConnectionTab';
 import { LogsTab } from '../LogsTab';
 import { SubscriptionsTab } from '../SubscriptionsTab';

package/src/debug/LogsTab/LogsTab.tsx

@@ -25,7 +25,7 @@ import {
   ScrollArea,
   Badge,
   PrettyCode,
-} from '@djangocfg/ui';
+} from '@djangocfg/ui-nextjs';
 import { useLogs } from '../../providers/LogsProvider';
 import type { LogLevel, LogEntry } from '../../core/types';
 
@@ -181,7 +181,7 @@ export function LogsTab() {
       {/* Logs Viewer (Bash-like) */}
       <Card>
         <CardContent className="p-0">
-          <ScrollArea ref={scrollRef} className="h-[400px] w-full">
+          <ScrollArea viewportRef={scrollRef} className="h-[400px] w-full">
             <div className="p-4 font-mono text-xs space-y-1 bg-slate-950 text-slate-50">
               {filteredLogs.length === 0 ? (
                 <div className="text-slate-500 text-center py-8">

package/src/debug/SubscriptionsTab/SubscriptionsTab.tsx

@@ -17,7 +17,7 @@ import {
   Button,
   ScrollArea,
   Separator,
-} from '@djangocfg/ui';
+} from '@djangocfg/ui-nextjs';
 import { useCentrifugo } from '../../providers/CentrifugoProvider';
 
 // ─────────────────────────────────────────────────────────────────────────

package/src/events.ts

@@ -4,7 +4,7 @@
  * Event-driven communication for Centrifugo monitor dialog
  */
 
-import { events } from '@djangocfg/ui';
+import { events } from '@djangocfg/ui-nextjs';
 
 // ─────────────────────────────────────────────────────────────────────────
 // Event Types

package/src/providers/CentrifugoProvider/CentrifugoProvider.tsx

@@ -13,7 +13,7 @@ import { CentrifugoRPCClient } from '../../core/client';
 import { createLogger } from '../../core/logger';
 import type { ConnectionState, CentrifugoToken, ActiveSubscription } from '../../core/types';
 import { LogsProvider } from '../LogsProvider';
-import { isStaticBuild } from '../../config';
+import { isStaticBuild, isDevelopment, reconnectConfig } from '../../config';
 import { CentrifugoMonitorDialog } from '../../components/CentrifugoMonitor/CentrifugoMonitorDialog';
 
 // ─────────────────────────────────────────────────────────────────────────
@@ -85,10 +85,32 @@ function CentrifugoProviderInner({
   const hasConnectedRef = useRef(false);
   const isConnectingRef = useRef(false);
   const isMountedRef = useRef(true);
+  const reconnectAttemptRef = useRef(0);
+  const devWarningShownRef = useRef(false);
+  const reconnectStoppedRef = useRef(false); // Track if we should stop reconnecting
+  const connectRef = useRef<(() => Promise<void>) | null>(null);
+  const disconnectRef = useRef<(() => void) | null>(null);
 
   const centrifugoToken: CentrifugoToken | undefined = user?.centrifugo;
   const hasCentrifugoToken = !!centrifugoToken?.token;
 
+  // Calculate reconnect delay with exponential backoff
+  const getReconnectDelay = useCallback((attempt: number): number => {
+    const { initialDelay, maxDelay, multiplier, jitter } = reconnectConfig;
+
+    // Exponential backoff: initialDelay * multiplier^attempt
+    let delay = initialDelay * Math.pow(multiplier, attempt);
+
+    // Cap at maxDelay
+    delay = Math.min(delay, maxDelay);
+
+    // Add jitter to prevent thundering herd
+    const jitterAmount = delay * jitter * (Math.random() * 2 - 1);
+    delay = Math.round(delay + jitterAmount);
+
+    return delay;
+  }, []);
+
   const wsUrl = useMemo(() => {
     if (url) return url;
     if (centrifugoToken?.centrifugo_url) return centrifugoToken.centrifugo_url;
@@ -165,6 +187,8 @@ function CentrifugoProviderInner({
 
   // Connect function
   const connect = useCallback(async () => {
+    // Don't reconnect if we've decided to stop (dev mode hit max attempts)
+    if (reconnectStoppedRef.current) return;
     if (hasConnectedRef.current || isConnectingRef.current) return;
     if (isConnecting || isConnected) return;
 
@@ -203,12 +227,23 @@ function CentrifugoProviderInner({
       hasConnectedRef.current = true;
       isConnectingRef.current = false;
 
+      // Clear any pending reconnect timeout
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+        reconnectTimeoutRef.current = null;
+      }
+
       setClient(rpcClient);
       setIsConnected(true);
       setConnectionTime(new Date());
       setError(null);
 
       logger.success('WebSocket connected');
+
+      // Reset reconnect state on successful connection
+      reconnectAttemptRef.current = 0;
+      devWarningShownRef.current = false;
+      reconnectStoppedRef.current = false;
     } catch (err) {
       const error = err instanceof Error ? err : new Error('Connection failed');
       setError(error);
@@ -225,16 +260,51 @@ function CentrifugoProviderInner({
       if (isAuthError) {
         logger.error('Authentication failed', error);
       } else {
-        logger.error('Connection failed', error);
-        reconnectTimeoutRef.current = setTimeout(() => {
-          logger.info('Attempting to reconnect...');
-          connect();
-        }, 5000);
+        // Check if we should attempt reconnect
+        const { maxAttempts } = reconnectConfig;
+        const currentAttempt = reconnectAttemptRef.current;
+
+        // In dev mode: show warning once and stop after maxAttempts
+        if (isDevelopment) {
+          if (!devWarningShownRef.current) {
+            devWarningShownRef.current = true;
+            logger.warning(
+              '🔌 Centrifugo server is not running. ' +
+              'Start it with: docker compose -f docker-compose-local-services.yml up centrifugo'
+            );
+          }
+
+          // Stop reconnecting after maxAttempts in dev mode
+          if (maxAttempts > 0 && currentAttempt >= maxAttempts) {
+            reconnectStoppedRef.current = true; // Mark as stopped permanently
+            logger.info(`Stopped reconnecting after ${maxAttempts} attempts (dev mode)`);
+            return;
+          }
+        }
+
+        // Try to reconnect with exponential backoff (respects maxAttempts)
+        if (currentAttempt < maxAttempts) {
+          const delay = getReconnectDelay(currentAttempt);
+          reconnectAttemptRef.current = currentAttempt + 1;
+
+          if (!isDevelopment || currentAttempt < 2) {
+            // Only log in prod, or first 2 attempts in dev
+            logger.info(`Reconnecting in ${Math.round(delay / 1000)}s (attempt ${currentAttempt + 1}/${maxAttempts})...`);
+          }
+
+          reconnectTimeoutRef.current = setTimeout(() => {
+            connectRef.current?.();
+          }, delay);
+        } else {
+          // Max attempts reached - stop reconnecting
+          reconnectStoppedRef.current = true;
+          logger.warning(`Stopped reconnecting after ${maxAttempts} attempts. WebSocket server may be unavailable.`);
+        }
       }
     } finally {
       setIsConnecting(false);
     }
-  }, [wsUrl, centrifugoToken, user, logger, isConnecting, isConnected]);
+  }, [wsUrl, centrifugoToken, user, logger, isConnecting, isConnected, getReconnectDelay]);
 
   // Disconnect function
   const disconnect = useCallback(() => {
@@ -257,6 +327,9 @@ function CentrifugoProviderInner({
 
     hasConnectedRef.current = false;
     isConnectingRef.current = false;
+    reconnectAttemptRef.current = 0;
+    devWarningShownRef.current = false;
+    reconnectStoppedRef.current = false; // Reset so manual reconnect works
   }, [client, logger]);
 
   // Reconnect function
@@ -284,12 +357,16 @@ function CentrifugoProviderInner({
     }
   }, [client, logger]);
 
-  // Auto-connect on mount
+  // Keep refs up-to-date
+  connectRef.current = connect;
+  disconnectRef.current = disconnect;
+
+  // Auto-connect on mount - uses refs to avoid recreation issues
   useEffect(() => {
     isMountedRef.current = true;
 
-    if (autoConnect && !hasConnectedRef.current) {
-      connect();
+    if (autoConnect && !hasConnectedRef.current && !reconnectStoppedRef.current) {
+      connectRef.current?.();
     }
 
     return () => {
@@ -302,9 +379,9 @@ function CentrifugoProviderInner({
       }
 
       isMountedRef.current = false;
-      disconnect();
+      disconnectRef.current?.();
     };
-  }, [autoConnect, connect, disconnect]);
+  }, [autoConnect]); // Only depend on autoConnect, not on connect/disconnect
 
   const connectionState: ConnectionState = isConnected
     ? 'connected'