Throw error in the event of a network error

Author: Mahmoud

spotlight-client/src/metricsApi/fetchMetrics.test.ts

@@ -16,9 +16,9 @@
 // =============================================================================
 
 import fetchMock from "jest-fetch-mock";
-import { fetchAndTransformMetric, fetchMetrics } from "./fetchMetrics";
-import { waitForTestServer } from "../testUtils";
 import { ERROR_MESSAGES } from "../constants";
+import { waitForTestServer } from "../testUtils";
+import { fetchAndTransformMetric, fetchMetrics } from "./fetchMetrics";
 
 describe("fetchMetrics", () => {
   test("returns fetched metrics", async () => {
@@ -138,4 +138,22 @@ describe("fetchAndTransformMetric", () => {
     fetchMock.resetMocks();
     fetchMock.dontMock();
   });
+
+  test("handles network errors", async () => {
+    expect.hasAssertions();
+    fetchMock.mockReject(new Error("Network error"));
+
+    try {
+      await fetchMetrics({
+        metricNames: ["any_metric"],
+        tenantId: "US_ND",
+      });
+    } catch (e) {
+      expect(e.message).toBe(
+        `There was a network error attempting to fetch metrics: \nError: Network error`
+      );
+    }
+
+    fetchMock.resetMocks();
+  });
 });

spotlight-client/src/metricsApi/fetchMetrics.ts

@@ -45,31 +45,38 @@ export async function fetchMetrics({
   // we need some way to get the auth token from the userStore, so we pass a reference to the method in this way.
   // ideally fetching metrics should be handled in its own mobx store rather than in the content models. See issue #560
   const token = await rootStore?.userStore.getToken();
-  const response = await fetch(
-    `${process.env.REACT_APP_API_URL}/api/${tenantId}/public`,
-    {
-      body: JSON.stringify({
-        metrics: metricNames,
-      }),
-      headers: {
-        Authorization: `Bearer ${token}`,
-        "Content-Type": "application/json",
-      },
-      method: "POST",
+
+  try {
+    const response = await fetch(
+      `${process.env.REACT_APP_API_URL}/api/${tenantId}/public`,
+      {
+        body: JSON.stringify({
+          metrics: metricNames,
+        }),
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "application/json",
+        },
+        method: "POST",
+      }
+    );
+
+    if (response.ok) {
+      const responseData: MetricsApiResponse = await response.json();
+      return responseData;
     }
-  );
 
-  if (response.ok) {
-    const responseData: MetricsApiResponse = await response.json();
-    return responseData;
+    const errorResponse: ErrorAPIResponse = await response.json();
+    throw new Error(
+      `Metrics API responded with status ${response.status}. Error message: ${
+        errorResponse.error || "none"
+      }`
+    );
+  } catch (error) {
+    throw new Error(
+      `There was a network error attempting to fetch metrics: \n${error}`
+    );
   }
-
-  const errorResponse: ErrorAPIResponse = await response.json();
-  throw new Error(
-    `Metrics API responded with status ${response.status}. Error message: ${
-      errorResponse.error || "none"
-    }`
-  );
 }
 
 /**