@djangocfg/centrifugo 1.0.3 → 1.0.4

package/src/hooks/useSubscription.ts

@@ -2,6 +2,12 @@
  * useSubscription Hook
  *
  * Subscribe to Centrifugo channel with auto-cleanup.
+ * 
+ * Best practices:
+ * - Callbacks are stored in refs to avoid re-subscriptions
+ * - Proper error handling in callbacks (as recommended by centrifuge-js)
+ * - Cleanup on unmount
+ * - Stable unsubscribe function
  */
 
 'use client';
@@ -35,21 +41,38 @@ export function useSubscription<T = any>(
   const [isSubscribed, setIsSubscribed] = useState(false);
 
   const unsubscribeRef = useRef<(() => void) | null>(null);
-  const logger = useRef(createLogger({ source: 'subscription' })).current;
+  const logger = useRef(createLogger('useSubscription')).current;
+  
+  // Store callbacks in refs to avoid re-subscriptions when they change
+  const onPublicationRef = useRef(onPublication);
+  const onErrorRef = useRef(onError);
+  
+  useEffect(() => {
+    onPublicationRef.current = onPublication;
+    onErrorRef.current = onError;
+  }, [onPublication, onError]);
 
   // Unsubscribe function
   const unsubscribe = useCallback(() => {
     if (unsubscribeRef.current) {
-      unsubscribeRef.current();
-      unsubscribeRef.current = null;
-      setIsSubscribed(false);
-      logger.info(`Unsubscribed from channel: ${channel}`);
+      try {
+        unsubscribeRef.current();
+        unsubscribeRef.current = null;
+        setIsSubscribed(false);
+        logger.info(`Unsubscribed from channel: ${channel}`);
+      } catch (err) {
+        logger.error(`Error during unsubscribe from ${channel}`, err);
+      }
     }
   }, [channel, logger]);
 
   // Subscribe effect
   useEffect(() => {
     if (!client || !isConnected || !enabled) {
+      // Reset state when not connected
+      if (!isConnected && isSubscribed) {
+        setIsSubscribed(false);
+      }
       return;
     }
 
@@ -57,9 +80,14 @@ export function useSubscription<T = any>(
 
     try {
       const unsub = client.subscribe(channel, (receivedData: T) => {
-        setData(receivedData);
-        setError(null);
-        onPublication?.(receivedData);
+        try {
+          // Error handling in callback as recommended by centrifuge-js docs
+          setData(receivedData);
+          setError(null);
+          onPublicationRef.current?.(receivedData);
+        } catch (callbackError) {
+          logger.error(`Error in onPublication callback for ${channel}`, callbackError);
+        }
       });
 
       unsubscribeRef.current = unsub;
@@ -68,7 +96,13 @@ export function useSubscription<T = any>(
     } catch (err) {
       const subscriptionError = err instanceof Error ? err : new Error('Subscription failed');
       setError(subscriptionError);
-      onError?.(subscriptionError);
+      
+      try {
+        onErrorRef.current?.(subscriptionError);
+      } catch (callbackError) {
+        logger.error(`Error in onError callback for ${channel}`, callbackError);
+      }
+      
       logger.error(`Subscription failed: ${channel}`, subscriptionError);
     }
 
@@ -76,7 +110,7 @@ export function useSubscription<T = any>(
     return () => {
       unsubscribe();
     };
-  }, [client, isConnected, enabled, channel, onPublication, onError, unsubscribe, logger]);
+  }, [client, isConnected, enabled, channel, unsubscribe, logger, isSubscribed]);
 
   return {
     data,

package/src/index.ts

@@ -100,9 +100,8 @@ export { centrifugoConfig, isDevelopment, isProduction, isStaticBuild } from './
 export type { CentrifugoConfig } from './config';
 
 // ─────────────────────────────────────────────────────────────────────────
-// Debug UI (Embedded in Provider, not for direct use)
+// Components (Universal, composable monitoring components)
 // ─────────────────────────────────────────────────────────────────────────
 
-// Note: DebugPanel is now automatically embedded in CentrifugoProvider
-// It shows automatically in development or for admin users
-// No need to manually add <DebugPanel /> to your app
+export * from './components';
+export * from './debug';

package/src/providers/CentrifugoProvider/CentrifugoProvider.tsx

@@ -7,18 +7,13 @@
 
 'use client';
 
-import { createContext, useContext, useState, useEffect, useCallback, useRef, useMemo, lazy, Suspense, type ReactNode } from 'react';
+import { createContext, useContext, useState, useEffect, useCallback, useRef, useMemo, type ReactNode } from 'react';
 import { useAuth } from '@djangocfg/layouts';
 import { CentrifugoRPCClient } from '../../core/client';
 import { createLogger } from '../../core/logger';
 import type { ConnectionState, CentrifugoToken } from '../../core/types';
 import { LogsProvider } from '../LogsProvider';
-import { isDevelopment, isStaticBuild } from '../../config';
-
-// Lazy load DebugPanel to reduce bundle size
-const DebugPanel = lazy(() =>
-  import('../../debug/DebugPanel').then((m) => ({ default: m.DebugPanel }))
-);
+import { isStaticBuild } from '../../config';
 
 // ─────────────────────────────────────────────────────────────────────────
 // Context
@@ -72,7 +67,7 @@ function CentrifugoProviderInner({
   url,
   autoConnect: autoConnectProp = true,
 }: CentrifugoProviderProps) {
-  const { isAuthenticated, isLoading, user, isAdminUser } = useAuth();
+  const { isAuthenticated, isLoading, user } = useAuth();
 
   const [client, setClient] = useState<CentrifugoRPCClient | null>(null);
   const [isConnected, setIsConnected] = useState(false);
@@ -334,21 +329,9 @@ function CentrifugoProviderInner({
     enabled,
   };
 
-  // Smart DebugPanel visibility:
-  // - Show in development mode
-  // - Show for admin users
-  const showDebugPanel = useMemo(() => {
-    return isDevelopment || isAdminUser;
-  }, [isAdminUser]);
-
   return (
     <CentrifugoContext.Provider value={value}>
       {children}
-      {showDebugPanel && (
-        <Suspense fallback={null}>
-          <DebugPanel />
-        </Suspense>
-      )}
     </CentrifugoContext.Provider>
   );
 }