Generalize API error handling

GrantGryczan · GrantGryczan · commit 843a5558a060 · 2025-06-10T04:15:12.000-04:00
I've already run into bugs twice before due to messing up the
boilerplate code that was previously necessary. This abstraction makes
the interface for API error handling much more simple (and therefore
robust). It's not perfect, but it solves the problem.
diff --git a/frontend/components/DefaultHeader.vue b/frontend/components/DefaultHeader.vue
@@ -31,18 +31,16 @@ async function signOut() {
 
   signOutLoading.value = true;
 
-  try {
-    await api("/users/$me/sessions/$current", {
-      method: "DELETE",
-    }).finally(() => {
-      signOutLoading.value = false;
-    });
-  } catch (error) {
-    const errorCode = getApiErrorCode(error);
-    if (!(errorCode === "AUTH_FAILED" || errorCode === "RESOURCE_NOT_FOUND")) {
-      throw error;
-    }
-  }
+  await api("/users/$me/sessions/$current", {
+    method: "DELETE",
+
+    catchApiErrors: {
+      AUTH_FAILED: () => Promise.resolve(),
+      RESOURCE_NOT_FOUND: () => Promise.resolve(),
+    },
+  }).finally(() => {
+    signOutLoading.value = false;
+  });
 
   setMe(null);
 }
diff --git a/frontend/composables/useApi.ts b/frontend/composables/useApi.ts
@@ -1,47 +1,27 @@
 import type { UseFetchOptions } from "nuxt/app";
-import { createFetchError, type FetchError } from "ofetch";
+import type { ApiOnlyOptions } from "~/utils/api";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- We don't have an accurate type for this, and using `unknown` would require many pointless type assertions or runtime checks.
 type DefaultResT = any;
 
-export interface UseApiOptions<ResT> extends UseFetchOptions<ResT> {
-  /**
-   * Whether to prevent the default behavior (an error box) when a response
-   * error occurs.
-   */
-  shouldIgnoreResponseError?: (error: FetchError) => boolean;
-}
+export interface UseApiOptions<ResT, CaughtResT>
+  extends Omit<UseFetchOptions<ResT>, "$fetch">,
+    ApiOnlyOptions<CaughtResT> {}
 
 /**
  * A custom [`useFetch`](https://nuxt.com/docs/api/composables/use-fetch)
  * wrapper for our API.
  */
