Update

resources/js/app.tsx

@@ -3,6 +3,8 @@ import '../css/app.css';
 import { createInertiaApp } from '@inertiajs/react';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 import { createRoot } from 'react-dom/client';
+import { ErrorBoundary } from 'react-error-boundary';
+import DetailedErrorFallback from './components/custom/detailed-error-feedback'; // Import your component
 import { initializeTheme } from './hooks/use-appearance';
 import { AxiosProvider } from './plugins/AxiosContext';
 import { MittProvider } from './plugins/MittContext';
@@ -16,13 +18,26 @@ createInertiaApp({
         const root = createRoot(el);
 
         const app = (
-            <>
+            <ErrorBoundary
+                FallbackComponent={DetailedErrorFallback}
+                onError={(error, errorInfo) => {
+                    // Log to console for debugging
+                    console.error('Error caught by boundary:', error, errorInfo);
+
+                    // You could also send to an error reporting service here
+                    // e.g., Sentry, LogRocket, etc.
+                }}
+                onReset={() => {
+                    // Optional: Clear any error state in your app
+                    console.log('Error boundary reset');
+                }}
+            >
                 <MittProvider>
                     <AxiosProvider>
                         <App {...props} />
                     </AxiosProvider>
                 </MittProvider>
-            </>
+            </ErrorBoundary>
         );
 
         root.render(app);
@@ -32,5 +47,4 @@ createInertiaApp({
     },
 });
 
-// This will set light / dark mode on load...
 initializeTheme();