Add React 16 didCatch/ErrorBoundary component

8 files changed, 118 insertions, 91 deletions

diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index 5818af0b1..019b3d7d6 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -9,6 +9,7 @@ import AppStore from '../../stores/AppStore';
 import { gaPage } from '../../lib/analytics';
 
 import AccountDashboard from '../../components/settings/account/AccountDashboard';
+import ErrorBoundary from '../../components/util/ErrorBoundary';
 
 const { BrowserWindow } = remote;
 
@@ -67,22 +68,24 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
     const isLoadingPlans = payment.plansRequest.isExecuting;
 
     return (
-      <AccountDashboard
-        user={user.data}
-        orders={payment.orders}
-        isLoading={isLoadingUserInfo}
-        isLoadingOrdersInfo={isLoadingOrdersInfo}
-        isLoadingPlans={isLoadingPlans}
-        userInfoRequestFailed={user.getUserInfoRequest.wasExecuted && user.getUserInfoRequest.isError}
-        retryUserInfoRequest={() => this.reloadData()}
-        isCreatingPaymentDashboardUrl={payment.createDashboardUrlRequest.isExecuting}
-        openDashboard={price => this.handlePaymentDashboard(price)}
-        openExternalUrl={url => openExternalUrl({ url })}
-        onCloseSubscriptionWindow={() => this.onCloseWindow()}
-        deleteAccount={userActions.delete}
-        isLoadingDeleteAccount={user.deleteAccountRequest.isExecuting}
-        isDeleteAccountSuccessful={user.deleteAccountRequest.wasExecuted && !user.deleteAccountRequest.isError}
-      />
+      <ErrorBoundary>
+        <AccountDashboard
+          user={user.data}
+          orders={payment.orders}
+          isLoading={isLoadingUserInfo}
+          isLoadingOrdersInfo={isLoadingOrdersInfo}
+          isLoadingPlans={isLoadingPlans}
+          userInfoRequestFailed={user.getUserInfoRequest.wasExecuted && user.getUserInfoRequest.isError}
+          retryUserInfoRequest={() => this.reloadData()}
+          isCreatingPaymentDashboardUrl={payment.createDashboardUrlRequest.isExecuting}
+          openDashboard={price => this.handlePaymentDashboard(price)}
+          openExternalUrl={url => openExternalUrl({ url })}
+          onCloseSubscriptionWindow={() => this.onCloseWindow()}
+          deleteAccount={userActions.delete}
+          isLoadingDeleteAccount={user.deleteAccountRequest.isExecuting}
+          isDeleteAccountSuccessful={user.deleteAccountRequest.wasExecuted && !user.deleteAccountRequest.isError}
+        />
+      </ErrorBoundary>
     );
   }
 }
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index f4915f68b..f0b7268d6 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -13,6 +13,8 @@ import { gaPage } from '../../lib/analytics';
 
 import ServiceError from '../../components/settings/services/ServiceError';
 import EditServiceForm from '../../components/settings/services/EditServiceForm';
+import ErrorBoundary from '../../components/util/ErrorBoundary';
+
 import { required, url, oneRequired } from '../../helpers/validation-helpers';
 import { getSelectOptions } from '../../helpers/i18n-helpers';
 
@@ -302,20 +304,22 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
     const form = this.prepareForm(recipe, service, proxyFeature);
 
     return (
-      <EditServiceForm
-        action={action}
-        recipe={recipe}
-        service={service}
-        user={user.data}
-        form={form}
-        status={services.actionStatus}
-        isSaving={services.updateServiceRequest.isExecuting || services.createServiceRequest.isExecuting}
-        isDeleting={services.deleteServiceRequest.isExecuting}
-        onSubmit={d => this.onSubmit(d)}
-        onDelete={() => this.deleteService()}
-        isProxyFeatureEnabled={proxyFeature.isEnabled}
-        isProxyFeaturePremiumFeature={proxyFeature.isPremium}
-      />
+      <ErrorBoundary>
+        <EditServiceForm
+          action={action}
+          recipe={recipe}
+          service={service}
+          user={user.data}
+          form={form}
+          status={services.actionStatus}
+          isSaving={services.updateServiceRequest.isExecuting || services.createServiceRequest.isExecuting}
+          isDeleting={services.deleteServiceRequest.isExecuting}
+          onSubmit={d => this.onSubmit(d)}
+          onDelete={() => this.deleteService()}
+          isProxyFeatureEnabled={proxyFeature.isEnabled}
+          isProxyFeaturePremiumFeature={proxyFeature.isPremium}
+        />
+      </ErrorBoundary>
     );
   }
 }
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 350bd9f8a..f1706a721 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -16,6 +16,7 @@ import { getSelectOptions } from '../../helpers/i18n-helpers';
 
 
 import EditSettingsForm from '../../components/settings/settings/EditSettingsForm';
