feat: improved error handling for i18n config change event

namecheap · StyleT · Nov 30, 2020 · Sep 18, 2020 · Sep 21, 2020 · Sep 21, 2020
commit 747c1af88d313f44a543ecd40b011f159303e285
diff --git a/ilc/client.js b/ilc/client.js
@@ -23,7 +23,13 @@ if (System === undefined) {
 const registryConf = getIlcConfig();
 const state = initIlcState();
 
-const i18n = registryConf.settings.i18n.enabled ? new I18n(registryConf.settings.i18n, singleSpa) : null;
+const appErrorHandlerFactory = (appName, slotName) => {
+    return fragmentErrorHandlerFactory(registryConf, router.getCurrentRoute, appName, slotName);
+};
+
+const i18n = registryConf.settings.i18n.enabled
+    ? new I18n(registryConf.settings.i18n, singleSpa, appErrorHandlerFactory)
+    : null;
 const router = new Router(registryConf, state, i18n ? i18n.unlocalizeUrl : undefined, singleSpa);
 const asyncBootUp = new AsyncBootUp();
 
@@ -32,7 +38,10 @@ const asyncBootUp = new AsyncBootUp();
 if (!registryConf.settings.amdDefineCompatibilityMode) {
     window.define = window.ILC.define;
 }
-window.ILC.getAppSdkAdapter = appId => ({appId, intl: i18n ? i18n.getAdapter() : null});
+window.ILC.getAppSdkAdapter = appId => ({
+    appId,
+    intl: i18n ? i18n.getAdapter() : null
+});
 
 selectSlotsToRegister([...registryConf.routes, registryConf.specialRoutes['404']]).forEach((slots) => {
     Object.keys(slots).forEach((slotName) => {
@@ -77,7 +86,7 @@ selectSlotsToRegister([...registryConf.routes, registryConf.specialRoutes['404']
                 getCurrentPathProps: () => router.getCurrentRouteProps(appName, slotName),
                 getCurrentBasePath: () => router.getCurrentRoute().basePath,
                 appId: fragmentName, // Unique application ID, if same app will be rendered twice on a page - it will get different IDs
-                errorHandler: fragmentErrorHandlerFactory(registryConf, router.getCurrentRoute, appName, slotName),
+                errorHandler: appErrorHandlerFactory(appName, slotName),
                 appSdk,
             }
         );

diff --git a/ilc/client/dispatchSynchronizedEvent.js b/ilc/client/dispatchSynchronizedEvent.js
@@ -0,0 +1,62 @@
+/**
+ * Allows to dispatch an event reaction on which can be synchronized between all listening parties.
+ * Can be used to perform some change of the UI simultaneously across all concerned parties even if it requires
+ * some resources to be loaded over the network.
+ *
+ * @param {string} eventName
+ * @param {Object} eventDetail
+ * @param {Function} errorHandler
+ * @return {Promise<void>} - resolves when all parties finished event handling
+ */
+export default function (eventName, eventDetail, errorHandler) {
+    const handlers = [];
+    const detail = Object.assign(eventDetail, {
+        addHandler: v => handlers.push(v),
+    });
+
+    //Here "parties" array will be filled with listeners
+    window.dispatchEvent(new CustomEvent(eventName, {detail}));
+
+    handlers.forEach(v => {
+        v.errorHandler = (...args) => errorHandler(v.actorId, ...args);
+        v.prepare = wrapWithPromise(v.prepare);
+        v.execute = wrapWithPromise(v.execute);
+    });
+
+    const preparationPromises = handlers.map(v => v.prepare(eventDetail));
+
+    return Promise.allSettled(preparationPromises).then(results => {
+        for (let ii = 0; ii < results.length; ii++) {
+            const row = results[ii];
+
+            if (row.status === 'rejected') {
+                handlers[ii].errorHandler(row.reason);
+                handlers.splice(ii, 1);
+                results.splice(ii, 1);
+                ii--;
+            }
+        }
+
+        const executionPromises = handlers.map((v, i) => v.execute(eventDetail, results[i].value));
+
+        return Promise.allSettled(executionPromises);
+    }).then(results => {
+        results
+            .map((v, i) => {
+                v.errorHandler = handlers[i].errorHandler;
+                return v;
+            })
+            .filter(v => v.status === 'rejected')
+            .forEach(v => v.errorHandler(v.reason));
+    });
+}
+
+function wrapWithPromise(callback) {
+    return (...args) => new Promise((resolve, reject) => {
+        try {
+            resolve(callback.apply(null, args));
+        } catch (err) {
+            reject(err);
+        }
+    });
+}
diff --git a/ilc/client/i18n.js b/ilc/client/i18n.js
@@ -1,9 +1,11 @@
 import {Intl as IlcIntl} from 'ilc-sdk/app';
+import Cookies from 'js-cookie';
+
 import transactionManagerFactory from './TransactionManager';
 import {triggerAppChange} from './navigationEvents';
-import {iterablePromise} from './utils';
+import {appIdToNameAndSlot} from './utils';
 import i18nCookie from '../common/i18nCookie';
-import Cookies from 'js-cookie';
+import dispatchSynchronizedEvent from "./dispatchSynchronizedEvent";
 
 export default class I18n {
     #transactionManager;
@@ -12,15 +14,18 @@ export default class I18n {
     #singleSpa;
     #rollbackInProgress = false;
     #triggerAppChange;
+    #appErrorHandlerFactory;
 
     constructor(
         config,
         singleSpa,
+        appErrorHandlerFactory,
         triggerAppsChange = triggerAppChange,
         transactionManager = transactionManagerFactory()
     ) {
         this.#config = config;
         this.#singleSpa = singleSpa;
+        this.#appErrorHandlerFactory = appErrorHandlerFactory;
         this.#triggerAppChange = triggerAppsChange;
         this.#transactionManager = transactionManager;
         this.#prevConfig = this.#get();
@@ -79,35 +84,17 @@ export default class I18n {
         this.#set(currConfig);
         this.#prevConfig = currConfig;
 
-        const promises = [];
-        const onAllAppsReady = () => iterablePromise(promises).then(() => this.#rollbackInProgress = false);
-        const detail = Object.assign(this.#get(), {
-            addPendingResources: async (promisesList) => {
-                promises.push(...promisesList);
-
-                const values = await Promise.all(promisesList);
-                await onAllAppsReady();
-
-                return values;
-            },
-            onAllAppsReady: onAllAppsReady,
-        });
-
-        window.dispatchEvent(new CustomEvent('ilc:intl-update', {detail}));
-
-        const afterAllResReady = onAllAppsReady().catch(err => {
-            console.warn(`ILC: error happened during change of the i18n configuration. See error details below. Rolling back...`);
-            console.error(err);
-            if (this.#rollbackInProgress === false) {
-                this.#rollbackInProgress = true;
-                this.#setIntl(prevConfig);
-            } else {
-                console.error(`ILC: error happened during i18n configuration change rollback... See error details above.`)
+        const changeFlow = dispatchSynchronizedEvent(
+            'ilc:intl-update',
+            this.#get(),
+            (actorId, ...args) => {
+                const {appName, slotName} = appIdToNameAndSlot(actorId);
+                const errorHandler = this.#appErrorHandlerFactory(appName, slotName);
+                errorHandler(...args);
             }
-        });
-        this.#transactionManager.handleAsyncAction(afterAllResReady);
+        );
 
-        return afterAllResReady;
+        this.#transactionManager.handleAsyncAction(changeFlow);
     };
 
     #get = () => i18nCookie.decode(Cookies.get(i18nCookie.name));