From 68cddbbdd5099c1d4a11fe6e04181e2d6c2b1036 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Tue, 4 Nov 2025 21:31:37 +0000
Subject: [PATCH] Refactor: Implement chunk load error recovery

---
 src/App.tsx                                 |  3 ++
 src/components/error/RouteErrorBoundary.tsx | 35 +++++++++++++++++++--
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 5085e78a..d8a4a1d9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -120,6 +120,9 @@ function NavigationTracker() {
     const from = prevLocation.current || undefined;
     breadcrumb.navigation(location.pathname, from);
     prevLocation.current = location.pathname;
+    
+    // Clear chunk load reload flag on successful navigation
+    sessionStorage.removeItem('chunk-load-reload');
   }, [location.pathname]);
 
   return null;
diff --git a/src/components/error/RouteErrorBoundary.tsx b/src/components/error/RouteErrorBoundary.tsx
index 6c071cda..06471e7e 100644
--- a/src/components/error/RouteErrorBoundary.tsx
+++ b/src/components/error/RouteErrorBoundary.tsx
@@ -32,13 +32,35 @@ export class RouteErrorBoundary extends Component<RouteErrorBoundaryProps, Route
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // Detect chunk load failures (deployment cache issue)
+    const isChunkLoadError = 
+      error.message.includes('Failed to fetch dynamically imported module') ||
+      error.message.includes('Loading chunk') ||
+      error.message.includes('ChunkLoadError');
+
+    if (isChunkLoadError) {
+      // Check if we've already tried reloading
+      const hasReloaded = sessionStorage.getItem('chunk-load-reload');
+      
+      if (!hasReloaded) {
+        // Mark as reloaded and reload once
+        sessionStorage.setItem('chunk-load-reload', 'true');
+        window.location.reload();
+        return; // Don't log error yet
+      } else {
+        // Second failure - clear flag and show error
+        sessionStorage.removeItem('chunk-load-reload');
+      }
+    }
+
     // Log to database and get error ID for user reference
     const errorId = handleError(error, {
       action: 'Route-level component crash',
       metadata: {
         componentStack: errorInfo.componentStack,
         url: window.location.href,
-        severity: 'critical',
+        severity: isChunkLoadError ? 'medium' : 'critical',
+        isChunkLoadError,
       },
     });
 
@@ -55,6 +77,11 @@ export class RouteErrorBoundary extends Component<RouteErrorBoundaryProps, Route
 
   render() {
     if (this.state.hasError) {
+      const isChunkError = 
+        this.state.error?.message.includes('Failed to fetch dynamically imported module') ||
+        this.state.error?.message.includes('Loading chunk') ||
+        this.state.error?.message.includes('ChunkLoadError');
+
       return (
         <div className="min-h-screen flex items-center justify-center p-4 bg-background">
           <Card className="max-w-lg w-full shadow-lg">
@@ -63,10 +90,12 @@ export class RouteErrorBoundary extends Component<RouteErrorBoundaryProps, Route
                 <AlertTriangle className="w-8 h-8 text-destructive" />
               </div>
               <CardTitle className="text-2xl">
-                Something Went Wrong
+                {isChunkError ? 'New Version Available' : 'Something Went Wrong'}
               </CardTitle>
               <CardDescription className="mt-2">
-                We encountered an unexpected error. This has been logged and we'll look into it.
+                {isChunkError 
+                  ? "The app has been updated. Please reload the page to get the latest version."
+                  : "We encountered an unexpected error. This has been logged and we'll look into it."}
               </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">