+import ErrorBoundary from '../../components/util/ErrorBoundary';
 
 const messages = defineMessages({
   autoLaunchOnStart: {
@@ -216,20 +217,22 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
     const form = this.prepareForm();
 
     return (
-      <EditSettingsForm
-        form={form}
-        checkForUpdates={checkForUpdates}
-        installUpdate={installUpdate}
-        isCheckingForUpdates={updateStatus === updateStatusTypes.CHECKING}
-        isUpdateAvailable={updateStatus === updateStatusTypes.AVAILABLE}
-        noUpdateAvailable={updateStatus === updateStatusTypes.NOT_AVAILABLE}
-        updateIsReadyToInstall={updateStatus === updateStatusTypes.DOWNLOADED}
-        onSubmit={d => this.onSubmit(d)}
-        cacheSize={cacheSize}
-        isClearingAllCache={isClearingAllCache}
-        onClearAllCache={clearAllCache}
-        isSpellcheckerPremiumFeature={spellcheckerConfig.isPremiumFeature}
-      />
+      <ErrorBoundary>
+        <EditSettingsForm
+          form={form}
+          checkForUpdates={checkForUpdates}
+          installUpdate={installUpdate}
+          isCheckingForUpdates={updateStatus === updateStatusTypes.CHECKING}
+          isUpdateAvailable={updateStatus === updateStatusTypes.AVAILABLE}
+          noUpdateAvailable={updateStatus === updateStatusTypes.NOT_AVAILABLE}
+          updateIsReadyToInstall={updateStatus === updateStatusTypes.DOWNLOADED}
+          onSubmit={d => this.onSubmit(d)}
+          cacheSize={cacheSize}
+          isClearingAllCache={isClearingAllCache}
+          onClearAllCache={clearAllCache}
+          isSpellcheckerPremiumFeature={spellcheckerConfig.isPremiumFeature}
+        />
+      </ErrorBoundary>
     );
   }
 }
diff --git a/src/containers/settings/EditUserScreen.js b/src/containers/settings/EditUserScreen.js
index 3da3e8d2c..adad8a9bd 100644
--- a/src/containers/settings/EditUserScreen.js
+++ b/src/containers/settings/EditUserScreen.js
@@ -6,6 +6,8 @@ import { defineMessages, intlShape } from 'react-intl';
 import UserStore from '../../stores/UserStore';
 import Form from '../../lib/Form';
 import EditUserForm from '../../components/settings/user/EditUserForm';
+import ErrorBoundary from '../../components/util/ErrorBoundary';
+
 import { required, email, minLength } from '../../helpers/validation-helpers';
 import { gaPage } from '../../lib/analytics';
 
@@ -140,14 +142,16 @@ export default @inject('stores', 'actions') @observer class EditUserScreen exten
     const form = this.prepareForm(user.data);
 
     return (
-      <EditUserForm
-        // user={user.data}
-        status={user.actionStatus}
-        form={form}
-        isEnterprise={user.data.isEnterprise}
-        isSaving={user.updateUserInfoRequest.isExecuting}
-        onSubmit={d => this.onSubmit(d)}
-      />
+      <ErrorBoundary>
+        <EditUserForm
+          // user={user.data}
+          status={user.actionStatus}
+          form={form}
+          isEnterprise={user.data.isEnterprise}
+          isSaving={user.updateUserInfoRequest.isExecuting}
+          onSubmit={d => this.onSubmit(d)}
+        />
+      </ErrorBoundary>
     );
   }
 }
diff --git a/src/containers/settings/InviteScreen.js b/src/containers/settings/InviteScreen.js
index 38ca6ec74..cd36610e4 100644
--- a/src/containers/settings/InviteScreen.js
+++ b/src/containers/settings/InviteScreen.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 
 import Invite from '../../components/auth/Invite';
+import ErrorBoundary from '../../components/util/ErrorBoundary';
+
 import { gaPage } from '../../lib/analytics';
 
 export default @inject('stores', 'actions') @observer class InviteScreen extends Component {
@@ -19,12 +21,14 @@ export default @inject('stores', 'actions') @observer class InviteScreen extends
     const { user } = this.props.stores;
 
     return (
-      <Invite
-        onSubmit={actions.user.invite}
-        isLoadingInvite={user.inviteRequest.isExecuting}
-        isInviteSuccessful={user.inviteRequest.wasExecuted && !user.inviteRequest.isError}
-        embed
-      />
+      <ErrorBoundary>
+        <Invite
+          onSubmit={actions.user.invite}
+          isLoadingInvite={user.inviteRequest.isExecuting}
+          isInviteSuccessful={user.inviteRequest.wasExecuted && !user.inviteRequest.isError}
+          embed
+        />
+      </ErrorBoundary>
     );
   }
 }
diff --git a/src/containers/settings/RecipesScreen.js b/src/containers/settings/RecipesScreen.js
index b125e6a05..1f05b6510 100644
--- a/src/containers/settings/RecipesScreen.js
+++ b/src/containers/settings/RecipesScreen.js
@@ -10,6 +10,7 @@ import UserStore from '../../stores/UserStore';
 import { gaPage } from '../../lib/analytics';
 
 import RecipesDashboard from '../../components/settings/recipes/RecipesDashboard';
