@djangocfg/layouts 2.1.429 → 2.1.431

package/README.md

@@ -162,6 +162,12 @@ export default function Layout({ children }) {
 
 Wraps `Boundary` from `@djangocfg/ui-core` — same `variant`/`fallback`/`resetKeys` API, plus auto `FrontendMonitor.capture(...)`.
 
+> **One top-level boundary.** `BaseApp` already mounts the app-wide crash
+> boundary (UiProviders' built-in one, fed an i18n fallback) — don't wrap a
+> second one around the whole app. Use `MonitorBoundary` for **per-section**
+> isolation (so one panel's crash doesn't take the page), not as a duplicate
+> root boundary. All boundaries share the single ui-core `Boundary` catch.
+
 For local UI widgets that should not report to backend, use `Boundary` from `@djangocfg/ui-core` directly.
 
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.429",
+  "version": "2.1.431",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -89,12 +89,12 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.429",
-    "@djangocfg/centrifugo": "^2.1.429",
-    "@djangocfg/debuger": "^2.1.429",
-    "@djangocfg/i18n": "^2.1.429",
-    "@djangocfg/monitor": "^2.1.429",
-    "@djangocfg/ui-core": "^2.1.429",
+    "@djangocfg/api": "^2.1.431",
+    "@djangocfg/centrifugo": "^2.1.431",
+    "@djangocfg/debuger": "^2.1.431",
+    "@djangocfg/i18n": "^2.1.431",
+    "@djangocfg/monitor": "^2.1.431",
+    "@djangocfg/ui-core": "^2.1.431",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -125,14 +125,14 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.429",
-    "@djangocfg/centrifugo": "^2.1.429",
-    "@djangocfg/debuger": "^2.1.429",
-    "@djangocfg/i18n": "^2.1.429",
-    "@djangocfg/monitor": "^2.1.429",
-    "@djangocfg/typescript-config": "^2.1.429",
-    "@djangocfg/ui-core": "^2.1.429",
-    "@djangocfg/ui-tools": "^2.1.429",
+    "@djangocfg/api": "^2.1.431",
+    "@djangocfg/centrifugo": "^2.1.431",
+    "@djangocfg/debuger": "^2.1.431",
+    "@djangocfg/i18n": "^2.1.431",
+    "@djangocfg/monitor": "^2.1.431",
+    "@djangocfg/typescript-config": "^2.1.431",
+    "@djangocfg/ui-core": "^2.1.431",
+    "@djangocfg/ui-tools": "^2.1.431",
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",

package/src/components/errors/ErrorBoundary.tsx

@@ -1,14 +1,18 @@
 /**
- * Simple ErrorBoundary Component
+ * ErrorBoundary — the i18n'd, support-email fallback for Next app layouts.
  *
- * Catches React errors and displays a fallback UI
+ * Thin wrapper over the ui-core `Boundary` primitive: ui-core owns the catch
+ * machinery (getDerivedStateFromError / componentDidCatch / reset), this layer
+ * only supplies a localized fullscreen fallback + an optional support email.
+ * One catch implementation across the stack — UiProviders' built-in boundary,
+ * MonitorBoundary, and this all build on the same ui-core Boundary.
  */
 
 'use client';
 
-import { isDev } from "@djangocfg/ui-core/lib";
-import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { useMemo, type ComponentType, type ErrorInfo, type ReactNode } from 'react';
 
+import { Boundary, type BoundaryRenderProps } from '@djangocfg/ui-core/components';
 import { getT } from '@djangocfg/i18n';
 
 interface ErrorBoundaryProps {
@@ -17,90 +21,60 @@ interface ErrorBoundaryProps {
   onError?: (error: Error, errorInfo: ErrorInfo) => void;
 }
 
-interface ErrorBoundaryState {
-  hasError: boolean;
-  error: Error | null;
-}
-
-export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  private handlePopState: (() => void) | null = null;
-
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    if (this.props.onError) {
-      this.props.onError(error, errorInfo);
-    }
-
-    if (isDev) {
-      console.error('ErrorBoundary caught an error:', error, errorInfo);
-    }
-  }
-
-  componentDidUpdate(_prevProps: ErrorBoundaryProps, prevState: ErrorBoundaryState) {
-    if (this.state.hasError && !prevState.hasError) {
-      this.handlePopState = () => {
-        window.location.reload();
-      };
-      window.addEventListener('popstate', this.handlePopState);
-    } else if (!this.state.hasError && prevState.hasError) {
-      if (this.handlePopState) {
-        window.removeEventListener('popstate', this.handlePopState);
-        this.handlePopState = null;
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.handlePopState) {
-      window.removeEventListener('popstate', this.handlePopState);
-      this.handlePopState = null;
-    }
-  }
-
-  render() {
-    if (this.state.hasError) {
-      const title = getT('layouts.errors.somethingWentWrong');
-      const description = getT('layouts.errors.tryRefreshing');
-      const refreshButton = getT('layouts.errors.refreshPage');
-
-      return (
-        <div className="flex min-h-screen items-center justify-center bg-background p-4">
-          <div className="max-w-md w-full space-y-4 text-center">
-            <h1 className="text-2xl font-bold text-foreground">{title}</h1>
-            <p className="text-muted-foreground">
-              {description}
+/** Localized fullscreen fallback. `reset()` re-mounts the tree (ui-core); we
+ *  also offer a hard reload, matching the prior behavior. */
+function makeFallback(supportEmail?: string) {
+  return function ErrorFallback({ reset }: BoundaryRenderProps) {
+    const title = getT('layouts.errors.somethingWentWrong');
+    const description = getT('layouts.errors.tryRefreshing');
+    const refreshButton = getT('layouts.errors.refreshPage');
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background p-4">
+        <div className="max-w-md w-full space-y-4 text-center">
+          <h1 className="text-2xl font-bold text-foreground">{title}</h1>
+          <p className="text-muted-foreground">{description}</p>
+          {supportEmail && (
+            <p className="text-sm text-muted-foreground">
+              {getT('layouts.errors.persistsContact', { email: '' })}{' '}
+              <a
+                href={`mailto:${supportEmail}`}
+                className="text-primary hover:underline"
+              >
+                {supportEmail}
+              </a>
             </p>
-            {this.props.supportEmail && (
-              <p className="text-sm text-muted-foreground">
-                {getT('layouts.errors.persistsContact', { email: '' })}{' '}
-                <a
-                  href={`mailto:${this.props.supportEmail}`}
-                  className="text-primary hover:underline"
-                >
-                  {this.props.supportEmail}
-                </a>
-              </p>
-            )}
-            <button
-              onClick={() => window.location.reload()}
-              className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
-            >
-              {refreshButton}
-            </button>
-          </div>
+          )}
+          <button
+            onClick={() => {
+              reset();
+              // Hard reload as a fallback if a pure reset can't recover.
+              window.location.reload();
+            }}
+            className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+          >
+            {refreshButton}
+          </button>
         </div>
-      );
-    }
-
-    return this.props.children;
-  }
+      </div>
+    );
+  };
 }
 
+export function ErrorBoundary({ children, supportEmail, onError }: ErrorBoundaryProps) {
+  // Memoize so the boundary's FallbackComponent identity is stable across
+  // renders (no remount churn).
+  const Fallback = useMemo<ComponentType<BoundaryRenderProps>>(
+    () => makeFallback(supportEmail),
+    [supportEmail],
+  );
+  return (
+    <Boundary
+      variant="fullscreen"
+      name="layouts-error-boundary"
+      onError={onError}
+      FallbackComponent={Fallback}
+    >
+      {children}
+    </Boundary>
+  );
+}

package/src/components/errors/README.md

@@ -5,10 +5,14 @@ runtime error tracker, and developer-facing toasts (with a Copy-as-cURL action).
 
 ## Pieces
 
+All boundaries here build on the single `Boundary` primitive in
+`@djangocfg/ui-core` — no duplicate catch logic. `BaseApp` mounts ONE boundary
+(UiProviders' built-in, fed an i18n fallback), so apps don't wrap their own.
+
 | File | What it does |
 |------|--------------|
-| `ErrorBoundary.tsx` | React error boundary with a friendly fallback. |
-| `MonitorBoundary.tsx` | Error boundary that also reports to `@djangocfg/monitor`. |
+| `ErrorBoundary.tsx` | Thin wrapper over ui-core `Boundary` — i18n fallback + support email (for direct use; `BaseApp` no longer wraps it). |
+| `MonitorBoundary.tsx` | ui-core `Boundary` that also reports to `@djangocfg/monitor`. |
 | `ErrorLayout.tsx` | Full-page error layout (`getErrorContent` / `ERROR_CODES`). |
 | `ErrorsTracker/` | Global runtime tracker — listens for error CustomEvents and shows toasts. |
 

package/src/layouts/AppLayout/BaseApp.tsx

@@ -57,7 +57,8 @@ import { NextRouterAdapter, NextLinkProvider } from '@djangocfg/ui-core/adapters
 import { NextIntlLinkBridge } from './NextIntlLinkBridge';
 import { ThemeProvider } from '@djangocfg/ui-core/theme';
 import { ThemeStyleBridge } from '../../theme/ThemeStyleBridge';
-import { ErrorBoundary } from '../../components/errors/ErrorBoundary';
+import type { BoundaryRenderProps } from '@djangocfg/ui-core/components';
+import { getT } from '@djangocfg/i18n';
 import { ErrorTrackingProvider } from '../../components/errors/ErrorsTracker';
 import { AnalyticsProvider } from '../../snippets/Analytics';
 import { AuthDialog } from '../../snippets/AuthDialog';
@@ -73,6 +74,51 @@ const DebugButton = React.lazy(() =>
 // For backwards compatibility, re-export as BaseAppProps
 export type BaseAppProps = BaseLayoutProps;
 
+/**
+ * Localized crash fallback fed into UiProviders' built-in Boundary. Renders the
+ * i18n'd "something went wrong" screen + optional support email. `reset()`
+ * re-mounts (soft recover); the Reload button hard-reloads when a soft reset
+ * can't recover (e.g. the crash is in a provider above the boundary's subtree).
+ */
+function AppErrorFallback({
+  reset,
+  supportEmail,
+}: BoundaryRenderProps & { supportEmail?: string }) {
+  const title = getT('layouts.errors.somethingWentWrong');
+  const description = getT('layouts.errors.tryRefreshing');
+  const retry = getT('layouts.errors.refreshPage');
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <div className="max-w-md w-full space-y-4 text-center">
+        <h1 className="text-2xl font-bold text-foreground">{title}</h1>
+        <p className="text-muted-foreground">{description}</p>
+        {supportEmail && (
+          <p className="text-sm text-muted-foreground">
+            {getT('layouts.errors.persistsContact', { email: '' })}{' '}
+            <a href={`mailto:${supportEmail}`} className="text-primary hover:underline">
+              {supportEmail}
+            </a>
+          </p>
+        )}
+        <div className="flex items-center justify-center gap-2">
+          <button
+            onClick={reset}
+            className="rounded-md bg-primary px-4 py-2 text-primary-foreground hover:bg-primary/90"
+          >
+            {retry}
+          </button>
+          <button
+            onClick={() => window.location.reload()}
+            className="rounded-md border border-border px-4 py-2 text-foreground hover:bg-muted"
+          >
+            {getT('layouts.errors.refreshPage')}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 /**
  * BaseApp - Core providers wrapper for any React/Next.js app
  *
@@ -131,7 +177,21 @@ export function BaseApp({
        */}
       <NextRouterAdapter>
       <NextLinkProvider>
-      <UiProviders>
+      {/* Single top-level boundary lives inside UiProviders. We feed it the
+          app's i18n fallback + onError instead of wrapping our own boundary on
+          top — one catch in the tree. errorBoundary={false} fully disables it
+          when the host opts out. */}
+      <UiProviders
+        errorBoundary={enableErrorBoundary ? undefined : false}
+        onError={errorBoundary?.onError}
+        errorFallback={
+          enableErrorBoundary
+            ? (props) => (
+                <AppErrorFallback {...props} supportEmail={errorBoundary?.supportEmail} />
+              )
+            : undefined
+        }
+      >
         <SWRConfig
           value={{
             revalidateOnFocus: swr?.revalidateOnFocus ?? true,
@@ -189,17 +249,7 @@ export function BaseApp({
     </ThemeProvider>
   );
 
-  // Wrap with ErrorBoundary only if explicitly enabled
-  if (enableErrorBoundary) {
-    return (
-      <ErrorBoundary
-        supportEmail={errorBoundary?.supportEmail}
-        onError={errorBoundary?.onError}
-      >
-        {content}
-      </ErrorBoundary>
-    );
-  }
-
+  // The error boundary is now UiProviders' built-in one (fed our i18n fallback
+  // + onError above) — no outer wrapper needed.
   return content;
 }