More robust dependency fetching and module saving

Author: Ives van Hoorne

src/app/index.html

@@ -35,7 +35,7 @@
     })(window, document, 'script', 'dataLayer', 'GTM-T3L6RFK');
   </script>
   <!-- End Google Tag Manager -->
-  <script src="https://cdn.ravenjs.com/3.14.0/raven.min.js" crossorigin="anonymous"></script>
+  <script src="https://cdn.ravenjs.com/3.17.0/raven.min.js" crossorigin="anonymous"></script>
   <script async src="//cdn.headwayapp.co/widget.js"></script>
 
   <script src="https://js.stripe.com/v3/"></script>

src/app/store/entities/sandboxes/actions/files.js

@@ -390,18 +390,26 @@ const saveModuleCode = (id: string, moduleId: string) => async (
     : module;
   dispatch(moduleActions.setCode(newModule.id, module.code));
 
-  await dispatch(
-    doRequest(
-      SAVE_MODULE_CODE_API_ACTIONS,
-      `sandboxes/${sandboxId}/modules/${module.shortid}`,
-      {
-        method: 'PUT',
-        body: { module: { code: module.code } },
-      },
-    ),
-  );
-
-  dispatch(moduleActions.setModuleSynced(newModule.id));
+  try {
+    await dispatch(
+      doRequest(
+        SAVE_MODULE_CODE_API_ACTIONS,
+        `sandboxes/${sandboxId}/modules/${module.shortid}`,
+        {
+          method: 'PUT',
+          body: { module: { code: module.code } },
+        },
+      ),
+    );
+    dispatch(moduleActions.setModuleSynced(newModule.id));
+  } catch (e) {
+    dispatch(
+      notificationActions.addNotification(
+        'Could not save the module, please try again.',
+        'error',
+      ),
+    );
+  }
 };
 /**
    * Updates all modules in a sandbox at once (only the code)
@@ -418,22 +426,31 @@ const massUpdateModules = (id: string) => async (
   const modulesInSandbox = sandbox.modules.map(mid => modules[mid]);
   const modulesNotInSyncInSandbox = modulesInSandbox.filter(m => m.isNotSynced);
 
-  await dispatch(
-    doRequest(
-      MASS_UPDATE_MODULE_API_ACTIONS,
-      `sandboxes/${sandboxId}/modules/mupdate`,
-      {
-        method: 'PUT',
-        body: {
-          modules: modulesNotInSyncInSandbox,
+  try {
+    await dispatch(
+      doRequest(
+        MASS_UPDATE_MODULE_API_ACTIONS,
+        `sandboxes/${sandboxId}/modules/mupdate`,
+        {
+          method: 'PUT',
+          body: {
+            modules: modulesNotInSyncInSandbox,
+          },
         },
-      },
-    ),
-  );
+      ),
+    );
 
-  modulesNotInSyncInSandbox.forEach(m =>
-    dispatch(moduleActions.setModuleSynced(m.id)),
-  );
+    modulesNotInSyncInSandbox.forEach(m =>
+      dispatch(moduleActions.setModuleSynced(m.id)),
+    );
+  } catch (e) {
+    dispatch(
+      notificationActions.addNotification(
+        'Could not save the modules, please try again.',
+        'error',
+      ),
+    );
+  }
 };
 
 export default {

src/app/store/entities/sandboxes/actions/index.js

@@ -351,7 +351,7 @@ export default {
     } catch (e) {
       dispatch(
         notificationActions.addNotification(
-          'Could not fetch dependencies',
+          `Could not fetch dependencies: ${e.message}`,
           'error',
         ),
       );

src/app/store/entities/sandboxes/bundler/index.js

@@ -1,32 +1,34 @@
 // @flow
 import _debug from 'app/utils/debug';
+import notifActions from 'app/store/notifications/actions';
 
 import { createAPIActions } from '../../../api/actions'; // eslint-disable-line
 
 import callApi from '../../../services/api';
 import dependenciesToQuery from './dependencies-to-query';
 import logError from '../../../../utils/error';
+import delay from '../../../services/delay';
 
 const debug = _debug('cs:app:packager');
 
 export const PACKAGER_URL = 'https://webpack-dll-prod.herokuapp.com/v6';
 
-const RETRY_COUNT = 10;
+const RETRY_COUNT = 20;
 
 /**
  * Request the packager, if retries > RETRY_COUNT it will throw if something goes wrong
  * otherwise it will retry again with an incremented retry
  *
  * @param {string} query The dependencies to call
  */
-async function requestPackager(query: string) {
+async function requestPackager(query: string, dispatch: ?Function) {
   let retries = 0;
 
   while (true) {
     debug(`Trying to call packager for ${retries} time`);
     try {
       const url = `${PACKAGER_URL}/${query}`;
-      const result = await callApi(`${url}/manifest.json`); // eslint-disable-line
+      const result = await callApi(`${url}/manifest.json`); // eslint-disable-line no-await-in-loop
 
       return { ...result, url };
     } catch (e) {
@@ -35,17 +37,28 @@ async function requestPackager(query: string) {
       // 504 status code means the bundler is still bundling
       if (retries < RETRY_COUNT && statusCode === 504) {
         retries += 1;
+      } else if (retries < RETRY_COUNT && statusCode === 500) {
+        if (dispatch) {
+          dispatch(
+            notifActions.addNotification(
+              'It seems like all packagers are busy, retrying in 10 seconds...',
+              'warning',
+            ),
+          );
+        }
+        await delay(1000 * 10); // eslint-disable-line no-await-in-loop
+        retries += 1;
       } else {
         throw e;
       }
     }
   }
 }
 
-async function callPackager(dependencies: Object) {
+async function callPackager(dependencies: Object, dispatch: Function) {
   const dependencyUrl = dependenciesToQuery(dependencies);
 
-  const result = await requestPackager(dependencyUrl);
+  const result = await requestPackager(dependencyUrl, dispatch);
   return result;
 }
 
@@ -63,11 +76,12 @@ export default function fetch(
       dispatch({ type: actions.REQUEST, initial: true, id });
       // New Packager flow
       try {
-        const result = await callPackager(npmDependencies);
+        const result = await callPackager(npmDependencies, dispatch);
 
         dispatch({ type: actions.SUCCESS, id, result });
         return result;
       } catch (e) {
+        e.message = `Could not fetch dependencies: ${e.message}`;
         logError(e, { level: 'error', service: 'packager' });
         dispatch({ type: actions.FAILURE, id });