@djangocfg/layouts 2.1.216 → 2.1.218

package/README.md

@@ -49,6 +49,7 @@ export default function RootLayout({ children }) {
 - **PwaProvider** - PWA installation (optional)
 - **ErrorTrackingProvider** - Error handling and tracking
 - **ErrorBoundary** - React error boundary
+- **MonitorProvider** - Frontend error monitoring via `@djangocfg/monitor` (optional)
 - **MCP Chat Widget** - AI chat assistant (optional)
 
 **Global components:**
@@ -104,6 +105,22 @@ export default function RootLayout({ children }) {
 }
 ```
 
+**Monitor prop** — pass `monitor` to enable frontend error monitoring (installs `window.monitor` in DevTools):
+
+```tsx
+<AppLayout
+  monitor={{
+    project: 'my-app',
+    environment: process.env.NODE_ENV,
+  }}
+  // ...
+>
+  {children}
+</AppLayout>
+```
+
+After mount, `window.monitor.error(...)`, `.warn(...)`, `.flush()`, `.status()` are available in the browser console.
+
 **Layout priority:** Admin → Private → Public → Fallback
 
 **noLayoutPaths:** Paths that render without any layout wrapper. Useful for fullscreen pages (terminal, embed, print). Providers (auth, theme, centrifugo) are still applied.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.216",
+  "version": "2.1.218",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -74,17 +74,18 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.216",
-    "@djangocfg/centrifugo": "^2.1.216",
-    "@djangocfg/i18n": "^2.1.216",
-    "@djangocfg/ui-core": "^2.1.216",
-    "@djangocfg/ui-nextjs": "^2.1.216",
-    "@djangocfg/ui-tools": "^2.1.216",
+    "@djangocfg/api": "^2.1.218",
+    "@djangocfg/centrifugo": "^2.1.218",
+    "@djangocfg/i18n": "^2.1.218",
+    "@djangocfg/monitor": "^2.1.218",
+    "@djangocfg/ui-core": "^2.1.218",
+    "@djangocfg/ui-nextjs": "^2.1.218",
+    "@djangocfg/ui-tools": "^2.1.218",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
-    "next": ">=16.0.0",
+    "next": "^16.0.10",
     "p-retry": "^7.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -93,7 +94,12 @@
     "swr": "^2.3.7",
     "tailwindcss": "^4.1.18",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^4.3.4"
+    "zod": "^4.3.6"
+  },
+  "peerDependenciesMeta": {
+    "@djangocfg/monitor": {
+      "optional": true
+    }
   },
   "dependencies": {
     "nextjs-toploader": "^3.9.17",
@@ -102,13 +108,14 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.216",
-    "@djangocfg/i18n": "^2.1.216",
-    "@djangocfg/centrifugo": "^2.1.216",
-    "@djangocfg/typescript-config": "^2.1.216",
-    "@djangocfg/ui-core": "^2.1.216",
-    "@djangocfg/ui-nextjs": "^2.1.216",
-    "@djangocfg/ui-tools": "^2.1.216",
+    "@djangocfg/api": "^2.1.218",
+    "@djangocfg/i18n": "^2.1.218",
+    "@djangocfg/centrifugo": "^2.1.218",
+    "@djangocfg/monitor": "^2.1.218",
+    "@djangocfg/typescript-config": "^2.1.218",
+    "@djangocfg/ui-core": "^2.1.218",
+    "@djangocfg/ui-nextjs": "^2.1.218",
+    "@djangocfg/ui-tools": "^2.1.218",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

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

@@ -155,6 +155,8 @@ export interface ErrorTrackingProviderProps {
   centrifugo?: Partial<CentrifugoErrorConfig>;
   runtime?: Partial<RuntimeErrorConfig>;
   onError?: (error: ErrorDetail) => boolean | void;
+  /** Called with the raw ErrorDetail for every tracked error. Wire to FrontendMonitor.capture() (via toMonitorEvent) to forward errors to the backend. */
+  onMonitorCapture?: (detail: ErrorDetail) => void;
 }
 
 /**
@@ -170,6 +172,7 @@ export function ErrorTrackingProvider({
   centrifugo: userCentrifugoConfig,
   runtime: userRuntimeConfig,
   onError,
+  onMonitorCapture,
 }: ErrorTrackingProviderProps) {
   const [errors, setErrors] = useState<StoredError[]>([]);
 
@@ -240,6 +243,13 @@ export function ErrorTrackingProvider({
         return updated.slice(0, config.maxErrors);
       });
 
+      // Forward raw ErrorDetail to monitor bridge (fire-and-forget)
+      if (onMonitorCapture) {
+        try {
+          onMonitorCapture(detail);
+        } catch { /* never crash */ }
+      }
+
       // Call custom error handler
       const shouldShowToast = onError?.(detail) !== false;
 
@@ -252,7 +262,7 @@ export function ErrorTrackingProvider({
         });
       }
     },
-    [onError]
+    [onError, onMonitorCapture]
   );
 
   /**

package/src/layouts/AppLayout/AppLayout.tsx

@@ -50,6 +50,7 @@ import type {
   PwaInstallConfig,
 } from '../types';
 import type { AuthConfig } from '@djangocfg/api/auth';
+import type { MonitorConfig } from '@djangocfg/monitor';
 
 export type LayoutMode = 'public' | 'private' | 'admin';
 
@@ -135,6 +136,9 @@ export interface AppLayoutProps {
 
   /** i18n configuration for locale switching (applies to all layouts) */
   i18n?: I18nLayoutConfig;
+
+  /** Monitor configuration — initialises window.monitor + auto-captures JS errors & console */
+  monitor?: MonitorConfig;
 }
 
 /**
@@ -256,6 +260,7 @@ export function AppLayout(props: AppLayoutProps) {
     swr,
     mcpChat,
     pwaInstall,
+    monitor,
   } = props;
 
   return (
@@ -269,6 +274,7 @@ export function AppLayout(props: AppLayoutProps) {
       swr={swr}
       mcpChat={mcpChat}
       pwaInstall={pwaInstall}
+      monitor={monitor}
     >
       <AppLayoutContent {...props} />
     </BaseApp>

package/src/layouts/AppLayout/BaseApp.tsx

@@ -42,6 +42,7 @@ import dynamic from 'next/dynamic';
 import NextTopLoader from 'nextjs-toploader';
 import { SWRConfig } from 'swr';
 
+import { MonitorProvider } from '@djangocfg/monitor/client';
 import { getCentrifugoAuthTokenRetrieve } from '@djangocfg/api';
 import { AuthProvider } from '@djangocfg/api/auth';
 import { CentrifugoProvider } from '@djangocfg/centrifugo';
@@ -84,6 +85,7 @@ export function BaseApp({
   swr,
   mcpChat,
   pwaInstall,
+  monitor,
 }: BaseAppProps) {
   // ErrorBoundary is enabled by default
   const enableErrorBoundary = errorBoundary?.enabled !== false;
@@ -128,6 +130,7 @@ export function BaseApp({
                     network={errorTracking?.network}
                     onError={errorTracking?.onError}
                   >
+                    {monitor && <MonitorProvider {...monitor} />}
                     {children}
                     <NextTopLoader
                       color="hsl(var(--primary))"

package/src/layouts/types/layout.types.ts

@@ -14,6 +14,7 @@ import type { ErrorBoundaryConfig, ErrorTrackingConfig } from '../../components/
 
 // Import local provider configs
 import type { ThemeConfig, SWRConfigOptions, McpChatConfig, CentrifugoConfig } from './providers.types';
+import type { MonitorConfig } from '@djangocfg/monitor';
 
 // ============================================================================
 // Base Layout Props
@@ -54,4 +55,7 @@ export interface BaseLayoutProps {
 
   /** PWA Install configuration (from snippets/PWAInstall) */
   pwaInstall?: PwaInstallConfig;
+
+  /** Monitor configuration — initialises window.monitor + auto-captures JS errors & console */
+  monitor?: MonitorConfig;
 }

package/src/snippets/index.ts

@@ -8,6 +8,10 @@ export * from './Breadcrumbs';
 export * from './AuthDialog';
 export * from './Analytics';
 
+// MonitorProvider lives in @djangocfg/monitor/client — re-exported here for convenience
+export { MonitorProvider } from '@djangocfg/monitor/client';
+export type { MonitorProviderProps } from '@djangocfg/monitor/client';
+
 // MCP Chat (AI-powered documentation assistant)
 export {
   AIChatWidget,