@djangocfg/layouts 2.1.379 → 2.1.381

package/README.md

@@ -126,6 +126,36 @@ When `routing` is set, `BaseApp` mounts a locale-aware `<Link>` adapter so every
 
 `baseApp.project` enables `window.monitor`. Debug panel: `Cmd+D` or `?debug=1`.
 
+### `MonitorBoundary`
+
+Error boundary that automatically reports caught errors to `@djangocfg/monitor`. Use at page/layout level so unexpected render errors land in your backend dashboard.
+
+```tsx
+import { MonitorBoundary } from '@djangocfg/layouts';
+
+export default function Layout({ children }) {
+  return (
+    <MonitorBoundary variant="fullscreen" name="root-layout">
+      {children}
+    </MonitorBoundary>
+  );
+}
+
+// Per-section, non-fatal:
+<MonitorBoundary variant="card" name="dashboard-stats" resetKeys={[pathname]}>
+  <StatsPanel />
+</MonitorBoundary>
+
+// Opt out of reporting (e.g. third-party iframe noise):
+<MonitorBoundary reportToMonitor={false} variant="silent">
+  <EmbeddedWidget />
+</MonitorBoundary>
+```
+
+Wraps `Boundary` from `@djangocfg/ui-core` — same `variant`/`fallback`/`resetKeys` API, plus auto `FrontendMonitor.capture(...)`.
+
+For local UI widgets that should not report to backend, use `Boundary` from `@djangocfg/ui-core` directly.
+
 ---
 
 ## Package exports

package/package.json

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

package/src/components/errors/MonitorBoundary.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { Boundary } from '@djangocfg/ui-core/components';
+import type { BoundaryProps } from '@djangocfg/ui-core/components';
+import { EventLevel, EventType, FrontendMonitor } from '@djangocfg/monitor/client';
+import type { ErrorInfo, ReactNode } from 'react';
+
+export interface MonitorBoundaryProps extends Omit<BoundaryProps, 'onError'> {
+  /** Optional name forwarded to FrontendMonitor.extra.source for filtering. */
+  name?: string;
+  /** Additional handler called alongside the monitor capture. */
+  onError?: (error: Error, info: ErrorInfo) => void;
+  /** Disable monitor reporting (still catches and renders fallback). */
+  reportToMonitor?: boolean;
+  children: ReactNode;
+}
+
+/**
+ * Boundary + auto-reporting to @djangocfg/monitor.
+ * Use at the page/layout level so unexpected render errors are captured in your backend.
+ *
+ * For widgets you don't want to report (chat, embeds), use `Boundary` from ui-core directly.
+ */
+export function MonitorBoundary({
+  name,
+  onError,
+  reportToMonitor = true,
+  ...rest
+}: MonitorBoundaryProps) {
+  return (
+    <Boundary
+      {...rest}
+      name={name}
+      onError={(error, info) => {
+        if (reportToMonitor) {
+          try {
+            FrontendMonitor.capture({
+              event_type: EventType.ERROR,
+              level: EventLevel.ERROR,
+              message: error.message || 'Unhandled React render error',
+              stack_trace: error.stack,
+              url: typeof window !== 'undefined' ? window.location.href : undefined,
+              extra: {
+                source: name ?? 'boundary',
+                componentStack: info.componentStack,
+              },
+            });
+          } catch {
+            // Never let monitor failures crash the boundary itself.
+          }
+        }
+        onError?.(error, info);
+      }}
+    />
+  );
+}

package/src/components/errors/index.ts

@@ -3,6 +3,8 @@
  */
 
 export { ErrorBoundary } from './ErrorBoundary';
+export { MonitorBoundary } from './MonitorBoundary';
+export type { MonitorBoundaryProps } from './MonitorBoundary';
 export { ErrorLayout } from './ErrorLayout';
 export type { ErrorLayoutProps } from './ErrorLayout';
 export { getErrorContent, ERROR_CODES } from './errorConfig';

package/src/layouts/PublicLayout/components/UserMenu.tsx

@@ -186,8 +186,8 @@ export function UserMenu({
           {profileGroups.map((group, groupIndex) => (
             <div key={groupIndex}>
               {group.title && (
-                <div className="px-4 py-2">
-                  <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                <div className="px-4 pt-2 pb-1">
+                  <p className="text-[11px] font-normal text-muted-foreground/70">
                     {group.title}
                   </p>
                 </div>
@@ -229,7 +229,7 @@ export function UserMenu({
           ))}
           {localeMenu && (
             <div className="border-t border-border/50 px-4 pt-3">
-              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+              <p className="text-[11px] font-normal text-muted-foreground/70">
                 {labels.language}
               </p>
               <div className="mt-2 flex flex-wrap gap-2">
@@ -293,7 +293,7 @@ export function UserMenu({
             {groupIndex > 0 && <DropdownMenuSeparator />}
             <DropdownMenuGroup>
               {group.title && (
-                <DropdownMenuLabel className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                <DropdownMenuLabel className="text-[11px] font-normal text-muted-foreground/70 py-1">
                   {group.title}
                 </DropdownMenuLabel>
               )}