Better error messages for config issues.

Parse-Dashboard/index.js

@@ -5,14 +5,25 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
+var jsonFile = require('json-file-plus');
 var express = require('express');
 var app = express();
 
 // Serve public files.
 app.use(express.static('Parse-Dashboard/public'));
 
 app.get('/parse-dashboard-config.json', function(req, res) {
-  res.sendFile(__dirname + '/parse-dashboard-config.json');
+  jsonFile(__dirname + '/parse-dashboard-config.json')
+  .then(config => res.json(config.data))
+  .catch(error => {
+    if (error instanceof SyntaxError) {
+      res.send({ success: false, error: 'Your parse-dashboard-config.json file contains invalid JSON.' });
+    } else if (error.code === 'ENOENT') {
+      res.send({ success: false, error: 'Your parse-dashboard-config.json file is missing.' });
+    } else {
+      res.send({ success: false, error: 'There was a problem with your parse-dashboard-config.json file.' });
+    }
+  });
 });
 
 // For every other request, go to index.html. Let client-side handle the rest.

dashboard/Apps/AppsIndex.scss

@@ -7,6 +7,11 @@
  */
 @import 'stylesheets/globals.scss';
 
+.loadingError {
+  font-size: 58px;
+  color: #ffffff;
+}
+
 .index {
   padding: 38px 30px;
   background: #1e3b4d;
@@ -105,7 +110,7 @@
     margin: 14px 0;
     padding: 0 9px;
     height: 74px;
-    
+
     &:hover{
       background: #172C3B;
     }

dashboard/Dashboard.js

@@ -87,8 +87,7 @@ class Dashboard extends React.Component {
   }
 
   componentDidMount() {
-    let promise = get('/parse-dashboard-config.json');
-    promise.then(({ apps }) => {
+    get('/parse-dashboard-config.json').then(({ apps }) => {
       apps.forEach(app => {
         if (app.serverURL.startsWith('https://api.parse.com/1')) {
           //api.parse.com doesn't have feature availability endpoint, fortunately we know which features
@@ -181,11 +180,11 @@ class Dashboard extends React.Component {
         }
       });
       this.setState({ configLoadingState: AsyncStatus.SUCCESS });
-    }).fail(error => {
-      if (typeof error === 'string') {
-        this.setState({ configLoadingError: 'Your parse-dashboard-config.json file contains invalid JSON.' });
-      }
-      this.setState({ configLoadingState: AsyncStatus.FAILED });
+    }).fail(({ error }) => {
+      this.setState({
+        configLoadingError: error,
+        configLoadingState: AsyncStatus.FAILED
+      });
     });
   }
 
@@ -200,7 +199,8 @@ class Dashboard extends React.Component {
           <div className={styles.cloud}>
             <Icon width={110} height={110} name='cloud-surprise' fill='#1e3b4d' />
           </div>
-          <div style={{fontSize: '58px', color: '#ffffff'}}>{this.state.configLoadingError}</div>
+          {/* use non-breaking hyphen for the error message to keep the filename on one line */}
+          <div className={styles.loadingError}>{this.state.configLoadingError.replace(/-/g, '\u2011')}</div>
         </div>
       </div>
     }

package.json

@@ -5,6 +5,7 @@
     "express": "^4.13.4",
     "history": "~1.9.1",
     "immutable": "~3.7.5",
+    "json-file-plus": "^3.2.0",
     "marked": "^0.3.5",
     "parse": "1.6.14",
     "prismjs": "~1.2.0",