feat(logout): implement cache cleanup and service worker unregistration on logout

- Added a new utility, CacheCleanup, to handle clearing caches and unregistering the service worker during user logout.
- Enhanced the LoggingOutPage to utilize CacheCleanup for clearing local session and caches before redirecting to the login page.
- Introduced ModuleErrorBoundary to manage module loading errors, providing user feedback and options to retry or reload the application.
- Updated App component to include global error handlers for improved error management related to module loading issues.

worklenz-frontend/src/App.tsx

@@ -5,6 +5,7 @@ import i18next from 'i18next';
 
 // Components
 import ThemeWrapper from './features/theme/ThemeWrapper';
+import ModuleErrorBoundary from './components/ModuleErrorBoundary';
 
 // Routes
 import router from './app/routes';
@@ -113,6 +114,60 @@ const App: React.FC = memo(() => {
     };
   }, []);
 
+  // Global error handlers for module loading issues
+  useEffect(() => {
+    const handleUnhandledRejection = (event: PromiseRejectionEvent) => {
+      const error = event.reason;
+      
+      // Check if this is a module loading error
+      if (
+        error?.message?.includes('Failed to fetch dynamically imported module') ||
+        error?.message?.includes('Loading chunk') ||
+        error?.name === 'ChunkLoadError'
+      ) {
+        console.error('Unhandled module loading error:', error);
+        event.preventDefault(); // Prevent default browser error handling
+        
+        // Clear caches and reload
+        import('./utils/cache-cleanup').then(({ default: CacheCleanup }) => {
+          CacheCleanup.clearAllCaches()
+            .then(() => CacheCleanup.forceReload('/auth/login'))
+            .catch(() => window.location.reload());
+        });
+      }
+    };
+
+    const handleError = (event: ErrorEvent) => {
+      const error = event.error;
+      
+      // Check if this is a module loading error
+      if (
+        error?.message?.includes('Failed to fetch dynamically imported module') ||
+        error?.message?.includes('Loading chunk') ||
+        error?.name === 'ChunkLoadError'
+      ) {
+        console.error('Global module loading error:', error);
+        event.preventDefault(); // Prevent default browser error handling
+        
+        // Clear caches and reload
+        import('./utils/cache-cleanup').then(({ default: CacheCleanup }) => {
+          CacheCleanup.clearAllCaches()
+            .then(() => CacheCleanup.forceReload('/auth/login'))
+            .catch(() => window.location.reload());
+        });
+      }
+    };
+
+    // Add global error handlers
+    window.addEventListener('unhandledrejection', handleUnhandledRejection);
+    window.addEventListener('error', handleError);
+
+    return () => {
+      window.removeEventListener('unhandledrejection', handleUnhandledRejection);
+      window.removeEventListener('error', handleError);
+    };
+  }, []);
+
   // Register service worker
   useEffect(() => {
     registerSW({
@@ -150,12 +205,14 @@ const App: React.FC = memo(() => {
   return (
     <Suspense fallback={<SuspenseFallback />}>
       <ThemeWrapper>
-        <RouterProvider
-          router={router}
-          future={{
-            v7_startTransition: true,
-          }}
-        />
+        <ModuleErrorBoundary>
+          <RouterProvider
+            router={router}
+            future={{
+              v7_startTransition: true,
+            }}
+          />
+        </ModuleErrorBoundary>
       </ThemeWrapper>
     </Suspense>
   );