Handle subscription errors more clearly

Author: CompuIves

packages/app/src/app/overmind/internalActions.ts

@@ -340,6 +340,46 @@ export const closeTabByIndex: Action<number> = ({ state }, tabIndex) => {
   state.editor.tabs.splice(tabIndex, 1);
 };
 
+export const getErrorMessage: Action<{ error: ApiError | Error }, string> = (
+  context,
+  { error }
+) => {
+  const isGenericError = !('response' in error) || error.response.status >= 500;
+
+  if (isGenericError) {
+    return error.message;
+  }
+
+  const { response } = error as ApiError;
+  /*
+    Update error message with what is coming from the server
+  */
+  const result = response.data;
+
+  if (result) {
+    if (typeof result === 'string') {
+      return result;
+    }
+    if ('errors' in result) {
+      const errors = values(result.errors)[0];
+      const fields = Object.keys(result.errors);
+      if (Array.isArray(errors)) {
+        if (errors[0]) {
+          return `${fields[0]}: ${errors[0]}`; // eslint-disable-line no-param-reassign,prefer-destructuring
+        }
+      } else {
+        return errors; // eslint-disable-line no-param-reassign
+      }
+    } else if (result.error) {
+      return result.error; // eslint-disable-line no-param-reassign
+    } else if (response.status === 413) {
+      return 'File too large, upload limit is 5MB.';
+    }
+  }
+
+  return error.message;
+};
+
 export const handleError: Action<{
   /*
     The message that will show as title of the notification
@@ -386,30 +426,7 @@ export const handleError: Action<{
     return;
   }
 
-  /*
-    Update error message with what is coming from the server
-  */
-  const result = response.data;
-
-  if (result) {
-    if (typeof result === 'string') {
-      error.message = result;
-    } else if ('errors' in result) {
-      const errors = values(result.errors)[0];
-      const fields = Object.keys(result.errors);
-      if (Array.isArray(errors)) {
-        if (errors[0]) {
-          error.message = `${fields[0]}: ${errors[0]}`; // eslint-disable-line no-param-reassign,prefer-destructuring
-        }
-      } else {
-        error.message = errors; // eslint-disable-line no-param-reassign
-      }
-    } else if (result.error) {
-      error.message = result.error; // eslint-disable-line no-param-reassign
-    } else if (response.status === 413) {
-      error.message = 'File too large, upload limit is 5MB.';
-    }
-  }
+  error.message = actions.internal.getErrorMessage({ error });
 
   const notificationActions = {
     primary: [],

packages/app/src/app/overmind/namespaces/patron/actions.ts

@@ -14,7 +14,7 @@ export const priceChanged: Action<{ price: number }> = (
 export const createSubscriptionClicked: AsyncAction<{
   token: string;
   coupon: string;
-}> = async ({ state, effects }, { token, coupon }) => {
+}> = async ({ state, effects, actions }, { token, coupon }) => {
   effects.analytics.track('Create Patron Subscription');
   state.patron.error = null;
   state.patron.isUpdatingSubscription = true;
@@ -32,17 +32,28 @@ export const createSubscriptionClicked: AsyncAction<{
     ) {
       try {
         await effects.stripe.handleCardPayment(error.data.client_secret);
-
         state.user = await effects.api.getCurrentUser();
         state.patron.error = null;
       } catch (e) {
+        actions.internal.handleError({
+          message: 'Could not create subscription',
+          error: e,
+        });
+
         state.patron.error = e.message;
+
         effects.analytics.track('Create Subscription Error', {
           error: e.message,
         });
       }
     } else {
+      actions.internal.handleError({
+        message: 'Could not create subscription',
+        error,
+      });
+
       state.patron.error = error.message;
+
       effects.analytics.track('Create Subscription Error', {
         error: error.message,
       });

packages/common/src/utils/analytics/amplitude.ts

@@ -18,13 +18,17 @@ const markLastTimeEventSent = () => {
   localStorage.setItem('csb-last-event-sent', Date.now().toString());
 };
 
-const amplitudePromise = async () => {
+const getAmplitude = async (): Promise<any | false> => {
+  if (process.env.NODE_ENV !== 'production') {
+    return false;
+  }
+
   for (let i = 0; i < 10; i++) {
     if (
       typeof global.amplitude !== 'undefined' &&
       global.amplitude.getInstance()._storageSuffix
     ) {
-      return true;
+      return global.amplitude;
     }
 
     // eslint-disable-next-line no-await-in-loop
@@ -35,59 +39,59 @@ const amplitudePromise = async () => {
 };
 
 export const identify = async (key: string, value: any) => {
-  await amplitudePromise();
-  if (typeof global.amplitude !== 'undefined') {
-    const identity = new global.amplitude.Identify();
+  const amplitude = await getAmplitude();
+  if (amplitude) {
+    const identity = new amplitude.Identify();
     identity.set(key, value);
-    global.amplitude.identify(identity);
+    amplitude.identify(identity);
     debug('[Amplitude] Identifying', key, value);
   } else {
     debug('[Amplitude] NOT identifying because Amplitude is not loaded');
   }
 };
 
 export const setUserId = async (userId: string) => {
-  await amplitudePromise();
-  if (typeof global.amplitude !== 'undefined') {
+  const amplitude = await getAmplitude();
+  if (amplitude) {
     debug('[Amplitude] Setting User ID', userId);
     identify('userId', userId);
 
-    global.amplitude.getInstance().setUserId(userId);
+    amplitude.getInstance().setUserId(userId);
   } else {
     debug('[Amplitude] NOT setting userid because Amplitude is not loaded');
   }
 };
 
 export const resetUserId = async () => {
-  await amplitudePromise();
-  if (typeof global.amplitude !== 'undefined') {
+  const amplitude = await getAmplitude();
+  if (amplitude) {
     debug('[Amplitude] Resetting User ID');
     identify('userId', null);
 
     if (
-      global.amplitude.getInstance().options &&
-      global.amplitude.getInstance().options.userId
+      amplitude.getInstance().options &&
+      amplitude.getInstance().options.userId
     ) {
-      global.amplitude.getInstance().setUserId(null);
-      global.amplitude.getInstance().regenerateDeviceId();
+      amplitude.getInstance().setUserId(null);
+      amplitude.getInstance().regenerateDeviceId();
     }
   } else {
     debug('[Amplitude] NOT resetting user id because Amplitude is not loaded');
   }
 };
 
 export const track = async (eventName: string, data: any) => {
-  await amplitudePromise();
-  if (typeof global.amplitude !== 'undefined') {
+  const amplitude = await getAmplitude();
+  if (amplitude) {
     const currentTime = Date.now();
     if (currentTime - getLastTimeEventSent() > NEW_SESSION_TIME) {
       // We send a separate New Session event if people have been inactive for a while
-      global.amplitude.logEvent('New Session');
+      amplitude.logEvent('New Session');
     }
     markLastTimeEventSent();
 
     debug('[Amplitude] Tracking', eventName, data);
-    global.amplitude.logEvent(eventName, data);
+    amplitude.logEvent(eventName, data);
   } else {
     debug(
       '[Amplitude] NOT tracking because Amplitude is not loaded',