Merge pull request #6045 from mozilla/MPP-4420/frontend-error-toast

joeherm · web-flow · commit 846c38784792 · 2025-12-10T17:33:47.000Z
feat(toast): Add toast and error page for API error handling in the frontend
diff --git a/frontend/__mocks__/hooks/api/aliases.ts b/frontend/__mocks__/hooks/api/aliases.ts
@@ -134,6 +134,28 @@ function getReturnValue(
   };
 }
 
+function getErrorRandomReturnValue(): ReturnType<typeof useAliases> {
+  return {
+    randomAliasData: {
+      isValidating: false,
+      isLoading: false,
+      error: { some_error_key: "some_error_val" },
+      mutate: jest.fn(),
+      data: undefined,
+    },
+    customAliasData: {
+      isValidating: false,
+      isLoading: false,
+      error: { some_error_key: "some_error_val" },
+      mutate: jest.fn(),
+      data: undefined,
+    },
+    create: jest.fn(() => Promise.resolve({ ok: true } as unknown as Response)),
+    update: jest.fn(() => Promise.resolve({ ok: true } as unknown as Response)),
+    delete: jest.fn(() => Promise.resolve({ ok: true } as unknown as Response)),
+  };
+}
+
 export const setMockAliasesData = (
   aliasesData?: MockData,
   callbacks?: Callbacks,
@@ -147,3 +169,10 @@ export const setMockAliasesDataOnce = (
 ) => {
   mockedUseAliases.mockReturnValueOnce(getReturnValue(aliasesData, callbacks));
 };
+
+export const setMockAliasesErrorOnce = (
+  aliasesData?: MockData,
+  callbacks?: Callbacks,
+) => {
+  mockedUseAliases.mockReturnValueOnce(getErrorRandomReturnValue());
+};
diff --git a/frontend/__mocks__/hooks/api/profile.ts b/frontend/__mocks__/hooks/api/profile.ts
@@ -62,6 +62,18 @@ function getReturnValue(
   };
 }
 
+function getErrorReturnValue(): ReturnType<typeof useProfiles> {
+  return {
+    isValidating: false,
+    mutate: jest.fn(),
+    update: jest.fn(),
+    data: undefined,
+    setSubdomain: jest.fn(),
+    isLoading: false,
+    error: { some_error_key: "some_error_val" },
+  };
+}
+
 export const setMockProfileData = (
   profileData?: MockData | null,
   callbacks?: Callbacks,
@@ -75,3 +87,7 @@ export const setMockProfileDataOnce = (
 ) => {
   mockedUseProfiles.mockReturnValueOnce(getReturnValue(profileData, callbacks));
 };
+
+export const setMockProfileErrorOnce = () => {
+  mockedUseProfiles.mockReturnValueOnce(getErrorReturnValue());
+};
diff --git a/frontend/__mocks__/hooks/api/relayNumber.ts b/frontend/__mocks__/hooks/api/relayNumber.ts
@@ -60,6 +60,22 @@ function getReturnValue(
   };
 }
 
+function getErrorReturnValue(): ReturnType<typeof useRelayNumber> {
+  return {
+    isValidating: false,
+    isLoading: false,
+    error: { some_error_key: "some_error_val" },
+    mutate: jest.fn(),
+    data: undefined,
+    registerRelayNumber: jest.fn(() =>
+      Promise.resolve({ ok: true } as unknown as Response),
+    ),
+    setForwardingState: jest.fn(() =>
+      Promise.resolve({ ok: true } as unknown as Response),
+    ),
+  };
+}
+
 export const setMockRelayNumberData = (
   relayNumbers?: Array<Partial<RelayNumber>>,
   callbacks?: Callbacks,
@@ -76,4 +92,8 @@ export const setMockRelayNumberDataOnce = (
   );
 };
 
+export const setMockRelayNumberErrorOnce = () => {
+  mockedUseRelayNumber.mockReturnValueOnce(getErrorReturnValue());
+};
+
 export { useRelayNumber };
diff --git a/frontend/__mocks__/hooks/api/runtimeData.ts b/frontend/__mocks__/hooks/api/runtimeData.ts
@@ -152,10 +152,24 @@ function getReturnValue(
   };
 }
 
