@djangocfg/layouts 2.1.49 → 2.1.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.49",
+  "version": "2.1.51",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -92,9 +92,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.49",
-    "@djangocfg/centrifugo": "^2.1.49",
-    "@djangocfg/ui-nextjs": "^2.1.49",
+    "@djangocfg/api": "^2.1.51",
+    "@djangocfg/centrifugo": "^2.1.51",
+    "@djangocfg/ui-nextjs": "^2.1.51",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -116,7 +116,7 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.49",
+    "@djangocfg/typescript-config": "^2.1.51",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/errors/ErrorsTracker/components/ErrorButtons.tsx

@@ -13,18 +13,21 @@ import { Button, useCopy } from '@djangocfg/ui-nextjs';
 
 import { generateCurlFromError } from '../utils/curl-generator';
 import {
-    formatCORSErrorForClipboard, formatNetworkErrorForClipboard, formatValidationErrorForClipboard
+    formatCentrifugoErrorForClipboard,
+    formatCORSErrorForClipboard,
+    formatNetworkErrorForClipboard,
+    formatValidationErrorForClipboard
 } from '../utils/formatters';
 
-import type { ValidationErrorDetail, CORSErrorDetail, NetworkErrorDetail } from '../types';
+import type { ValidationErrorDetail, CORSErrorDetail, NetworkErrorDetail, CentrifugoErrorDetail } from '../types';
 export interface ErrorButtonsProps {
-  detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail;
+  detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail | CentrifugoErrorDetail;
 }
 
 /**
  * Format error for clipboard based on type
  */
