@djangocfg/layouts 2.1.234 → 2.1.236

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.234",
+  "version": "2.1.236",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -74,14 +74,14 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.234",
-    "@djangocfg/centrifugo": "^2.1.234",
-    "@djangocfg/i18n": "^2.1.234",
-    "@djangocfg/monitor": "^2.1.234",
-    "@djangocfg/debuger": "^2.1.234",
-    "@djangocfg/ui-core": "^2.1.234",
-    "@djangocfg/ui-nextjs": "^2.1.234",
-    "@djangocfg/ui-tools": "^2.1.234",
+    "@djangocfg/api": "^2.1.236",
+    "@djangocfg/centrifugo": "^2.1.236",
+    "@djangocfg/i18n": "^2.1.236",
+    "@djangocfg/monitor": "^2.1.236",
+    "@djangocfg/debuger": "^2.1.236",
+    "@djangocfg/ui-core": "^2.1.236",
+    "@djangocfg/ui-nextjs": "^2.1.236",
+    "@djangocfg/ui-tools": "^2.1.236",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -109,15 +109,15 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.234",
-    "@djangocfg/i18n": "^2.1.234",
-    "@djangocfg/centrifugo": "^2.1.234",
-    "@djangocfg/monitor": "^2.1.234",
-    "@djangocfg/debuger": "^2.1.234",
-    "@djangocfg/typescript-config": "^2.1.234",
-    "@djangocfg/ui-core": "^2.1.234",
-    "@djangocfg/ui-nextjs": "^2.1.234",
-    "@djangocfg/ui-tools": "^2.1.234",
+    "@djangocfg/api": "^2.1.236",
+    "@djangocfg/i18n": "^2.1.236",
+    "@djangocfg/centrifugo": "^2.1.236",
+    "@djangocfg/monitor": "^2.1.236",
+    "@djangocfg/debuger": "^2.1.236",
+    "@djangocfg/typescript-config": "^2.1.236",
+    "@djangocfg/ui-core": "^2.1.236",
+    "@djangocfg/ui-nextjs": "^2.1.236",
+    "@djangocfg/ui-tools": "^2.1.236",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

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

@@ -34,6 +34,7 @@ import { toast } from '@djangocfg/ui-core/hooks';
 import { useDebugMode, isProduction } from '@djangocfg/monitor/client';
 
 import { createErrorToast } from '../components/ErrorToast';
