Merge pull request #4024 from OneCommunityGlobal/kanishk_fix_for_white_screen_page

Kanishk attempted fix white screen bug on first visit to pages

Author: one-community

src/actions/authActions.js

@@ -115,10 +115,40 @@ export const getHeaderData = userId => {
   };
 };
 
-export const logoutUser = () => dispatch => {
+export const logoutUser = (isCrossTabLogout = false) => dispatch => {
   // Clear any active force-logout timer before logging out
   dispatch(stopForceLogout());
+  
+  // Only signal other tabs if this is NOT a cross-tab logout
+  // (to prevent infinite loops when responding to storage events)
+  if (!isCrossTabLogout) {
+    // Set a flag to signal other tabs to log out
+    // This flag will trigger a storage event in other tabs
+    localStorage.setItem('logoutFlag', 'true');
+    
+    // Use BroadcastChannel API for more reliable cross-tab communication
+    if (typeof BroadcastChannel !== 'undefined') {
+      try {
+        const channel = new BroadcastChannel('auth_sync');
+        channel.postMessage({ type: 'logout', timestamp: Date.now() });
+        // Close the channel after sending
+        setTimeout(() => channel.close(), 100);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.warn('BroadcastChannel not available:', error);
+      }
+    }
+    
+    // Clear the logout flag after a short delay to allow other tabs to detect it
+    // We use setTimeout to ensure the storage event fires first
+    setTimeout(() => {
+      localStorage.removeItem('logoutFlag');
+    }, 500);
+  }
+  
+  // Remove the token
   localStorage.removeItem(tokenKey);
+  
   httpService.setjwt(false);
   dispatch(setCurrentUser(null));
 };

src/components/App.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-import { Component, useEffect } from 'react';
+import { Component, useEffect, useState } from 'react';
 import { Provider, useSelector } from 'react-redux';
 import { BrowserRouter as Router, useLocation } from 'react-router-dom';
 import { PersistGate } from 'redux-persist/integration/react';
@@ -25,10 +25,8 @@ const queryClient = new QueryClient({
   },
 });
 
-// Check for token
-if (process.env.NODE_ENV !== 'test') {
-  initAuth();
-}
+// Move auth initialization to after store is ready
+let authInitialized = false;
 
 function UpdateDocumentTitle() {
   const location = useLocation();
@@ -126,36 +124,228 @@ function UpdateDocumentTitle() {
       try {
         initMessagingSocket(token);
       } catch (error) {
-        // console.error('WebSocket initialization failed:', error);
-        return error;
+        // eslint-disable-next-line no-console
+        console.error('WebSocket initialization failed:', error);
       }
     }
-    // else {
-    //   // console.warn('No auth token found for WebSocket connection');
-    // }
   }, []);
 
   return null;
 }
 
+// Error Boundary Component
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null, errorInfo: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    this.setState({
+      error: error,
+      errorInfo: errorInfo,
+    });
+
+    // Log the error
+    logger.logError(error);
+
+    // Log additional error info for debugging
+    console.error('Error Boundary caught an error:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div
+          className="d-flex justify-content-center align-items-center"
+          style={{ minHeight: '100vh' }}
+        >
+          <div className="text-center">
+            <h2>Something went wrong</h2>
+            <p>We are sorry, but something unexpected happened. Please try refreshing the page.</p>
+            <button
+              className="btn btn-primary"
+              onClick={() => {
+                this.setState({ hasError: false, error: null, errorInfo: null });
+                window.location.reload();
+              }}
+            >
+              Refresh Page
+            </button>
+            {process.env.NODE_ENV === 'development' && this.state.error && (
+              <details style={{ whiteSpace: 'pre-wrap', marginTop: '20px' }}>
+                <summary>Error Details (Development)</summary>
+                <p>{this.state.error.toString()}</p>
+                <p>{this.state.errorInfo.componentStack}</p>
+              </details>
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
 class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      storeReady: false,
+      authInitialized: false,
       hasError: false,
       error: null,
       errorInfo: null,
-    }; // Moving state initialization into constructor as per linting rule.
+    };
+    this.isLoggingOut = false; // Flag to prevent infinite logout loops
+    this.broadcastChannel = null; // BroadcastChannel for cross-tab communication
+    this.tokenCheckInterval = null; // Interval for periodic token checking
+    this.lastTokenValue = null; // Track last known token value
   }
 
