Detect when an app is unreachable and show a useful error message

Author: drew-gross

dashboard/Apps/AppsIndex.react.js

@@ -63,17 +63,24 @@ let Metric = (props) => {
 let AppCard = ({
   app,
   icon,
-}) => <li onClick={() => history.pushState(null, html`/apps/${app.slug}/browser`)}>
-  {icon ? <a className={styles.icon}><img src={icon} /></a> : null}
-  <CountsSection className={styles.glance} title='At a glance'>
-    <Metric number={dash(app.users, prettyNumber(app.users))} label='total users' />
-    <Metric number={dash(app.installations, prettyNumber(app.installations))} label='total installations' />
-  </CountsSection>
-  <div className={styles.details}>
-    <a className={styles.appname}>{app.name}</a>
-    <div className={styles.serverVersion}>Server version: <span className={styles.ago}>{app.serverInfo.parseServerVersion || 'unknown'}</span></div>
-  </div>
-</li>
+}) => {
+  let canBrowse = app.serverInfo.error ? null : () => history.pushState(null, html`/apps/${app.slug}/browser`);
+  let versionMessage = app.serverInfo.error ?
+    <div className={styles.serverVersion}>Server not reachable: <span className={styles.ago}>{app.serverInfo.error.toString()}</span></div>:
+    <div className={styles.serverVersion}>Server version: <span className={styles.ago}>{app.serverInfo.parseServerVersion || 'unknown'}</span></div>;
+
+  return <li onClick={canBrowse}>
+    {icon ? <a className={styles.icon}><img src={icon} /></a> : null}
+    <CountsSection className={styles.glance} title='At a glance'>
+      <Metric number={dash(app.users, prettyNumber(app.users))} label='total users' />
+      <Metric number={dash(app.installations, prettyNumber(app.installations))} label='total installations' />
+    </CountsSection>
+    <div className={styles.details}>
+      <a className={styles.appname}>{app.name}</a>
+      {versionMessage}
+    </div>
+  </li>
+}
 
 export default class AppsIndex extends React.Component {
   constructor() {

dashboard/Dashboard.js

@@ -139,6 +139,29 @@ class Dashboard extends React.Component {
           ).then(serverInfo => {
             app.serverInfo = serverInfo;
             return app;
+          }, error => {
+            if (error.code === 100) {
+              app.serverInfo = {
+                error: 'unable to connect to server',
+                enabledFeatures: {},
+                parseServerVersion: "unknown"
+              }
+              return Parse.Promise.as(app);
+            } else if (error.code === 107) {
+              app.serverInfo = {
+                error: 'server version too low',
+                enabledFeatures: {},
+                parseServerVersion: "unknown"
+              }
+              return Parse.Promise.as(app);
+            } else {
+              app.serverInfo = {
+                error: 'unknown error',
+                enabledFeatures: {},
+                parseServerVersion: "unknown"
+              }
+              return Parse.Promise.as(app);
+            }
           });
         }
       });