Merge pull request #2846 from metabase/dashboard-errors-show-timeout

Added error handling for dashboard cards

frontend/src/metabase/dashboard/dashboard.js

@@ -113,6 +113,15 @@ const updateDashcardId = createAction(UPDATE_DASHCARD_ID, (oldDashcardId, newDas
 const CLEAR_CARD_DATA = "CLEAR_CARD_DATA";
 export const clearCardData = createAction(CLEAR_CARD_DATA, (cardId, dashcardId) => ({ cardId, dashcardId }));
 
+export async function fetchDataOrError(dataPromise) {
+    try {
+        return await dataPromise;
+    }
+    catch (error) {
+        return { error };
+    }
+}
+
 export const fetchCardData = createThunkAction(FETCH_CARD_DATA, function(card, dashcard, clearExisting = false) {
     return async function(dispatch, getState) {
         if (clearExisting) {
@@ -152,7 +161,7 @@ export const fetchCardData = createThunkAction(FETCH_CARD_DATA, function(card, d
             }
         }, DATASET_SLOW_TIMEOUT);
 
-        result = await MetabaseApi.dataset(datasetQuery);
+        result = await fetchDataOrError(MetabaseApi.dataset(datasetQuery));
 
         clearTimeout(slowCardTimer);
         return { dashcard_id: dashcard.id, card_id: card.id, result };

frontend/test/unit/dashboard/dashboard.spec.js

+import { fetchDataOrError } from 'metabase/dashboard/dashboard';
+
+describe("Dashboard", () => {
+    describe("fetchDataOrError()", () => {
+        it("should return data on successful fetch", async () => {
+            const data = {
+                series: [1, 2, 3]
+            };
+
+            const successfulFetch = Promise.resolve(data);
+
+            const result = await fetchDataOrError(successfulFetch);
+            expect(result.error).toBeUndefined();
+            expect(result).toEqual(data);
+        });
+
+        it("should return map with error key on failed fetch", async () => {
+            const error = {
+                status: 504,
+                statusText: "GATEWAY_TIMEOUT",
+                data: {
+                    message: "Failed to load resource: the server responded with a status of 504 (GATEWAY_TIMEOUT)"
+                }
+            };
+
+            const failedFetch = Promise.reject(error);
+
+            const result = await fetchDataOrError(failedFetch);
+            expect(result.error).toEqual(error);
+        });
+    });
+});