feat(toast): Add toast for API error handling in the frontend, page error

joeherm · joeherm · commit b12c86cb2b1a · 2025-11-12T16:53:35.000-05:00
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/next-env.d.ts b/frontend/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
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/landing/PlanMatrix.test.tsx b/frontend/src/components/landing/PlanMatrix.test.tsx
@@ -2,6 +2,7 @@ import { render, screen } from "@testing-library/react";
 
 import { mockLocalizedModule } from "../../../__mocks__/components/Localized";
 import { mockConfigModule } from "../../../__mocks__/configMock";
+import { mockUseL10nModule } from "../../../__mocks__/hooks/l10n";
 import { setMockProfileData } from "../../../__mocks__/hooks/api/profile";
 import {
   setMockRuntimeDataOnce,
@@ -10,7 +11,6 @@ import {
   getMockRuntimeDataWithoutPremium,
 } from "../../../__mocks__/hooks/api/runtimeData";
 import { mockUseFxaFlowTrackerModule } from "../../../__mocks__/hooks/fxaFlowTracker";
-import { mockUseL10nModule } from "../../../__mocks__/hooks/l10n";
 import { mockNextRouter } from "../../../__mocks__/modules/next__router";
 import { mockReactGa } from "../../../__mocks__/modules/react-ga";
 
diff --git a/frontend/src/components/layout/navigation/Navigation.test.tsx b/frontend/src/components/layout/navigation/Navigation.test.tsx
@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { mockConfigModule } from "../../../../__mocks__/configMock";
+import { mockUseL10nModule } from "../../../../__mocks__/hooks/l10n";
 import { setMockProfileData } from "../../../../__mocks__/hooks/api/profile";
 import {
   getMockRuntimeDataWithPeriodicalPremium,
@@ -8,7 +9,6 @@ import {
 } from "../../../../__mocks__/hooks/api/runtimeData";
 import { setMockUserData } from "../../../../__mocks__/hooks/api/user";
 import { mockUseFxaFlowTrackerModule } from "../../../../__mocks__/hooks/fxaFlowTracker";
-import { mockUseL10nModule } from "../../../../__mocks__/hooks/l10n";
 import { mockNextRouter } from "../../../../__mocks__/modules/next__router";
 import { mockReactIntersectionObsever } from "../../../../__mocks__/modules/react-intersection-observer";
 
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/components/waitlist/WaitlistPage.test.tsx b/frontend/src/components/waitlist/WaitlistPage.test.tsx
@@ -6,11 +6,11 @@ import { type Props as CountryPickerProps } from "./CountryPicker";
 import { type Props as LocalePickerProps } from "./LocalePicker";
 import { mockNextRouter } from "../../../__mocks__/modules/next__router";
 import { mockConfigModule } from "../../../__mocks__/configMock";
+import { mockUseL10nModule } from "../../../__mocks__/hooks/l10n";
 import { setMockRuntimeData } from "../../../__mocks__/hooks/api/runtimeData";
 import { setMockUserData } from "../../../__mocks__/hooks/api/user";
 import { setMockProfileData } from "../../../__mocks__/hooks/api/profile";
 import { mockUseFxaFlowTrackerModule } from "../../../__mocks__/hooks/fxaFlowTracker";
-import { mockUseL10nModule } from "../../../__mocks__/hooks/l10n";
 import { mockLocalizedModule } from "../../../__mocks__/components/Localized";
 
 import { WaitlistPage } from "./WaitlistPage";
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
@@ -100,6 +100,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>
+          <div>{l10n.getString("error-general")}</div>
+        </Layout>
+      </>
+    );
+  }
+
   if (
     !runtimeData.data ||
     !profile ||
diff --git a/frontend/src/pages/accounts/profile.test.tsx b/frontend/src/pages/accounts/profile.test.tsx
@@ -9,13 +9,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,
@@ -1245,4 +1247,33 @@ describe("The dashboard", () => {
       expect(confettiCanvas).toBeInTheDocument();
     });
   });
+
+  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/accounts/settings.test.tsx b/frontend/src/pages/accounts/settings.test.tsx
diff --git a/frontend/src/pages/faq.test.tsx b/frontend/src/pages/faq.test.tsx
diff --git a/frontend/src/pages/index.test.tsx b/frontend/src/pages/index.test.tsx
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
diff --git a/frontend/src/pages/premium.test.tsx b/frontend/src/pages/premium.test.tsx
