@djangocfg/centrifugo 1.0.2 → 1.0.4

package/src/hooks/useRPC.ts

@@ -0,0 +1,149 @@
+/**
+ * useRPC Hook
+ *
+ * React hook for making RPC calls via Centrifugo using correlation ID pattern.
+ * Provides type-safe request-response communication over WebSocket.
+ * 
+ * Pattern:
+ * 1. Client sends request with correlation_id to rpc#{method}
+ * 2. Backend processes and sends response to user#{userId} with same correlation_id
+ * 3. Client matches response by correlation_id and resolves Promise
+ * 
+ * @example
+ * const { call, isLoading, error } = useRPC();
+ * 
+ * const handleGetStats = async () => {
+ *   const result = await call('tasks.get_stats', { bot_id: '123' });
+ *   console.log('Stats:', result);
+ * };
+ */
+
+'use client';
+
+import { useState, useCallback, useRef } from 'react';
+import { useCentrifugo } from '../providers/CentrifugoProvider';
+import { createLogger } from '../core/logger';
+
+export interface UseRPCOptions {
+  timeout?: number;
+  replyChannel?: string;
+  onError?: (error: Error) => void;
+}
+
+export interface UseRPCResult {
+  call: <TRequest = any, TResponse = any>(
+    method: string,
+    params: TRequest,
+    options?: UseRPCOptions
+  ) => Promise<TResponse>;
+  isLoading: boolean;
+  error: Error | null;
+  reset: () => void;
+}
+
+export function useRPC(defaultOptions: UseRPCOptions = {}): UseRPCResult {
+  const { client, isConnected } = useCentrifugo();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  
+  const logger = useRef(createLogger('useRPC')).current;
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const reset = useCallback(() => {
+    setIsLoading(false);
+    setError(null);
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+  }, []);
+
+  const call = useCallback(
+    async <TRequest = any, TResponse = any>(
+      method: string,
+      params: TRequest,
+      options: UseRPCOptions = {}
+    ): Promise<TResponse> => {
+      if (!client) {
+        const error = new Error('Centrifugo client not available');
+        setError(error);
+        throw error;
+      }
+
+      if (!isConnected) {
+        const error = new Error('Not connected to Centrifugo');
+        setError(error);
+        throw error;
+      }
+
+      // Reset previous state
+      setError(null);
+      setIsLoading(true);
+
+      // Create abort controller for this call
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+
+      try {
+        const mergedOptions = {
+          ...defaultOptions,
+          ...options,
+        };
+
+        logger.info(`RPC call: ${method}`, { params });
+
+        const result = await client.rpc<TRequest, TResponse>(
+          method,
+          params,
+          {
+            timeout: mergedOptions.timeout,
+            replyChannel: mergedOptions.replyChannel,
+          }
+        );
+
+        // Check if aborted
+        if (abortController.signal.aborted) {
+          throw new Error('RPC call aborted');
+        }
+
+        logger.success(`RPC success: ${method}`);
+        setIsLoading(false);
+        return result;
+      } catch (err) {
+        const rpcError = err instanceof Error ? err : new Error('RPC call failed');
+        
+        // Don't set error if aborted
+        if (!abortController.signal.aborted) {
+          setError(rpcError);
+          logger.error(`RPC failed: ${method}`, rpcError);
+          
+          // Call error callback if provided
+          const onError = options.onError || defaultOptions.onError;
+          if (onError) {
+            try {
+              onError(rpcError);
+            } catch (callbackError) {
+              logger.error('Error in onError callback', callbackError);
+            }
+          }
+        }
+        
+        setIsLoading(false);
+        throw rpcError;
+      } finally {
+        if (abortControllerRef.current === abortController) {
+          abortControllerRef.current = null;
+        }
+      }
+    },
+    [client, isConnected, defaultOptions, logger]
+  );
+
+  return {
+    call,
+    isLoading,
+    error,
+    reset,
+  };
+}
+

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,22 +329,9 @@ function CentrifugoProviderInner({
     enabled,
   };
 
-  // Smart DebugPanel visibility:
-  // - Show in development mode (not static build)
-  // - Always show for admin users (staff or superuser)
-  const showDebugPanel = useMemo(() => {
-    const devMode = isDevelopment && !isStaticBuild;
-    return devMode || isAdminUser;
-  }, [isAdminUser]);
-
   return (
     <CentrifugoContext.Provider value={value}>
       {children}
-      {showDebugPanel && (
-        <Suspense fallback={null}>
-          <DebugPanel />
-        </Suspense>
-      )}
     </CentrifugoContext.Provider>
   );
 }