Improve error handling when offline

lib/containers/aggregated-reviews-container.js

@@ -24,6 +24,9 @@ export class BareAggregatedReviewsContainer extends React.Component {
 
     // only fetch summaries when we specify a summariesRenderer
     summariesRenderer: PropTypes.func,
+
+    // Report errors during refetch
+    reportRelayError: PropTypes.func.isRequired,
   }
 
   constructor(props) {
@@ -76,8 +79,12 @@ export class BareAggregatedReviewsContainer extends React.Component {
       commentCursor: null,
     },
     null,
-    () => {
-      this.emitter.emit('did-refetch');
+    err => {
+      if (err) {
+        this.props.reportRelayError('Unable to refresh reviews', err);
+      } else {
+        this.emitter.emit('did-refetch');
+      }
       callback();
     },
     {force: true},

lib/containers/comment-decorations-container.js

@@ -20,6 +20,8 @@ export default class CommentDecorationsContainer extends React.Component {
     commands: PropTypes.object.isRequired,
     localRepository: PropTypes.object.isRequired,
     loginModel: GithubLoginModelPropType.isRequired,
+
+    reportRelayError: PropTypes.func.isRequired,
   };
 
   render() {
@@ -46,7 +48,7 @@ export default class CommentDecorationsContainer extends React.Component {
   }
 
   renderWithToken(token, {repoData}) {
-    if (!token || token === UNAUTHENTICATED || token === INSUFFICIENT) {
+    if (!token || token === UNAUTHENTICATED || token === INSUFFICIENT || token instanceof Error) {
       // we're not going to prompt users to log in to render decorations for comments
       // just let it go and move on with our lives.
       return null;
@@ -177,7 +179,9 @@ export default class CommentDecorationsContainer extends React.Component {
     }
 
     return (
-      <AggregatedReviewsContainer pullRequest={queryProps.currentPullRequest}>
+      <AggregatedReviewsContainer
+        pullRequest={queryProps.currentPullRequest}
+        reportRelayError={this.props.reportRelayError}>
         {({errors, summaries, commentThreads}) => {
           if (errors && errors.length > 0) {
             // eslint-disable-next-line no-console

lib/containers/github-tab-container.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import yubikiri from 'yubikiri';
 
 import {GithubLoginModelPropType, RefHolderPropType} from '../prop-types';
-import {autobind} from '../helpers';
 import OperationStateObserver, {PUSH, PULL, FETCH} from '../models/operation-state-observer';
 import GitHubTabController from '../controllers/github-tab-controller';
 import ObserveModel from '../views/observe-model';
@@ -18,12 +17,7 @@ export default class GitHubTabContainer extends React.Component {
     rootHolder: RefHolderPropType.isRequired,
   }
 
-  constructor(props) {
-    super(props);
-    autobind(this, 'fetchRepositoryData', 'renderRepositoryData');
-
-    this.state = {};
-  }
+  state = {};
 
   static getDerivedStateFromProps(props, state) {
     if (props.repository !== state.lastRepository) {
@@ -36,7 +30,7 @@ export default class GitHubTabContainer extends React.Component {
     return null;
   }
 
-  fetchRepositoryData(repository) {
+  fetchRepositoryData = repository => {
     return yubikiri({
       workingDirectory: repository.getWorkingDirectoryPath(),
       allRemotes: repository.getRemotes(),
@@ -59,7 +53,7 @@ export default class GitHubTabContainer extends React.Component {
     );
   }
 
-  renderRepositoryData(data) {
+  renderRepositoryData = data => {
     if (!data || this.props.repository.isLoading()) {
       return (
         <GitHubTabController

lib/containers/issueish-detail-container.js

@@ -48,7 +48,7 @@ export default class IssueishDetailContainer extends React.Component {
     switchToIssueish: PropTypes.func.isRequired,
     onTitleChange: PropTypes.func.isRequired,
     destroy: PropTypes.func.isRequired,
-    reportMutationErrors: PropTypes.func.isRequired,
+    reportRelayError: PropTypes.func.isRequired,
 
     // Item context
     itemType: ItemTypePropType.isRequired,
@@ -66,6 +66,17 @@ export default class IssueishDetailContainer extends React.Component {
   renderWithToken = tokenData => {
     const token = tokenData && tokenData.token;
 
+    if (token instanceof Error) {
+      return (
+        <QueryErrorView
+          error={token}
+          login={this.handleLogin}
+          retry={this.handleTokenRetry}
+          logout={this.handleLogout}
+        />
+      );
+    }
+
     if (token === UNAUTHENTICATED) {
       return <GithubLoginView onLogin={this.handleLogin} />;
     }
@@ -193,7 +204,9 @@ export default class IssueishDetailContainer extends React.Component {
 
     if (props.repository.issueish.__typename === 'PullRequest') {
       return (
-        <AggregatedReviewsContainer pullRequest={props.repository.issueish}>
+        <AggregatedReviewsContainer
+          pullRequest={props.repository.issueish}
+          reportRelayError={this.props.reportRelayError}>
           {aggregatedReviews => this.renderWithCommentResult(token, repoData, {props, retry}, aggregatedReviews)}
         </AggregatedReviewsContainer>
       );
@@ -247,7 +260,7 @@ export default class IssueishDetailContainer extends React.Component {
         onTabSelected={this.props.onTabSelected}
         onOpenFilesTab={this.props.onOpenFilesTab}
         endpoint={this.props.endpoint}
-        reportMutationErrors={this.props.reportMutationErrors}
+        reportRelayError={this.props.reportRelayError}
 
         workspace={this.props.workspace}
         commands={this.props.commands}
@@ -283,4 +296,6 @@ export default class IssueishDetailContainer extends React.Component {
   handleLogin = token => this.props.loginModel.setToken(this.props.endpoint.getLoginAccount(), token);
 
   handleLogout = () => this.props.loginModel.removeToken(this.props.endpoint.getLoginAccount());
+
+  handleTokenRetry = () => this.props.loginModel.didUpdate();
 }

lib/containers/remote-container.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import {QueryRenderer, graphql} from 'react-relay';
 
 import {incrementCounter} from '../reporter-proxy';
-import {autobind} from '../helpers';
 import {
   RemotePropType, RemoteSetPropType, BranchSetPropType, OperationStateObserverPropType, EndpointPropType,
 } from '../prop-types';
@@ -35,13 +34,7 @@ export default class RemoteContainer extends React.Component {
     onPushBranch: PropTypes.func.isRequired,
   }
 
-  constructor(props) {
-    super(props);
-
-    autobind(this, 'fetchToken', 'renderWithToken', 'renderWithResult', 'handleLogin', 'handleLogout');
-  }
-
-  fetchToken(loginModel) {
+  fetchToken = loginModel => {
     return loginModel.getToken(this.props.endpoint.getLoginAccount());
   }
 
@@ -53,11 +46,22 @@ export default class RemoteContainer extends React.Component {
     );
   }
 
-  renderWithToken(token) {
+  renderWithToken = token => {
     if (token === null) {
       return <LoadingView />;
     }
 
+    if (token instanceof Error) {
+      return (
+        <QueryErrorView
+          error={token}
+          retry={this.handleTokenRetry}
+          login={this.handleLogin}
+          logout={this.handleLogout}
+        />
+      );
+    }
+
     if (token === UNAUTHENTICATED) {
       return <GithubLoginView onLogin={this.handleLogin} />;
     }
@@ -137,13 +141,15 @@ export default class RemoteContainer extends React.Component {
     );
   }
 
-  handleLogin(token) {
+  handleLogin = token => {
     incrementCounter('github-login');
     this.props.loginModel.setToken(this.props.endpoint.getLoginAccount(), token);
   }
 
-  handleLogout() {
+  handleLogout = () => {
     incrementCounter('github-logout');
     this.props.loginModel.removeToken(this.props.endpoint.getLoginAccount());
   }
+
+  handleTokenRetry = () => this.props.loginModel.didUpdate();
 }

lib/containers/reviews-container.js

@@ -42,7 +42,7 @@ export default class ReviewsContainer extends React.Component {
     tooltips: PropTypes.object.isRequired,
 
     // Action methods
-    reportMutationErrors: PropTypes.func.isRequired,
+    reportRelayError: PropTypes.func.isRequired,
   }
 
   render() {
@@ -58,6 +58,17 @@ export default class ReviewsContainer extends React.Component {
       return <LoadingView />;
     }
 
+    if (token instanceof Error) {
+      return (
+        <QueryErrorView
+          error={token}
+          retry={this.handleTokenRetry}
+          login={this.handleLogin}
+          logout={this.handleLogout}
+        />
+      );
+    }
+
     if (token === UNAUTHENTICATED) {
       return <GithubLoginView onLogin={this.handleLogin} />;
     }
@@ -173,14 +184,16 @@ export default class ReviewsContainer extends React.Component {
     }
 
     return (
-      <AggregatedReviewsContainer pullRequest={props.repository.pullRequest}>
+      <AggregatedReviewsContainer
+        pullRequest={props.repository.pullRequest}
+        reportRelayError={this.props.reportRelayError}>
         {({errors, summaries, commentThreads, refetch}) => {
           if (errors && errors.length > 0) {
             return errors.map((err, i) => (
               <ErrorView
                 key={`error-${i}`}
                 title="Pagination error"
-                descriptions={[err.stack || err.toString()]}
+                descriptions={[err.stack]}
               />
             ));
           }
@@ -241,4 +254,6 @@ export default class ReviewsContainer extends React.Component {
   handleLogin = token => this.props.loginModel.setToken(this.props.endpoint.getLoginAccount(), token);
 
   handleLogout = () => this.props.loginModel.removeToken(this.props.endpoint.getLoginAccount());
+
+  handleTokenRetry = () => this.props.loginModel.didUpdate();
 }

lib/controllers/emoji-reactions-controller.js

@@ -19,7 +19,7 @@ export class BareEmojiReactionsController extends React.Component {
     tooltips: PropTypes.object.isRequired,
 
     // Action methods
-    reportMutationErrors: PropTypes.func.isRequired,
+    reportRelayError: PropTypes.func.isRequired,
   }
 
   render() {
@@ -36,15 +36,15 @@ export class BareEmojiReactionsController extends React.Component {
     try {
       await addReactionMutation(this.props.relay.environment, this.props.reactable.id, content);
     } catch (err) {
-      this.props.reportMutationErrors('Unable to add reaction emoji', err);
+      this.props.reportRelayError('Unable to add reaction emoji', err);
     }
   };
 
   removeReaction = async content => {
     try {
       await removeReactionMutation(this.props.relay.environment, this.props.reactable.id, content);
     } catch (err) {
-      this.props.reportMutationErrors('Unable to remove reaction emoji', err);
+      this.props.reportRelayError('Unable to remove reaction emoji', err);
     }
   };
 }

lib/controllers/github-tab-controller.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import {
   GithubLoginModelPropType, RefHolderPropType, RemoteSetPropType, BranchSetPropType, OperationStateObserverPropType,
 } from '../prop-types';
-import {autobind} from '../helpers';
 import GitHubTabView from '../views/github-tab-view';
 
 export default class GitHubTabController extends React.Component {
@@ -24,11 +23,6 @@ export default class GitHubTabController extends React.Component {
     isLoading: PropTypes.bool.isRequired,
   }
 
-  constructor(props) {
-    super(props);
-    autobind(this, 'handlePushBranch', 'handleRemoteSelect');
-  }
-
   render() {
     const gitHubRemotes = this.props.allRemotes.filter(remote => remote.isGithubRepo());
     const currentBranch = this.props.branches.getHeadBranch();
@@ -64,14 +58,14 @@ export default class GitHubTabController extends React.Component {
     );
   }
 
-  handlePushBranch(currentBranch, targetRemote) {
+  handlePushBranch = (currentBranch, targetRemote) => {
     return this.props.repository.push(currentBranch.getName(), {
       remote: targetRemote,
       setUpstream: true,
     });
   }
 
-  handleRemoteSelect(e, remote) {
+  handleRemoteSelect = (e, remote) => {
     e.preventDefault();
     return this.props.repository.setConfig('atomGithub.currentRemote', remote.getName());
   }

lib/controllers/issueish-detail-controller.js

@@ -61,7 +61,7 @@ export class BareIssueishDetailController extends React.Component {
     onTitleChange: PropTypes.func.isRequired,
     switchToIssueish: PropTypes.func.isRequired,
     destroy: PropTypes.func.isRequired,
-    reportMutationErrors: PropTypes.func.isRequired,
+    reportRelayError: PropTypes.func.isRequired,
 
     // Item context
     itemType: ItemTypePropType.isRequired,
@@ -147,7 +147,7 @@ export class BareIssueishDetailController extends React.Component {
               openReviews={this.openReviews}
               switchToIssueish={this.props.switchToIssueish}
               destroy={this.props.destroy}
-              reportMutationErrors={this.props.reportMutationErrors}
+              reportRelayError={this.props.reportRelayError}
 
               itemType={this.props.itemType}
               refEditor={this.props.refEditor}
@@ -170,7 +170,7 @@ export class BareIssueishDetailController extends React.Component {
           issue={repository.issue}
           switchToIssueish={this.props.switchToIssueish}
           tooltips={this.props.tooltips}
-          reportMutationErrors={this.props.reportMutationErrors}
+          reportRelayError={this.props.reportRelayError}
         />
       );
     }

lib/controllers/reviews-controller.js

@@ -66,7 +66,7 @@ export class BareReviewsController extends React.Component {
     tooltips: PropTypes.object.isRequired,
 
     // Action methods
-    reportMutationErrors: PropTypes.func.isRequired,
+    reportRelayError: PropTypes.func.isRequired,
   }
 
   constructor(props) {
@@ -262,7 +262,7 @@ export class BareReviewsController extends React.Component {
         addEvent('resolve-comment-thread', {package: 'github'});
       } catch (err) {
         this.showThreadID(thread.id);
-        this.props.reportMutationErrors('Unable to resolve the comment thread', err);
+        this.props.reportRelayError('Unable to resolve the comment thread', err);
       }
     }
   }
@@ -278,7 +278,7 @@ export class BareReviewsController extends React.Component {
         this.highlightThread(thread.id);
         addEvent('unresolve-comment-thread', {package: 'github'});
       } catch (err) {
-        this.props.reportMutationErrors('Unable to unresolve the comment thread', err);
+        this.props.reportRelayError('Unable to unresolve the comment thread', err);
       }
     }
   }
@@ -337,7 +337,7 @@ export class BareReviewsController extends React.Component {
         }
       }
 
-      this.props.reportMutationErrors('Unable to submit your comment', error);
+      this.props.reportRelayError('Unable to submit your comment', error);
     } finally {
       this.setState({postingToThreadID: null});
     }