xertica-ui 2.3.0 → 2.4.0

package/docs/components/error-boundary.md

@@ -23,30 +23,37 @@ import type { FallbackProps } from '@/components/shared/error-boundary';
 
 ## The Three Variants
 
-| Variant | Fallback UI | Placement | Purpose |
-|---|---|---|---|
-| `AppErrorBoundary` | Full-screen, inline-styled | Outside `QueryClientProvider`, wraps entire `App` | Catches provider/context crashes; works even if Tailwind/CSS fails |
-| `PageErrorBoundary` | Half-height, Tailwind-styled | Wraps `<Routes>` / `<AuthGuard>` inside the router | Catches lazy-chunk load failures and page render errors; app chrome stays alive |
-| `SectionErrorBoundary` | Compact inline badge | Wraps individual sections (table, chart, assistant) | Catches isolated data-rendering errors; page layout stays intact |
+| Variant                | Fallback UI                  | Placement                                           | Purpose                                                                         |
+| ---------------------- | ---------------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------- |
+| `AppErrorBoundary`     | Full-screen, inline-styled   | Outside `QueryClientProvider`, wraps entire `App`   | Catches provider/context crashes; works even if Tailwind/CSS fails              |
+| `PageErrorBoundary`    | Half-height, Tailwind-styled | Wraps `<Routes>` / `<AuthGuard>` inside the router  | Catches lazy-chunk load failures and page render errors; app chrome stays alive |
+| `SectionErrorBoundary` | Compact inline badge         | Wraps individual sections (table, chart, assistant) | Catches isolated data-rendering errors; page layout stays intact                |
 
 ---
 
 ## Provider Stack Placement
 
 ```tsx
-<AppErrorBoundary>                          {/* ← catches: provider init, context crashes */}
+<AppErrorBoundary>
+  {' '}
+  {/* ← catches: provider init, context crashes */}
   <QueryClientProvider client={queryClient}>
     <XerticaProvider>
       <Router>
         <AuthProvider>
-          <PageErrorBoundary>              {/* ← catches: lazy chunk failures, route renders */}
+          <PageErrorBoundary>
+            {' '}
+            {/* ← catches: lazy chunk failures, route renders */}
             <Suspense fallback={null}>
               <Routes>
-                <Route path="/home" element={
-                  <ProtectedRoute>
-                    <HomePage />           {/* ← page internals */}
-                  </ProtectedRoute>
-                } />
+                <Route
+                  path="/home"
+                  element={
+                    <ProtectedRoute>
+                      <HomePage /> {/* ← page internals */}
+                    </ProtectedRoute>
+                  }
+                />
               </Routes>
             </Suspense>
           </PageErrorBoundary>
@@ -63,25 +70,25 @@ import type { FallbackProps } from '@/components/shared/error-boundary';
 
 ### `AppErrorBoundary` / `PageErrorBoundary` / `SectionErrorBoundary`
 
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | — | **Required.** Content to protect |
-| `onError` | `(error: Error, info: React.ErrorInfo) => void` | — | Called when an error is caught. Wire to Sentry, Datadog, etc. |
-| `resetKeys` | `unknown[]` | — | When any value in this array changes, the boundary auto-resets. Pass `[location.pathname]` to reset on navigation |
+| Prop        | Type                                            | Default | Description                                                                                                       |
+| ----------- | ----------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
+| `children`  | `ReactNode`                                     | —       | **Required.** Content to protect                                                                                  |
+| `onError`   | `(error: Error, info: React.ErrorInfo) => void` | —       | Called when an error is caught. Wire to Sentry, Datadog, etc.                                                     |
+| `resetKeys` | `unknown[]`                                     | —       | When any value in this array changes, the boundary auto-resets. Pass `[location.pathname]` to reset on navigation |
 
 ### Base `ErrorBoundary`
 
 Same props plus:
 
-| Prop | Type | Description |
-|---|---|---|
+| Prop       | Type                                 | Description                                                   |
+| ---------- | ------------------------------------ | ------------------------------------------------------------- |
 | `fallback` | `React.ComponentType<FallbackProps>` | **Required.** The component to render when an error is caught |
 
 ### `FallbackProps` interface
 
 ```ts
 interface FallbackProps {
-  error: Error;   // The caught error
+  error: Error; // The caught error
   reset: () => void; // Call to clear the error and re-render children
 }
 ```
@@ -130,7 +137,7 @@ import * as Sentry from '@sentry/react';
 
 <AppErrorBoundary onError={(error, info) => Sentry.captureException(error, { extra: info })}>
   <App />
-</AppErrorBoundary>
+</AppErrorBoundary>;
 ```
 
 ### Custom fallback with base `ErrorBoundary`
@@ -150,7 +157,7 @@ function MyFallback({ error, reset }: FallbackProps) {
 
 <ErrorBoundary fallback={MyFallback}>
   <MyComponent />
-</ErrorBoundary>
+</ErrorBoundary>;
 ```
 
 ---
@@ -158,18 +165,21 @@ function MyFallback({ error, reset }: FallbackProps) {
 ## Fallback UIs
 
 ### `AppErrorFallback`
+
 - Full-screen centered layout using **inline styles** (no Tailwind dependency)
 - Shows a destructive info icon, error title, and message
 - Two buttons: "Tentar novamente" (calls `reset()`) and "Ir para o início" (`window.location.assign('/')`)
 - In `DEV` mode: displays the full error stack trace in a `<pre>` block
 
 ### `PageErrorFallback`
+
 - Uses Tailwind / xertica-ui token classes
 - Centered within the page content area (sidebar and header remain visible)
 - Triangle warning icon + descriptive message
 - Same two action buttons
 
 ### `SectionErrorFallback`
+
 - Compact `rounded-lg` card with `destructive/30` border
 - Circle info icon + short message
 - Single "Tentar novamente" button