-  static getDerivedStateFromError(error) {
-    // Update state so the next render will show the fallback UI
-    return { hasError: true };
+  componentDidMount() {
+    // Wait for store to be ready before initializing auth
+    this.setState({ storeReady: true });
+
+    // Initialize auth after a short delay to ensure store is fully ready
+    setTimeout(() => {
+      if (process.env.NODE_ENV !== 'test' && !authInitialized) {
+        try {
+          initAuth();
+          authInitialized = true;
+          this.setState({ authInitialized: true });
+          // Store initial token value
+          this.lastTokenValue = localStorage.getItem('token');
+        } catch (error) {
+          console.error('Error initializing auth:', error);
+          logger.logError(error);
+        }
+      }
+    }, 100);
+
+    // Listen for storage events to sync auth state between tabs
+    this.handleStorageChange = this.handleStorageChange.bind(this);
+    window.addEventListener('storage', this.handleStorageChange);
+
+    // Use BroadcastChannel API for more reliable cross-tab communication
+    if (typeof BroadcastChannel !== 'undefined') {
+      this.broadcastChannel = new BroadcastChannel('auth_sync');
+      this.broadcastChannel.onmessage = event => {
+        if (event.data && event.data.type === 'logout') {
+          this.handleCrossTabLogout();
+        }
+      };
+    }
+
+    // Periodic token check as fallback (checks every 500ms)
+    // This ensures we catch logout even if storage events don't fire
+    this.tokenCheckInterval = setInterval(() => {
+      this.checkTokenStatus();
+    }, 500);
+  }
+
+  componentWillUnmount() {
+    // Clean up storage event listener
+    if (this.handleStorageChange) {
+      window.removeEventListener('storage', this.handleStorageChange);
+    }
+    // Clean up BroadcastChannel
+    if (this.broadcastChannel) {
+      this.broadcastChannel.close();
+    }
+    // Clean up token check interval
+    if (this.tokenCheckInterval) {
+      clearInterval(this.tokenCheckInterval);
+    }
+  }
+
+  checkTokenStatus() {
+    // Periodic check to detect if token was removed in another tab
+    // This is a fallback for when storage events don't fire reliably
+    if (this.isLoggingOut) return; // Skip if already logging out
+
+    const currentToken = localStorage.getItem('token');
+    const wasAuthenticated = this.lastTokenValue !== null;
+    const isNowUnauthenticated = currentToken === null;
+
+    // If we had a token before and now it's gone, we were logged out
+    if (wasAuthenticated && isNowUnauthenticated) {
+      this.handleCrossTabLogout();
+    }
+
+    // Update last known token value
+    this.lastTokenValue = currentToken;
+  }
+
+  handleCrossTabLogout() {
+    // Handle cross-tab logout (called from storage events, BroadcastChannel, or token check)
+    if (!this.isLoggingOut) {
+      this.isLoggingOut = true;
+
+      // Immediately redirect to login - don't wait for Redux state update
+      // This ensures the user sees the login page right away
+      if (
+        window.location.pathname !== '/login' &&
+        !window.location.pathname.startsWith('/login') &&
+        !window.location.pathname.startsWith('/forgotpassword')
+      ) {
+        window.location.href = '/login';
+        return; // Exit early, let the redirect handle cleanup
+      }
+
+      // If already on login page, just update Redux state
+      if (store && store.dispatch) {
+        const { logoutUser } = require('../actions/authActions');
+        // Use a version of logoutUser that doesn't set the flag to prevent loops
+        store.dispatch(logoutUser(true)); // Pass true to indicate cross-tab logout
+      }
+
+      // Reset flag after a delay
+      setTimeout(() => {
+        this.isLoggingOut = false;
+      }, 1000);
+    }
+  }
+
+  handleStorageChange(event) {
+    // Sync auth state when localStorage changes in other tabs
+    if (event.key === 'token' || event.key === 'authToken') {
+      // Handle login sync - token was added in another tab
+      if (event.newValue && !authInitialized) {
+        try {
+          initAuth();
+          authInitialized = true;
+          this.setState({ authInitialized: true });
+        } catch (error) {
+          console.error('Error syncing auth from storage event:', error);
+        }
+      }
+      // Handle logout sync - token was removed in another tab
+      if (event.newValue === null && event.oldValue !== null && !this.isLoggingOut) {
+        // Token was removed in another tab, log out this tab
+        this.handleCrossTabLogout();
+      }
+    }
+    // Also check for explicit logout flag
+    if (event.key === 'logoutFlag') {
+      if (event.newValue === 'true' && !this.isLoggingOut) {
+        // Another tab triggered logout, log out this tab
+        this.handleCrossTabLogout();
+        // Clear the flag
+        localStorage.removeItem('logoutFlag');
+      }
+    }
   }
 
   componentDidCatch(error, errorInfo) {
-    // Log the error
     logger.logError(error);
+    // eslint-disable-next-line no-console
+    console.error('App component caught an error:', error, errorInfo);
 
     // Update state with error details
     this.setState({
@@ -226,15 +416,17 @@ class App extends Component {
     return (
       <Provider store={store}>
         <PersistGate loading={<Loading />} persistor={persistor}>
-          <QueryClientProvider client={queryClient}>
-            <ModalProvider>
-              <Router>
-                <ThemeManager />
-                <UpdateDocumentTitle />
-                {routes}
-              </Router>
-            </ModalProvider>
-          </QueryClientProvider>
+          <ErrorBoundary>
+            <QueryClientProvider client={queryClient}>
+              <ModalProvider>
+                <Router>
+                  <ThemeManager />
+                  <UpdateDocumentTitle />
+                  {routes}
+                </Router>
+              </ModalProvider>
+            </QueryClientProvider>
+          </ErrorBoundary>
         </PersistGate>
       </Provider>
     );