+import { generateShortErrorId, getProductionToast } from '../utils/formatters';
 import {
     DEFAULT_CENTRIFUGO_CONFIG,
     DEFAULT_CORS_CONFIG,
@@ -148,6 +149,20 @@ function shouldShowError(detail: ErrorDetail): boolean {
   return true;
 }
 
+/** Throttle production toasts — max 1 per type within this window */
+const PROD_TOAST_THROTTLE_MS = 3000;
+let lastProdToastByType: Map<string, number> | null = null;
+
+function shouldThrottleProdToast(type: string): boolean {
+  if (typeof window === 'undefined') return false;
+  if (!lastProdToastByType) lastProdToastByType = new Map();
+  const now = Date.now();
+  const last = lastProdToastByType.get(type);
+  if (last && now - last < PROD_TOAST_THROTTLE_MS) return true;
+  lastProdToastByType.set(type, now);
+  return false;
+}
+
 export interface ErrorTrackingProviderProps {
   children: ReactNode;
   validation?: Partial<ValidationErrorConfig>;
@@ -255,13 +270,19 @@ export function ErrorTrackingProvider({
       // Call custom error handler
       const shouldShowToast = onError?.(detail) !== false;
 
-      // Show toast notification using Sonner (only for unique errors, and only in debug mode on production)
-      if (config.showToast && shouldShowToast && isUnique && (!isProduction || isDebugMode)) {
-        const toastOptions = createErrorToast(detail, config);
-        toast.error(toastOptions.title, {
-          description: toastOptions.description,
-          duration: toastOptions.duration,
-        });
+      // Show toast notification (only for unique errors)
+      if (config.showToast && shouldShowToast && isUnique) {
+        if (!isProduction || isDebugMode) {
+          const toastOptions = createErrorToast(detail, config);
+          toast.error(toastOptions.title, {
+            description: toastOptions.description,
+            duration: toastOptions.duration,
+          });
+        } else if (!shouldThrottleProdToast(detail.type)) {
+          const errorId = generateShortErrorId();
+          const { title, description } = getProductionToast(detail, errorId);
+          toast.error(title, { description, duration: config.duration });
+        }
       }
     },
     [onError, onMonitorCapture, isProduction, isDebugMode]

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

@@ -154,7 +154,7 @@ export function errorDetailToMonitorEvent(detail: ErrorDetail): MonitorEvent {
 }
 
 /**
- * Format error title based on type
+ * Format error title based on type (dev/debug mode — full details)
  */
 export function formatErrorTitle(detail: ValidationErrorDetail | CORSErrorDetail | NetworkErrorDetail | CentrifugoErrorDetail | RuntimeErrorDetail): string {
   switch (detail.type) {
@@ -176,3 +176,72 @@ export function formatErrorTitle(detail: ValidationErrorDetail | CORSErrorDetail
       return '❌ Error';
   }
 }
+
+/**
+ * Generate short error ID for support reference
+ * Format: ERR-XXXXX (base36, derived from timestamp + counter)
+ */
+let prodErrorCounter = 0;
+export function generateShortErrorId(): string {
+  const id = ((Date.now() % 1_000_000) + (++prodErrorCounter)).toString(36).toUpperCase().slice(-5);
+  return `ERR-${id.padStart(5, '0')}`;
+}
+
+/**
+ * Production-safe toast content — no internal details exposed
+ * Returns user-friendly title + description with error ID for support
+ */
+export function getProductionToast(detail: ErrorDetail, errorId: string): { title: string; description: string } {
+  switch (detail.type) {
+    case 'validation':
+      return {
+        title: 'Invalid data received',
+        description: `Please try again. Reference: ${errorId}`,
+      };
+    case 'cors':
+      return {
+        title: 'Server unavailable',
+        description: `Unable to reach the server. Reference: ${errorId}`,
+      };
+    case 'network': {
+      const status = detail.statusCode;
+      if (status && status >= 500) {
+        return {
+          title: 'Server error',
+          description: `We're working on it. Reference: ${errorId}`,
+        };
+      }
+      if (status === 403) {
+        return {
+          title: 'Access denied',
+          description: `You don't have permission. Reference: ${errorId}`,
+        };
+      }
+      if (status === 404) {
+        return {
+          title: 'Not found',
+          description: `The requested resource was not found. Reference: ${errorId}`,
+        };
+      }
+      return {
+        title: 'Connection error',
+        description: `Please check your connection and try again. Reference: ${errorId}`,
+      };
+    }
+    case 'centrifugo':
+      return {
+        title: 'Real-time connection error',
+        description: `Live updates may be delayed. Reference: ${errorId}`,
+      };
+    case 'runtime':
+      return {
+        title: 'Something went wrong',
+        description: `An unexpected error occurred. Reference: ${errorId}`,
+      };
+    default:
+      return {
+        title: 'Something went wrong',
+        description: `Please try again. Reference: ${errorId}`,
+      };
+  }
+}

package/src/layouts/AppLayout/BaseApp.tsx

@@ -99,8 +99,8 @@ export function BaseApp({
   const centrifugoUrl = centrifugo?.url || process.env.NEXT_PUBLIC_CENTRIFUGO_URL;
   const centrifugoEnabled = centrifugo?.enabled !== false;
 
-  // Debug panel — DebugButton self-hides in production, just pass through props
-  const { enabled: debugEnabled = true, ...debugProps } = debug ?? {};
+  // Debug panel — always mounted, DebugButton handles visibility itself
+  const { enabled: debugEnabled, ...debugProps } = debug ?? {};
 
 
   // Monitor — project prop as default, override with monitor config
@@ -170,8 +170,8 @@ export function BaseApp({
                     {/* Auth Dialog - global auth prompt */}
                     <AuthDialog authPath={auth?.routes?.auth} />
 
-                    {/* Debug Panel — enabled in development by default, disable with debug={{ enabled: false }} */}
-                    {debugEnabled && <DebugButton {...debugProps} />}
+                    {/* Debug Panel — auto in dev, ?debug=1 in prod, disable with debug={{ enabled: false }} */}
+                    <DebugButton enabled={debugEnabled} {...debugProps} />
                   </ErrorTrackingProvider>
                 </PwaProvider>
               </CentrifugoProvider>

package/src/utils/config.ts

@@ -1,7 +1,7 @@
 /**
  * Frontend configuration from environment variables
  */
-import { isDev } from '@djangocfg/ui-core/lib';
+import { isDev, isProd } from '@djangocfg/ui-core/lib';
 
 export const config = {
   /**
@@ -9,4 +9,5 @@ export const config = {
    * In development mode, any OTP code is accepted for authentication
    */
   isDevelopment: isDev,
+  isProduction: isProd,
 } as const;