+function getErrorReturnValue(): ReturnType<typeof useRuntimeData> {
+  return {
+    isValidating: false,
+    mutate: jest.fn(),
+    data: undefined,
+    isLoading: false,
+    error: { some_error_key: "some_error_val" },
+  };
+}
+
 export const setMockRuntimeData = (runtimeData?: Partial<RuntimeData>) => {
   mockedUseRuntimeData.mockReturnValue(getReturnValue(runtimeData));
 };
 
 export const setMockRuntimeDataOnce = (runtimeData?: Partial<RuntimeData>) => {
   mockedUseRuntimeData.mockReturnValueOnce(getReturnValue(runtimeData));
 };
+
+export const setMockRuntimeErrorOnce = (runtimeData?: Partial<RuntimeData>) => {
+  mockedUseRuntimeData.mockReturnValueOnce(getErrorReturnValue());
+};
diff --git a/frontend/src/components/dashboard/aliases/AliasDeletionButton.test.tsx b/frontend/src/components/dashboard/aliases/AliasDeletionButton.test.tsx
@@ -1,9 +1,9 @@
 import { render, screen, within, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { mockConfigModule } from "../../../../__mocks__/configMock";
+import { mockUseL10nModule } from "../../../../__mocks__/hooks/l10n";
 import { mockLocalizedModule } from "../../../../__mocks__/components/Localized";
 import { getMockRandomAlias } from "../../../../__mocks__/hooks/api/aliases";
-import { mockUseL10nModule } from "../../../../__mocks__/hooks/l10n";
 
 import * as aliasApi from "../../../hooks/api/aliases";
 import { AliasDeletionButton } from "./AliasDeletionButton";
diff --git a/frontend/src/components/dashboard/aliases/AliasGenerationButton.test.tsx b/frontend/src/components/dashboard/aliases/AliasGenerationButton.test.tsx
@@ -1,13 +1,13 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { mockConfigModule } from "../../../../__mocks__/configMock";
+import { mockUseL10nModule } from "../../../../__mocks__/hooks/l10n";
 import { getMockRandomAlias } from "../../../../__mocks__/hooks/api/aliases";
 import { getMockProfileData } from "../../../../__mocks__/hooks/api/profile";
 import {
   getMockRuntimeDataWithoutPremium,
   getMockRuntimeDataWithPeriodicalPremium,
 } from "../../../../__mocks__/hooks/api/runtimeData";
-import { mockUseL10nModule } from "../../../../__mocks__/hooks/l10n";
 
 import { AliasGenerationButton } from "./AliasGenerationButton";
 
diff --git a/frontend/src/components/dashboard/aliases/AliasList.test.tsx b/frontend/src/components/dashboard/aliases/AliasList.test.tsx
@@ -3,9 +3,9 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { mockLocalizedModule } from "../../../../__mocks__/components/Localized";
 import { mockConfigModule } from "../../../../__mocks__/configMock";
+import { mockUseL10nModule } from "../../../../__mocks__/hooks/l10n";
 import { getMockRandomAlias } from "../../../../__mocks__/hooks/api/aliases";
 import { getMockProfileData } from "../../../../__mocks__/hooks/api/profile";
-import { mockUseL10nModule } from "../../../../__mocks__/hooks/l10n";
 import * as LocalLabelsMock from "../../../../__mocks__/hooks/localLabels";
 import { AliasList } from "./AliasList";
 
diff --git a/frontend/src/components/layout/ErrorGeneral.module.scss b/frontend/src/components/layout/ErrorGeneral.module.scss
@@ -0,0 +1,25 @@
+@use "~@mozilla-protocol/core/protocol/css/includes/lib" as *;
+@use "../../styles/text";
+
+.error-general {
+  @include text-body-sm;
+  font-family: $font-stack-firefox;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: $spacing-md;
+  border-radius: $border-radius-md;
+  background-color: $color-white;
+  height: 100%;
+  vertical-align: middle;
+
+  h1 {
+    @include text-title-xs;
+    margin-bottom: $spacing-sm;
+  }
+
+  p {
+    @include text-title-3xs;
+  }
+}
diff --git a/frontend/src/components/layout/ErrorGeneral.tsx b/frontend/src/components/layout/ErrorGeneral.tsx
@@ -0,0 +1,15 @@
+// import { ReactNode } from "react";
+import styles from "./ErrorGeneral.module.scss";
+import { useL10n } from "../../hooks/l10n";
+
+export const ErrorGeneral = () => {
+  const l10n = useL10n();
+  const headingText = l10n.getString("error-general").split(". ")[0];
+  const descriptionText = l10n.getString("error-general").split(". ")[1];
+  return (
+    <div className={styles["error-general"]}>
+      <h1>{headingText}</h1>
+      <p>{descriptionText}</p>
+    </div>
+  );
+};
diff --git a/frontend/src/components/layout/topmessage/CsatSurvey.test.tsx b/frontend/src/components/layout/topmessage/CsatSurvey.test.tsx
@@ -1,8 +1,8 @@
 import { render, screen } from "@testing-library/react";
 import { mockCookiesModule } from "../../../../__mocks__/functions/cookies";
 import { mockGetLocaleModule } from "../../../../__mocks__/functions/getLocale";
-import { getMockProfileData } from "../../../../__mocks__/hooks/api/profile";
 import { mockUseL10nModule } from "../../../../__mocks__/hooks/l10n";
+import { getMockProfileData } from "../../../../__mocks__/hooks/api/profile";
 
 import { CsatSurvey } from "./CsatSurvey";
 
diff --git a/frontend/src/hooks/api/api.test.ts b/frontend/src/hooks/api/api.test.ts
@@ -0,0 +1,62 @@
+import { mockConfigModule } from "../../../__mocks__/configMock";
+import { mockUseL10nModule } from "../../../__mocks__/hooks/l10n";
+import { renderHook, waitFor } from "@testing-library/react";
+
+import { useApiV1 } from "./api";
+import { toast } from "react-toastify";
+
+jest.mock("../../config.ts", () => mockConfigModule);
+jest.mock("../../hooks/l10n.ts", () => mockUseL10nModule);
+jest.mock("react-toastify", () => ({
+  toast: jest.fn(),
+}));
+global.fetch = jest.fn();
+
+beforeEach(() => {
+  (global.fetch as jest.Mock).mockReset();
+});
+describe("useApiV1", () => {
+  it("shows returns the correct data when we have a 200", async () => {
+    const mockRuntimeConfig = mockConfigModule.getRuntimeConfig();
+    mockConfigModule.getRuntimeConfig.mockReturnValueOnce({
+      ...mockRuntimeConfig,
+    });
+    const mockResponse = {
+      ok: true,
+      status: 200,
+      json: async () => ({ test_key: "test_val" }),
+    } as Response;
+    (global.fetch as jest.Mock).mockResolvedValue(mockResponse);
+    const { result } = renderHook(() =>
+      useApiV1("/realphone", { dedupingInterval: 0 }),
+    );
+
+    await waitFor(() => {
+      expect(result.current.data).toEqual({ test_key: "test_val" });
+    });
+  });
+
+  it("shows a toast when we 500", async () => {
+    const mockRuntimeConfig = mockConfigModule.getRuntimeConfig();
+    mockConfigModule.getRuntimeConfig.mockReturnValueOnce({
+      ...mockRuntimeConfig,
+    });
+    const mockResponse2 = {
+      ok: false,
+      status: 500,
+      json: async () => ({}),
+    } as Response;
+    (global.fetch as jest.Mock).mockResolvedValue(mockResponse2);
+    const { result } = renderHook(() =>
+      useApiV1("/realphone", { dedupingInterval: 0 }),
+    );
+
+    await waitFor(() => {
+      expect(result.current.error?.response.status).toEqual(500);
+      expect(toast).toHaveBeenCalledWith(
+        "l10n string: [error-general], with vars: {}",
+        { type: "error" },
+      );
+    });
+  });
+});
diff --git a/frontend/src/hooks/api/api.ts b/frontend/src/hooks/api/api.ts
@@ -1,6 +1,8 @@
 import useSWR, { Fetcher, SWRConfig, SWRConfiguration, SWRResponse } from "swr";
 import { getRuntimeConfig } from "../../config";
 import { getCsrfToken } from "../../functions/cookies";
+import { toast } from "react-toastify";
+import { useL10n } from "../l10n";
 
 /**
  * Can be used to make API calls to the backend that work both in production and when running on the dev server.
@@ -69,6 +71,7 @@ export function useApiV1<Data = unknown>(
   route: string | null,
   swrOptions: Partial<SWRConfiguration> = {},
 ): SWRResponse<Data, FetchError> {
+  const l10n = useL10n();
   const onErrorRetry: typeof SWRConfig.defaultValue.onErrorRetry = (
     error: unknown | FetchError,
     key,
@@ -78,6 +81,9 @@ export function useApiV1<Data = unknown>(
   ) => {
     if (error instanceof FetchError && error.response.ok === false) {
       // When the request got rejected by the back-end, do not retry:
+      toast(l10n.getString("error-general"), {
+        type: "error",
+      });
       return;
     }
     // Otherwise, use SWR's default exponential back-off to retry:
diff --git a/frontend/src/pages/accounts/profile.page.tsx b/frontend/src/pages/accounts/profile.page.tsx
@@ -64,6 +64,7 @@ import Confetti from "react-confetti";
 import { useRouter } from "next/router";
 import { CornerNotification } from "../../components/dashboard/CornerNotification";
 import { useUtmApplier } from "../../hooks/utmApplier";
+import { ErrorGeneral } from "../../components/layout/ErrorGeneral";
 
 const Profile: NextPage = () => {
   const runtimeData = useRuntimeData();
@@ -100,6 +101,21 @@ const Profile: NextPage = () => {
 
   const profile = profileData.data?.[0];
   const user = userData.data?.[0];
+  if (
+    profileData.error ||
+    aliasData.randomAliasData.error ||
+    aliasData.customAliasData.error
+  ) {
+    // We don't need runtimeData.error in this, since we have defaults for that
+    return (
+      <>
+        <Layout>
+          <ErrorGeneral></ErrorGeneral>
+        </Layout>
+      </>
+    );
+  }
+
   if (
     !runtimeData.data ||
     !profile ||
diff --git a/frontend/src/pages/accounts/profile.test.tsx b/frontend/src/pages/accounts/profile.test.tsx
@@ -8,13 +8,15 @@ import { mockConfigModule } from "../../../__mocks__/configMock";
 import {
   setMockProfileData,
   setMockProfileDataOnce,
+  setMockProfileErrorOnce,
 } from "../../../__mocks__/hooks/api/profile";
 import { setMockUserData } from "../../../__mocks__/hooks/api/user";
 import {
   getMockCustomAlias,
   getMockRandomAlias,
   setMockAliasesData,
   setMockAliasesDataOnce,
+  setMockAliasesErrorOnce,
 } from "../../../__mocks__/hooks/api/aliases";
 import {
   getMockRuntimeDataWithPhones,
@@ -1292,4 +1294,33 @@ describe("The dashboard", () => {
     // eslint-disable-next-line testing-library/no-node-access
     expect(trackersCount.parentElement?.textContent).toMatch("99");
   });
+
+  describe("error state", () => {
+    it("shows an error page if profile call errors", async () => {
+      setMockProfileErrorOnce();
+      setMockAliasesDataOnce({
+        random: [
+          getMockRandomAlias({ address: "address1", num_blocked: 13 }),
+          getMockRandomAlias({ address: "address2", num_blocked: 37 }),
+        ],
+        custom: [],
+      });
+      render(<Profile />);
+
+      const errorText = await screen.findByText(
+        "l10n string: [error-general], with vars: {}",
+      );
+      expect(errorText).toBeInTheDocument();
+    });
+    it("shows an error page if alias call errors", async () => {
+      setMockProfileDataOnce({ has_premium: false });
+      setMockAliasesErrorOnce();
+      render(<Profile />);
+
+      const errorText = await screen.findByText(
+        "l10n string: [error-general], with vars: {}",
+      );
+      expect(errorText).toBeInTheDocument();
+    });
+  });
 });
diff --git a/frontend/src/pages/accounts/settings.page.tsx b/frontend/src/pages/accounts/settings.page.tsx
@@ -64,6 +64,7 @@ const Settings: NextPage = () => {
     document.location.assign(getRuntimeConfig().fxaLoginUrl);
   }
 
+  // We don't need a special error Layout since fetch failures don't cause rendering issues
   if (!profileData.data || !runtimeData.data) {
     // TODO: Show a loading spinner?
     return null;
diff --git a/frontend/src/pages/phone.page.tsx b/frontend/src/pages/phone.page.tsx
diff --git a/frontend/src/pages/phone.test.tsx b/frontend/src/pages/phone.test.tsx
