Surface HTTP errors for the dataset endpoint (Heroku, etc)

frontend/src/card/card.controllers.js

@@ -484,10 +484,7 @@ CardControllers.controller('CardDetail', [
 
             }, function (error) {
                 isRunning = false;
-                // TODO: we should update the api so that we get better error messaging from the api on query fails
-                queryResult = {
-                    error: "Oh snap!  Something went wrong running your query :sad:"
-                };
+                queryResult = { error: error };
 
                 renderAll();
             });

frontend/src/dashboard/components/DashCard.jsx

@@ -44,7 +44,16 @@ export default class DashCard extends Component {
         let error = (dataset && dataset.error) || this.state.error;
 
         if (error) {
-            let message = (error.data && error.data.message) || error;
+            let message;
+            if (error.data) {
+                message = error.data.message
+            } else if (error.status === 503) {
+                message = "I'm sorry, the server timed out while asking your question."
+            } else if (typeof error === "string") {
+                message = error;
+            } else {
+                message = "Oh snap!  Something went wrong loading this card :sad:";
+            }
             return (
                 <div className="p1 text-centered flex-full flex flex-column layout-centered">
                     <h2 className="text-normal text-grey-2">{message}</h2>

frontend/src/query_builder/QueryVisualization.jsx

@@ -113,12 +113,13 @@ export default class QueryVisualization extends Component {
     }
 
     renderCount() {
-        if (this.props.result && !this.props.isObjectDetail && this.props.card.display === "table") {
+        let { result, isObjectDetail, card } = this.props;
+        if (result &&  result.data && !isObjectDetail && card.display === "table") {
             return (
                 <div>
                     { this.hasTooManyRows() ? ("Showing max of ") : ("Showing ")}
-                    <b>{this.props.result.row_count}</b>
-                    { (this.props.result.data.rows.length !== 1) ? (" rows") : (" row")}.
+                    <b>{result.row_count}</b>
+                    { (result.data.rows.length !== 1) ? (" rows") : (" row")}.
                 </div>
             );
         }
@@ -166,8 +167,23 @@ export default class QueryVisualization extends Component {
                 </div>
             );
         } else {
-            if (this.props.result.error) {
+            let error = this.props.result.error;
+            if (error) {
+                let message;
+                // transform HTTP errors to plain text error messages, and always show them
+                if (typeof error.status === "number") {
+                    if (error.status === 503) {
+                        error = "I'm sorry, the server timed out while asking your question.";
+                    } else {
+                        error = "I'm sorry, an error occured: " + error.statusText;
+                    }
+                    message = error;
+                }
+                // always show errors for native queries
                 if (this.props.card.dataset_query && this.props.card.dataset_query.type === 'native') {
+                    message = error;
+                }
+                if (message) {
                     viz = (
                         <div className="QueryError flex full align-center text-error">
                             <div className="QueryError-iconWrapper">
@@ -175,7 +191,7 @@ export default class QueryVisualization extends Component {
                                     <path d="M4 8 L8 4 L16 12 L24 4 L28 8 L20 16 L28 24 L24 28 L16 20 L8 28 L4 24 L12 16 z "></path>
                                 </svg>
                             </div>
-                            <span className="QueryError-message">{this.props.result.error}</span>
+                            <span className="QueryError-message">{message}</span>
                         </div>
                     );