-function formatErrorForClipboard(detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail): string {
+function formatErrorForClipboard(detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail | CentrifugoErrorDetail): string {
   switch (detail.type) {
     case 'validation':
       return formatValidationErrorForClipboard(detail);
@@ -32,6 +35,8 @@ function formatErrorForClipboard(detail: ValidationErrorDetail | CORSErrorDetail
       return formatCORSErrorForClipboard(detail);
     case 'network':
       return formatNetworkErrorForClipboard(detail);
+    case 'centrifugo':
+      return formatCentrifugoErrorForClipboard(detail);
     default:
       return JSON.stringify(detail, null, 2);
   }
@@ -40,7 +45,7 @@ function formatErrorForClipboard(detail: ValidationErrorDetail | CORSErrorDetail
 /**
  * Check if error supports cURL generation
  */
-function supportsCurl(detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail): boolean {
+function supportsCurl(detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail | CentrifugoErrorDetail): boolean {
   return detail.type === 'validation';
 }
 

package/src/components/errors/ErrorsTracker/components/ErrorToast.tsx

@@ -15,9 +15,11 @@ import type {
   ValidationErrorDetail,
   CORSErrorDetail,
   NetworkErrorDetail,
+  CentrifugoErrorDetail,
   ValidationErrorConfig,
   CORSErrorConfig,
   NetworkErrorConfig,
+  CentrifugoErrorConfig,
 } from '../types';
 /**
  * Build validation error description
@@ -133,12 +135,46 @@ function buildNetworkDescription(
   );
 }
 
+/**
+ * Build centrifugo error description
+ */
+function buildCentrifugoDescription(
+  detail: CentrifugoErrorDetail,
+  config: Required<CentrifugoErrorConfig>
+): React.ReactNode {
+  const parts: string[] = [];
+
+  // Add method info
+  if (config.showMethod) {
+    parts.push(`RPC: ${detail.method}`);
+  }
+
+  // Add error code
+  if (config.showCode && detail.code !== undefined) {
+    parts.push(`Code: ${detail.code}`);
+  }
+
+  return (
+    <div className="flex flex-col gap-2 text-sm">
+      {parts.length > 0 && (
+        <div className="font-mono text-xs opacity-90">
+          {parts.join(' • ')}
+        </div>
+      )}
+
+      <div className="opacity-90">{detail.error}</div>
+
+      <ErrorButtons detail={detail} />
+    </div>
+  );
+}
+
 /**
  * Create toast options for any error type
  */
 export function createErrorToast(
-  detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail,
-  config: Required<ValidationErrorConfig | CORSErrorConfig | NetworkErrorConfig>
+  detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail | CentrifugoErrorDetail,
+  config: Required<ValidationErrorConfig | CORSErrorConfig | NetworkErrorConfig | CentrifugoErrorConfig>
 ) {
   let description: React.ReactNode;
 
@@ -147,6 +183,8 @@ export function createErrorToast(
     description = buildValidationDescription(detail, config as Required<ValidationErrorConfig>);
   } else if (detail.type === 'cors') {
     description = buildCORSDescription(detail, config as Required<CORSErrorConfig>);
+  } else if (detail.type === 'centrifugo') {
+    description = buildCentrifugoDescription(detail, config as Required<CentrifugoErrorConfig>);
   } else {
     description = buildNetworkDescription(detail, config as Required<NetworkErrorConfig>);
   }

package/src/components/errors/ErrorsTracker/index.ts

@@ -1,7 +1,7 @@
 /**
  * Error Tracking - Unified error tracking for all error types
  *
- * Single provider and hook for validation, CORS, and network errors
+ * Single provider and hook for validation, CORS, network, and Centrifugo errors
  */
 
 // Main provider and hook
@@ -14,11 +14,13 @@ export type {
   ValidationErrorDetail,
   CORSErrorDetail,
   NetworkErrorDetail,
+  CentrifugoErrorDetail,
   StoredError,
   ErrorTrackingConfig,
   ValidationErrorConfig,
   CORSErrorConfig,
   NetworkErrorConfig,
+  CentrifugoErrorConfig,
   ErrorTrackingContextValue,
 } from './types';
 
@@ -32,6 +34,7 @@ export {
   formatValidationErrorForClipboard,
   formatCORSErrorForClipboard,
   formatNetworkErrorForClipboard,
+  formatCentrifugoErrorForClipboard,
   formatErrorTitle,
   extractDomain,
 } from './utils/formatters';

package/src/components/errors/ErrorsTracker/providers/ErrorTrackingProvider.tsx

@@ -34,7 +34,11 @@ import { toast } from 'sonner';
 
 import { createErrorToast } from '../components/ErrorToast';
 import {
-    DEFAULT_CORS_CONFIG, DEFAULT_NETWORK_CONFIG, DEFAULT_VALIDATION_CONFIG, ERROR_EVENTS
+    DEFAULT_CENTRIFUGO_CONFIG,
+    DEFAULT_CORS_CONFIG,
+    DEFAULT_NETWORK_CONFIG,
+    DEFAULT_VALIDATION_CONFIG,
+    ERROR_EVENTS
 } from '../types';
 
 import type {
@@ -44,9 +48,11 @@ import type {
   ValidationErrorConfig,
   CORSErrorConfig,
   NetworkErrorConfig,
+  CentrifugoErrorConfig,
   ValidationErrorDetail,
   CORSErrorDetail,
   NetworkErrorDetail,
+  CentrifugoErrorDetail,
   ErrorTrackingContextValue,
 } from '../types';
 const ErrorTrackingContext = createContext<ErrorTrackingContextValue | undefined>(undefined);
@@ -64,6 +70,7 @@ export interface ErrorTrackingProviderProps {
   validation?: Partial<ValidationErrorConfig>;
   cors?: Partial<CORSErrorConfig>;
   network?: Partial<NetworkErrorConfig>;
+  centrifugo?: Partial<CentrifugoErrorConfig>;
   onError?: (error: ErrorDetail) => boolean | void;
 }
 
@@ -77,6 +84,7 @@ export function ErrorTrackingProvider({
   validation: userValidationConfig,
   cors: userCorsConfig,
   network: userNetworkConfig,
+  centrifugo: userCentrifugoConfig,
   onError,
 }: ErrorTrackingProviderProps) {
   const [errors, setErrors] = useState<StoredError[]>([]);
@@ -97,6 +105,11 @@ export function ErrorTrackingProvider({
     ...userNetworkConfig,
   };
 
+  const centrifugoConfig: Required<CentrifugoErrorConfig> = {
+    ...DEFAULT_CENTRIFUGO_CONFIG,
+    ...userCentrifugoConfig,
+  };
+
   /**
    * Clear all errors
    */
@@ -122,7 +135,7 @@ export function ErrorTrackingProvider({
    * Handle any error event
    */
   const handleError = useCallback(
-    (detail: ErrorDetail, config: Required<ValidationErrorConfig | CORSErrorConfig | NetworkErrorConfig>) => {
+    (detail: ErrorDetail, config: Required<ValidationErrorConfig | CORSErrorConfig | NetworkErrorConfig | CentrifugoErrorConfig>) => {
       // Create stored error with ID
       const storedError: StoredError = {
         ...detail,
@@ -201,24 +214,40 @@ export function ErrorTrackingProvider({
       handlers.push({ event: ERROR_EVENTS.NETWORK, handler });
     }
 
+    // Centrifugo errors
+    if (centrifugoConfig.enabled) {
+      const handler = (event: Event) => {
+        if (!(event instanceof CustomEvent)) return;
+        const detail: CentrifugoErrorDetail = {
+          ...event.detail,
+          type: 'centrifugo' as const,
+        };
+        handleError(detail, centrifugoConfig);
+      };
+      window.addEventListener(ERROR_EVENTS.CENTRIFUGO, handler);
+      handlers.push({ event: ERROR_EVENTS.CENTRIFUGO, handler });
+    }
+
     // Cleanup
     return () => {
       handlers.forEach(({ event, handler }) => {
         window.removeEventListener(event, handler);
       });
     };
-  }, [handleError, validationConfig, corsConfig, networkConfig]);
+  }, [handleError, validationConfig, corsConfig, networkConfig, centrifugoConfig]);
 
   // Filter errors by type
   const validationErrors = errors.filter((e) => e.type === 'validation') as StoredError<ValidationErrorDetail>[];
   const corsErrors = errors.filter((e) => e.type === 'cors') as StoredError<CORSErrorDetail>[];
   const networkErrors = errors.filter((e) => e.type === 'network') as StoredError<NetworkErrorDetail>[];
+  const centrifugoErrors = errors.filter((e) => e.type === 'centrifugo') as StoredError<CentrifugoErrorDetail>[];
 
   const value: ErrorTrackingContextValue = {
     errors,
     validationErrors,
     corsErrors,
     networkErrors,
+    centrifugoErrors,
     clearErrors,
     clearErrorsByType,
     clearError,
@@ -228,6 +257,7 @@ export function ErrorTrackingProvider({
       validation: validationConfig,
       cors: corsConfig,
       network: networkConfig,
+      centrifugo: centrifugoConfig,
     },
   };
 

package/src/components/errors/ErrorsTracker/types.ts

@@ -59,10 +59,25 @@ export interface NetworkErrorDetail extends BaseErrorDetail {
   statusCode?: number;
 }
 
+/**
+ * Centrifugo error detail (from centrifugo-error event)
+ */
+export interface CentrifugoErrorDetail extends BaseErrorDetail {
+  type: 'centrifugo';
+  /** RPC method that failed */
+  method: string;
+  /** Error message */
+  error: string;
+  /** Error code from Centrifugo */
+  code?: number;
+  /** Additional data sent with the request */
+  data?: any;
+}
+
 /**
  * Union type of all error details
  */
-export type ErrorDetail = ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail;
+export type ErrorDetail = ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail | CentrifugoErrorDetail;
 
 /**
  * Stored error with unique ID
@@ -170,6 +185,23 @@ export interface NetworkErrorConfig extends ErrorTypeConfig {
   showStatusCode?: boolean;
 }
 
+/**
+ * Centrifugo error specific config
+ */
+export interface CentrifugoErrorConfig extends ErrorTypeConfig {
+  /**
+   * Show RPC method in toast
+   * @default true
+   */
+  showMethod?: boolean;
+
+  /**
+   * Show error code in toast
+   * @default true
+   */
+  showCode?: boolean;
+}
+
 /**
  * Complete error tracking configuration
  */
@@ -189,6 +221,11 @@ export interface ErrorTrackingConfig {
    */
   network?: NetworkErrorConfig;
 
+  /**
+   * Centrifugo error tracking configuration
+   */
+  centrifugo?: CentrifugoErrorConfig;
+
   /**
    * Custom error handler (called before toast for all errors)
    * Return false to prevent default toast notification
@@ -212,11 +249,14 @@ export interface ErrorTrackingContextValue {
   /** Network errors only */
   networkErrors: StoredError<NetworkErrorDetail>[];
 
+  /** Centrifugo errors only */
+  centrifugoErrors: StoredError<CentrifugoErrorDetail>[];
+
   /** Clear all errors */
   clearErrors: () => void;
 
   /** Clear errors by type */
-  clearErrorsByType: (type: 'validation' | 'cors' | 'network') => void;
+  clearErrorsByType: (type: 'validation' | 'cors' | 'network' | 'centrifugo') => void;
 
   /** Clear specific error by ID */
   clearError: (id: string) => void;
@@ -232,6 +272,7 @@ export interface ErrorTrackingContextValue {
     validation: Required<ValidationErrorConfig>;
     cors: Required<CORSErrorConfig>;
     network: Required<NetworkErrorConfig>;
+    centrifugo: Required<CentrifugoErrorConfig>;
   };
 }
 
@@ -242,6 +283,7 @@ export const ERROR_EVENTS = {
   VALIDATION: 'zod-validation-error',
   CORS: 'cors-error',
   NETWORK: 'network-error',
+  CENTRIFUGO: 'centrifugo-error',
 } as const;
 
 /**
@@ -276,3 +318,10 @@ export const DEFAULT_NETWORK_CONFIG: Required<NetworkErrorConfig> = {
   showMethod: true,
   showStatusCode: true,
 };
+
+export const DEFAULT_CENTRIFUGO_CONFIG: Required<CentrifugoErrorConfig> = {
+  ...DEFAULT_ERROR_CONFIG,
+  duration: 0, // Don't auto-dismiss centrifugo errors
+  showMethod: true,
+  showCode: true,
+};

package/src/components/errors/ErrorsTracker/utils/formatters.ts

@@ -5,7 +5,7 @@
  */
 
 import type { ZodError } from 'zod';
-import type { ValidationErrorDetail, CORSErrorDetail, NetworkErrorDetail } from '../types';
+import type { ValidationErrorDetail, CORSErrorDetail, NetworkErrorDetail, CentrifugoErrorDetail } from '../types';
 
 /**
  * Format Zod error issues for display
@@ -83,6 +83,22 @@ export function formatNetworkErrorForClipboard(detail: NetworkErrorDetail): stri
   return JSON.stringify(errorData, null, 2);
 }
 
+/**
+ * Format centrifugo error for clipboard
+ */
+export function formatCentrifugoErrorForClipboard(detail: CentrifugoErrorDetail): string {
+  const errorData = {
+    type: 'centrifugo',
+    timestamp: detail.timestamp.toISOString(),
+    method: detail.method,
+    error: detail.error,
+    ...(detail.code !== undefined && { code: detail.code }),
+    ...(detail.data && { data: detail.data }),
+  };
+
+  return JSON.stringify(errorData, null, 2);
+}
+
 /**
  * Extract domain from URL
  */
@@ -98,7 +114,7 @@ export function extractDomain(url: string): string {
 /**
  * Format error title based on type
  */
-export function formatErrorTitle(detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail): string {
+export function formatErrorTitle(detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail | CentrifugoErrorDetail): string {
   switch (detail.type) {
     case 'validation':
       return `❌ Validation Error in ${detail.operation}`;
@@ -108,6 +124,10 @@ export function formatErrorTitle(detail: ValidationErrorDetail | CORSErrorDetail
       return detail.statusCode
         ? `⚠️ Network Error (${detail.statusCode})`
         : '⚠️ Network Error';
+    case 'centrifugo':
+      return detail.code !== undefined
+        ? `🔌 Centrifugo Error (${detail.code})`
+        : '🔌 Centrifugo Error';
     default:
       return '❌ Error';
   }