@capillarytech/cap-ui-utils 3.0.5 → 3.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capillarytech/cap-ui-utils",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "Utility functions shared accross all the modules",
   "main": "index.js",
   "scripts": {

package/utils/loadable.js

@@ -2,6 +2,8 @@ import React, { lazy } from 'react';
 
 export const FORCE_REFRESH_NOTIFIER = 'showForceRefreshNotifier';
 export const FORCE_REFRESH_SECONDS = 5;
+export const MAX_RETRY_ATTEMPTS = 3;
+const DEFAULT_STORAGE_PREFIX = 'invalid_import_';
 
 class DummyComponent extends React.Component {
   render() {
@@ -17,40 +19,53 @@ const reloadWithDelay = (delay = FORCE_REFRESH_SECONDS) =>
     }, delay * 1000);
   });
 
-export const lazyWithRetry = (importFunction) =>
-  lazy(async () => {
-    // get refresh flag from session storage
-    const pageHasAlreadyBeenForceRefreshed = JSON.parse(
-      window.sessionStorage.getItem(
-        'page-has-been-force-refreshed'
-      ) || 'false'
-    );
+const getStorageKey = (key, prefix = DEFAULT_STORAGE_PREFIX) => `${prefix}__${key}`;
+
+const clearRetryCount = (prefix) => {
+  window.localStorage.removeItem(getStorageKey('retry-count', prefix));
+};
+
+// Generate a unique prefix based on the import function
+const generateUniquePrefix = (importFunction) => {
+  // Convert the import function to string and create a hash
+  const importStr = importFunction.toString();
+  let hash = 0;
+  for (let i = 0; i < importStr.length; i++) {
+    const char = importStr.charCodeAt(i);
+    hash = ((hash << 5) - hash) + char;
+    hash = hash & hash; // Convert to 32-bit integer
+  }
+  // Convert to base36 (alphanumeric) to make it shorter and URL-safe
+  return `${DEFAULT_STORAGE_PREFIX}${Math.abs(hash).toString(36)}`;
+};
+
+export const lazyWithRetry = (importFunction) => {
+  // Generate unique prefix based on the import function
+  const uniquePrefix = generateUniquePrefix(importFunction);
+  
+  return lazy(async () => {
+    // get retry count from localStorage
+    const retryCount = parseInt(window.localStorage.getItem(getStorageKey('retry-count', uniquePrefix)) || '0', 10);
     try {
       const component = await importFunction();
-      // set refresh flag to false once component is imported
-      window.sessionStorage.setItem(
-        'page-has-been-force-refreshed',
-        'false'
-      );
+      // clear retry count once component is successfully imported
+      clearRetryCount(uniquePrefix);
       return component;
     } catch (error) {
-      if (!pageHasAlreadyBeenForceRefreshed) {
-        // Assuming that the user is NOT on the latest version of the application.
-        window.sessionStorage.setItem(
-          'page-has-been-force-refreshed',
-          'true'
-        );
-        // Notify the main app to show notification if needed
-        window.postMessage(FORCE_REFRESH_NOTIFIER, window.location.origin);
-        // Let's refresh the page immediately.
-        await reloadWithDelay();
-        return { default: DummyComponent };
+      // Check if we've exceeded max retries
+      if (retryCount >= MAX_RETRY_ATTEMPTS) {
+        clearRetryCount(uniquePrefix);
+        throw error;
       }
-      // The page has already been reloaded
-      // Assuming that user is already using the latest version of the application.
-      // Let's let the application crash and raise the error.
-      throw error;
+      // Increment retry count and refresh
+      window.localStorage.setItem(getStorageKey('retry-count', uniquePrefix), (retryCount + 1).toString());
+      // Notify the main app to show notification if needed
+      window.postMessage(FORCE_REFRESH_NOTIFIER, window.location.origin);
+      // Let's refresh the page immediately.
+      await reloadWithDelay();
+      return { default: DummyComponent };
     }
   });
+};
 
 export default lazyWithRetry;