Fix: Improve chunk load error handling

src/components/error/RouteErrorBoundary.tsx

@@ -71,6 +71,32 @@ export class RouteErrorBoundary extends Component<RouteErrorBoundaryProps, Route
     window.location.reload();
   };
 
+  handleClearCacheAndReload = async () => {
+    try {
+      // Clear all caches
+      if ('caches' in window) {
+        const cacheNames = await caches.keys();
+        await Promise.all(cacheNames.map(name => caches.delete(name)));
+      }
+
+      // Unregister service workers
+      if ('serviceWorker' in navigator) {
+        const registrations = await navigator.serviceWorker.getRegistrations();
+        await Promise.all(registrations.map(reg => reg.unregister()));
+      }
+
+      // Clear session storage chunk reload flag
+      sessionStorage.removeItem('chunk-load-reload');
+
+      // Force reload bypassing cache
+      window.location.reload();
+    } catch (error) {
+      // Fallback to regular reload if cache clearing fails
+      console.error('Failed to clear cache:', error);
+      window.location.reload();
+    }
+  };
+
   handleGoHome = () => {
     window.location.href = '/';
   };
@@ -90,12 +116,23 @@ export class RouteErrorBoundary extends Component<RouteErrorBoundaryProps, Route
                 <AlertTriangle className="w-8 h-8 text-destructive" />
               </div>
               <CardTitle className="text-2xl">
-                {isChunkError ? 'New Version Available' : 'Something Went Wrong'}
+                {isChunkError ? 'App Update Required' : 'Something Went Wrong'}
               </CardTitle>
-              <CardDescription className="mt-2">
-                {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 className="mt-2 space-y-2">
+                {isChunkError ? (
+                  <>
+                    <p>The app has been updated with new features and improvements.</p>
+                    <p className="text-sm font-medium">
+                      To continue, please clear your browser cache and reload:
+                    </p>
+                    <ul className="text-sm list-disc list-inside space-y-1 ml-2">
+                      <li>Click "Clear Cache & Reload" below, or</li>
+                      <li>Press <kbd className="px-1.5 py-0.5 text-xs font-semibold bg-muted rounded">Ctrl+Shift+R</kbd> (Windows/Linux) or <kbd className="px-1.5 py-0.5 text-xs font-semibold bg-muted rounded">⌘+Shift+R</kbd> (Mac)</li>
+                    </ul>
+                  </>
+                ) : (
+                  "We encountered an unexpected error. This has been logged and we'll look into it."
+                )}
               </CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
@@ -114,23 +151,35 @@ export class RouteErrorBoundary extends Component<RouteErrorBoundaryProps, Route
                 </div>
               )}
 
-              <div className="flex flex-col sm:flex-row gap-2">
-                <Button
-                  variant="default"
-                  onClick={this.handleReload}
-                  className="flex-1 gap-2"
-                >
-                  <RefreshCw className="w-4 h-4" />
-                  Reload Page
-                </Button>
-                <Button
-                  variant="outline"
-                  onClick={this.handleGoHome}
-                  className="flex-1 gap-2"
-                >
-                  <Home className="w-4 h-4" />
-                  Go Home
-                </Button>
+              <div className="flex flex-col gap-2">
+                {isChunkError && (
+                  <Button
+                    variant="default"
+                    onClick={this.handleClearCacheAndReload}
+                    className="w-full gap-2"
+                  >
+                    <RefreshCw className="w-4 h-4" />
+                    Clear Cache & Reload
+                  </Button>
+                )}
+                <div className="flex flex-col sm:flex-row gap-2">
+                  <Button
+                    variant={isChunkError ? "outline" : "default"}
+                    onClick={this.handleReload}
+                    className="flex-1 gap-2"
+                  >
+                    <RefreshCw className="w-4 h-4" />
+                    Reload Page
+                  </Button>
+                  <Button
+                    variant="outline"
+                    onClick={this.handleGoHome}
+                    className="flex-1 gap-2"
+                  >
+                    <Home className="w-4 h-4" />
+                    Go Home
+                  </Button>
+                </div>
               </div>
 
               <p className="text-xs text-center text-muted-foreground">