Add React Error Boundary with Fallback UI

src/app/layout.tsx

@@ -14,6 +14,7 @@ import PrefetchingEngine from '@/components/performance/PrefetchingEngine';
 import StateManagerIntegration from '@/components/state/StateManagerIntegration';
 import { PWAManager } from '@/components/pwa/PWAManager';
 import { AccessibilityProvider } from '@/components/accessibility/AccessibilityProvider';
+import { ErrorBoundary } from '@/components/errors/ErrorBoundarySystem';
 
 const geistSans = Geist({
   // ...
@@ -79,7 +80,9 @@ export default function RootLayout({
                       <StateManagerIntegration />
                       <PerformanceMonitor />
                       <PrefetchingEngine />
-                      {children}
+                      <ErrorBoundary>
+                        {children}
+                      </ErrorBoundary>
                     </OfflineModeProvider>
                   </PerformanceMonitoringProvider>
                 </AccessibilityProvider>

src/components/errors/ErrorBoundarySystem.tsx

@@ -1,16 +1,22 @@
 'use client';
 
 import React, { Component, ReactNode, ErrorInfo } from 'react';
+import { errorReportingService } from '@/services/errorReporting';
+import { UserFriendlyErrorDisplay } from './UserFriendlyErrorDisplay';
 
 type ErrorBoundaryState = {
   hasError: boolean;
   error: Error | null;
+  errorInfo?: ErrorInfo;
+  errorCount: number;
 };
 
 type ErrorBoundaryProps = {
   children: ReactNode;
   fallback?: ReactNode;
   onError?: (error: Error, errorInfo: ErrorInfo) => void;
+  isolationId?: string;
+  isolationLevel?: string;
 };
 
 export class ErrorBoundarySystem extends Component<
@@ -23,6 +29,8 @@ export class ErrorBoundarySystem extends Component<
     this.state = {
       hasError: false,
       error: null,
+      errorInfo: undefined,
+      errorCount: 0,
     };
   }
 
@@ -58,21 +66,22 @@ export class ErrorBoundarySystem extends Component<
     this.setState({
       hasError: false,
       error: null,
+      errorInfo: undefined,
+      errorCount: 0,
     });
   };
 
   render() {
     if (this.state.hasError) {
       return (
         this.props.fallback || (
-          <div style={{ padding: '20px' }}>
-            <h2>Something went wrong.</h2>
-            <p>{this.state.error?.message}</p>
-
-            <button onClick={this.resetError}>
-              Try Again
-            </button>
-          </div>
+          <UserFriendlyErrorDisplay
+            error={this.state.error}
+            title="Application Error"
+            onRetry={this.resetError}
+            showDetails={true}
+            severity="error"
+          />
         )
       );
     }