Handle network errors (#661)

* Throw error in the event of a network error

* Throw error sent to catch without adding extra copy

* Fix tests

* Correct snapshot

---------

Co-authored-by: Mahmoud <[email protected]>

Author: mxosman

spotlight-client/src/contentModels/Metric.test.ts

@@ -23,9 +23,9 @@ import fetchMock from "jest-fetch-mock";
 import JsZip from "jszip";
 import { when } from "mobx";
 import { fromPromise } from "mobx-utils";
-import allTestContent from "./__fixtures__/tenant_content_exhaustive";
 import { MetricTypeId, MetricTypeIdList } from "../contentApi/types";
 import { reactImmediately } from "../testUtils";
+import allTestContent from "./__fixtures__/tenant_content_exhaustive";
 import createMetricMapping from "./createMetricMapping";
 
 jest.mock("downloadjs");
@@ -170,7 +170,7 @@ test("fetch error state", async () => {
 
   reactImmediately(() => {
     expect(metric.error?.message).toBe(
-      "Metrics API responded with status 500. Error message: test error message"
+      "Error: Metrics API responded with status 500. Error message: test error message"
     );
   });
 

spotlight-client/src/contentModels/RacialDisparitiesNarrative.test.tsx

@@ -79,7 +79,7 @@ test("fetch error state", async () => {
   reactImmediately(() => {
     expect(narrative.isLoading).toBe(false);
     expect(narrative.error?.message).toBe(
-      "Metrics API responded with status 500. Error message: test error message"
+      "Error: Metrics API responded with status 500. Error message: test error message"
     );
   });
 

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,20 @@ 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(`Error: Network error`);
+    }
+
+    fetchMock.resetMocks();
+  });
 });

spotlight-client/src/metricsApi/fetchMetrics.ts

@@ -45,31 +45,36 @@ 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(`${error}`);
   }
-
-  const errorResponse: ErrorAPIResponse = await response.json();
-  throw new Error(
-    `Metrics API responded with status ${response.status}. Error message: ${
-      errorResponse.error || "none"
-    }`
-  );
 }
 
 /**