+import ErrorBoundary from '../../components/util/ErrorBoundary';
 
 export default @inject('stores', 'actions') @observer class RecipesScreen extends Component {
   static propTypes = {
@@ -93,19 +94,21 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
       || recipePreviews.searchRecipePreviewsRequest.isExecuting;
 
     return (
-      <RecipesDashboard
-        recipes={allRecipes}
-        isLoading={isLoading}
-        addedServiceCount={services.all.length}
-        isPremium={user.data.isPremium}
-        hasLoadedRecipes={recipePreviews.featuredRecipePreviewsRequest.wasExecuted}
-        showAddServiceInterface={showAddServiceInterface}
-        searchRecipes={e => this.searchRecipes(e)}
-        resetSearch={() => this.resetSearch()}
-        searchNeedle={this.state.needle}
-        serviceStatus={services.actionStatus}
-        devRecipesCount={recipePreviews.dev.length}
-      />
+      <ErrorBoundary>
+        <RecipesDashboard
+          recipes={allRecipes}
+          isLoading={isLoading}
+          addedServiceCount={services.all.length}
+          isPremium={user.data.isPremium}
+          hasLoadedRecipes={recipePreviews.featuredRecipePreviewsRequest.wasExecuted}
+          showAddServiceInterface={showAddServiceInterface}
+          searchRecipes={e => this.searchRecipes(e)}
+          resetSearch={() => this.resetSearch()}
+          searchNeedle={this.state.needle}
+          serviceStatus={services.actionStatus}
+          devRecipesCount={recipePreviews.dev.length}
+        />
+      </ErrorBoundary>
     );
   }
 }
diff --git a/src/containers/settings/ServicesScreen.js b/src/containers/settings/ServicesScreen.js
index c1a133ef7..b70a5506e 100644
--- a/src/containers/settings/ServicesScreen.js
+++ b/src/containers/settings/ServicesScreen.js
@@ -9,6 +9,7 @@ import ServiceStore from '../../stores/ServicesStore';
 import { gaPage } from '../../lib/analytics';
 
 import ServicesDashboard from '../../components/settings/services/ServicesDashboard';
+import ErrorBoundary from '../../components/util/ErrorBoundary';
 
 export default @inject('stores', 'actions') @observer class ServicesScreen extends Component {
   componentDidMount() {
@@ -40,20 +41,22 @@ export default @inject('stores', 'actions') @observer class ServicesScreen exten
     }
 
     return (
-      <ServicesDashboard
-        user={user.data}
-        services={allServices}
-        status={services.actionStatus}
-        deleteService={() => this.deleteService()}
-        toggleService={toggleService}
-        isLoading={isLoading}
-        filterServices={filter}
-        resetFilter={resetFilter}
-        goTo={router.push}
-        servicesRequestFailed={services.allServicesRequest.wasExecuted && services.allServicesRequest.isError}
-        retryServicesRequest={() => services.allServicesRequest.reload()}
-        searchNeedle={services.filterNeedle}
-      />
+      <ErrorBoundary>
+        <ServicesDashboard
+          user={user.data}
+          services={allServices}
+          status={services.actionStatus}
+          deleteService={() => this.deleteService()}
+          toggleService={toggleService}
+          isLoading={isLoading}
+          filterServices={filter}
+          resetFilter={resetFilter}
+          goTo={router.push}
+          servicesRequestFailed={services.allServicesRequest.wasExecuted && services.allServicesRequest.isError}
+          retryServicesRequest={() => services.allServicesRequest.reload()}
+          searchNeedle={services.filterNeedle}
+        />
+      </ErrorBoundary>
     );
   }
 }
diff --git a/src/containers/settings/SettingsWindow.js b/src/containers/settings/SettingsWindow.js
index 55589d0be..6d9e0ee77 100644
--- a/src/containers/settings/SettingsWindow.js
+++ b/src/containers/settings/SettingsWindow.js
@@ -6,6 +6,7 @@ import ServicesStore from '../../stores/ServicesStore';
 
 import Layout from '../../components/settings/SettingsLayout';
 import Navigation from '../../components/settings/navigation/SettingsNavigation';
+import ErrorBoundary from '../../components/util/ErrorBoundary';
 
 export default @inject('stores', 'actions') @observer class SettingsContainer extends Component {
   render() {
@@ -19,12 +20,14 @@ export default @inject('stores', 'actions') @observer class SettingsContainer ex
     );
 
     return (
-      <Layout
-        navigation={navigation}
-        closeSettings={closeSettings}
-      >
-        {children}
-      </Layout>
+      <ErrorBoundary>
+        <Layout
+          navigation={navigation}
+          closeSettings={closeSettings}
+        >
+          {children}
+        </Layout>
+      </ErrorBoundary>
     );
   }
 }