handle network error / show more verbose error message

src/App.js

@@ -112,7 +112,22 @@ class App extends React.Component {
     return <div>Loading...</div>
   }
   renderError() {
-    return <div>Something went wrong. Please try again.</div>
+    if (this.state.error.message === 'Network Error') {
+      alert(`Failed to reach backend at\n${this.state.error.config.url}.`)
+    } else {
+      return (
+        <div>
+          There was an error: {this.state.error.message}
+          <ul>
+            {Object.keys(this.state.error.config).map(key => (
+              <li>
+                {key}: {JSON.stringify(this.state.error.config[key])}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )
+    }
   }
   renderProfile() {
     return (
@@ -200,6 +215,8 @@ class App extends React.Component {
     const renderComponent = () =>
       this.state.loading
         ? this.renderLoading()
+        : this.state.error
+        ? this.renderError()
         : this.state.component === 'tasks'
         ? this.renderTasks(filtered, completed)
         : this.state.component === 'task'