From 59c37669b0ee48f0c16ccd281da041374563000b Mon Sep 17 00:00:00 2001
From: The Joel <jotelfootball@gmail.com>
Date: Wed, 22 Apr 2026 21:50:31 +0100
Subject: [PATCH] feat(errors): integrate error boundary into root layout and
 enhance error boundary system

---
 src/app/layout.tsx                            |  5 +++-
 src/components/errors/ErrorBoundarySystem.tsx | 25 +++++++++++++------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f2eea7d3..319d0dff 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -13,6 +13,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({
   // ...
@@ -53,7 +54,9 @@ export default function RootLayout({
                       <StateManagerIntegration />
                       <PerformanceMonitor />
                       <PrefetchingEngine />
-                      {children}
+                      <ErrorBoundary>
+                        {children}
+                      </ErrorBoundary>
                     </OfflineModeProvider>
                   </PerformanceMonitoringProvider>
                 </AccessibilityProvider>
diff --git a/src/components/errors/ErrorBoundarySystem.tsx b/src/components/errors/ErrorBoundarySystem.tsx
index 67542c77..eb2398d8 100644
--- a/src/components/errors/ErrorBoundarySystem.tsx
+++ b/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,6 +66,8 @@ export class ErrorBoundarySystem extends Component<
     this.setState({
       hasError: false,
       error: null,
+      errorInfo: undefined,
+      errorCount: 0,
     });
   };
 
@@ -65,14 +75,13 @@ export class ErrorBoundarySystem extends Component<
     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"
+          />
         )
       );
     }