-export default function useApi<ResT = DefaultResT>(
+export default function useApi<ResT = DefaultResT, CaughtResT = never>(
   url: MaybeRefOrGetter<string>,
-  { shouldIgnoreResponseError, ...options }: UseApiOptions<ResT> = {},
+  options: UseApiOptions<ResT, CaughtResT> = {},
 ) {
-  const errorBoxes = useErrorBoxes();
-
   return useFetch<ResT>(url, {
     // The default is `cancel`, but canceling previous requests doesn't stop the
     // backend from processing them. This lets any previous request finish and
     // reuses it, which is quicker and more reliable since it already started.
     dedupe: "defer",
 
-    onRequestError(ctx) {
-      errorBoxes.handleError(ctx.error);
-    },
-
-    onResponseError(ctx) {
-      const error = createFetchError(ctx);
-
-      if (shouldIgnoreResponseError?.(error)) {
-        return;
-      }
-
-      errorBoxes.handleError(error);
-    },
-
     // eslint-disable-next-line @typescript-eslint/no-explicit-any -- The error from removing this assertion is too convoluted for me to decipher, and I see no reason this shouldn't work at runtime.
     ...(options as any),
     $fetch: api,
diff --git a/frontend/composables/useMe.ts b/frontend/composables/useMe.ts
@@ -13,9 +13,10 @@ export default async function useMe(): Promise<Readonly<Ref<User | null>>> {
   // Only fetch the user if it wasn't already set by `setMe` elsewhere.
   if (me.value === "unknown") {
     await callOnce(async () => {
-      const { data } = await useApi<User>("/users/$me", {
-        shouldIgnoreResponseError: (error) =>
-          getApiErrorCode(error) === "RESOURCE_NOT_FOUND",
+      const { data } = await useApi<User, null>("/users/$me", {
+        catchApiErrors: {
+          RESOURCE_NOT_FOUND: () => Promise.resolve(null),
+        },
       });
 
       me.value = data.value;
diff --git a/frontend/pages/reset-password.vue b/frontend/pages/reset-password.vue
@@ -37,16 +37,16 @@ const passwordResetResponse = await useApi("/password-reset", {
     },
   },
 
-  shouldIgnoreResponseError: (error) => {
-    const code = getApiErrorCode(error);
-    return code === "INVALID_QUERY_DATA" || code === "RESOURCE_NOT_FOUND";
-  },
-
   immediate: route.query.token !== undefined,
 
   // Don't rerun the request when `route.query.token` changes. It can change to
   // `undefined`, which is invalid.
   watch: false,
+
+  catchApiErrors: {
+    INVALID_QUERY_DATA: "silence",
+    RESOURCE_NOT_FOUND: "silence",
+  },
 });
 
 watch(
@@ -77,26 +77,24 @@ const userId = ref<string>();
 async function submitNewPassword() {
   loading.value = true;
 
-  try {
-    const passwordResponse = await api("/password-reset/password", {
-      method: "POST",
-      query: { token: route.query.token },
-      body: { password: password.value },
-    }).finally(() => {
-      loading.value = false;
-    });
-
-    setMe(passwordResponse.user);
-    userId.value = passwordResponse.user.id;
-
-    page.value = "done";
-  } catch (error) {
-    if (getApiErrorCode(error) === "RESOURCE_NOT_FOUND") {
-      page.value = "failed";
-    } else {
-      throw error;
-    }
-  }
+  const passwordResponse = await api("/password-reset/password", {
+    method: "POST",
+    query: { token: route.query.token },
+    body: { password: password.value },
+
+    catchApiErrors: {
+      RESOURCE_NOT_FOUND: () => {
+        page.value = "failed";
+      },
+    },
+  }).finally(() => {
+    loading.value = false;
+  });
+
+  setMe(passwordResponse.user);
+  userId.value = passwordResponse.user.id;
+
+  page.value = "done";
 }
 </script>
 
diff --git a/frontend/pages/sign-in.vue b/frontend/pages/sign-in.vue
@@ -16,31 +16,29 @@ watch([email, password], () => {
 async function submitSignIn() {
   loading.value = true;
 
-  try {
-    const session = await api("/sessions", {
-      method: "POST",
-      body: {
-        email: email.value,
-        password: password.value,
+  const session = await api("/sessions", {
+    method: "POST",
+    body: {
+      email: email.value,
+      password: password.value,
+    },
+
+    catchApiErrors: {
+      USER_CREDENTIALS_WRONG: () => {
+        areCredentialsWrong.value = true;
       },
-    }).finally(() => {
-      loading.value = false;
-    });
-
-    setMe(session.user);
-
-    await useRedirectIfSignedIn({
-      onBeforeRedirect() {
-        loading.value = true;
-      },
-    });
-  } catch (error) {
-    if (getApiErrorCode(error) === "USER_CREDENTIALS_WRONG") {
-      areCredentialsWrong.value = true;
-    } else {
-      throw error;
-    }
-  }
+    },
+  }).finally(() => {
+    loading.value = false;
+  });
+
+  setMe(session.user);
+
+  await useRedirectIfSignedIn({
+    onBeforeRedirect() {
+      loading.value = true;
+    },
+  });
 }
 </script>
 
diff --git a/frontend/pages/sign-up.vue b/frontend/pages/sign-up.vue
@@ -72,12 +72,12 @@ const codeResponse = await useApi("/email-verification/code", {
   method: "POST",
   query: { token: route.query.token },
 
-  shouldIgnoreResponseError: (error) => {
-    const code = getApiErrorCode(error);
-    return code === "INVALID_QUERY_DATA" || code === "RESOURCE_NOT_FOUND";
-  },
-
   immediate: route.query.token !== undefined,
+
+  catchApiErrors: {
+    INVALID_QUERY_DATA: "silence",
+    RESOURCE_NOT_FOUND: "silence",
+  },
 });
 
 watchEffect(() => {
@@ -110,27 +110,25 @@ watch(code, (code) => {
 async function submitCode(event: Event) {
   loading.value = true;
 
-  try {
-    await api("/email-verification", {
-      query: {
-        email: email.value,
-        code: code.value.toUpperCase(),
+  await api("/email-verification", {
+    query: {
+      email: email.value,
+      code: code.value.toUpperCase(),
+    },
+
+    catchApiErrors: {
+      RESOURCE_NOT_FOUND: () => {
+        isCodeWrong.value = true;
+
+        const form = event.target as HTMLFormElement;
+        form.getElementsByTagName("input")[0]?.select();
       },
-    }).finally(() => {
-      loading.value = false;
-    });
+    },
+  }).finally(() => {
+    loading.value = false;
+  });
 
-    page.value = "final";
-  } catch (error) {
-    if (getApiErrorCode(error) === "RESOURCE_NOT_FOUND") {
-      isCodeWrong.value = true;
-
-      const form = event.target as HTMLFormElement;
-      form.getElementsByTagName("input")[0]?.select();
-    } else {
-      throw error;
-    }
-  }
+  page.value = "final";
 }
 
 function tryAgain() {
@@ -145,33 +143,31 @@ const confirmPassword = ref("");
 async function completeSignUp() {
   loading.value = true;
 
-  try {
-    const user = await api("/users", {
-      method: "POST",
-      body: {
-        email: email.value,
-        emailVerificationCode: code.value.toUpperCase(),
-        name: name.value,
-        password: password.value,
+  const user = await api("/users", {
+    method: "POST",
+    body: {
+      email: email.value,
+      emailVerificationCode: code.value.toUpperCase(),
+      name: name.value,
+      password: password.value,
+    },
+
+    catchApiErrors: {
+      EMAIL_VERIFICATION_CODE_WRONG: () => {
+        isCodeWrong.value = true;
       },
-    }).finally(() => {
-      loading.value = false;
-    });
+    },
+  }).finally(() => {
+    loading.value = false;
+  });
 
-    setMe(user);
+  setMe(user);
 
-    await useRedirectIfSignedIn({
-      onBeforeRedirect() {
-        loading.value = true;
-      },
-    });
-  } catch (error) {
-    if (getApiErrorCode(error) === "EMAIL_VERIFICATION_CODE_WRONG") {
-      isCodeWrong.value = true;
-    } else {
-      throw error;
-    }
-  }
+  await useRedirectIfSignedIn({
+    onBeforeRedirect() {
+      loading.value = true;
+    },
+  });
 }
 </script>
 
diff --git a/frontend/pages/verify-email.vue b/frontend/pages/verify-email.vue
@@ -9,9 +9,9 @@ const { data: email } = await useApi("/email-verification", {
 
   transform: (emailVerification) => emailVerification.email ?? "",
 
-  shouldIgnoreResponseError: (error) => {
-    const code = getApiErrorCode(error);
-    return code === "INVALID_QUERY_DATA" || code === "RESOURCE_NOT_FOUND";
+  catchApiErrors: {
+    INVALID_QUERY_DATA: "silence",
+    RESOURCE_NOT_FOUND: "silence",
   },
 });
 
@@ -23,22 +23,20 @@ const code = ref<string>();
 async function generateCode() {
   loading.value = true;
 
-  try {
-    const codeResponse = await api("/email-verification/code", {
-      method: "POST",
-      query: { token: route.query.token },
-    }).finally(() => {
-      loading.value = false;
-    });
-
-    code.value = codeResponse.code;
-  } catch (error) {
-    if (getApiErrorCode(error) === "RESOURCE_NOT_FOUND") {
-      email.value = "";
-    } else {
-      throw error;
-    }
-  }
+  const codeResponse = await api("/email-verification/code", {
+    method: "POST",
+    query: { token: route.query.token },
+
+    catchApiErrors: {
+      RESOURCE_NOT_FOUND: () => {
+        email.value = "";
+      },
+    },
+  }).finally(() => {
+    loading.value = false;
+  });
+
+  code.value = codeResponse.code;
 }
 
 function handleCodeInputClick(
diff --git a/frontend/utils/api.ts b/frontend/utils/api.ts
