refactor(web): replace axios with fetch (#1653)

* refactor(web): replace axios with fetch

* refactor(web): replace CompassApi with BaseApi and remove unused compass.api files

* refactor: update API calls in various modules to use BaseApi instead of CompassApi
* chore: remove compass.api and related utility files
* feat: introduce base API structure for improved request handling and error management
* test: add unit tests for new base API functionality

* refactor(email): enhance error handling with KitApiError class

* feat: introduce KitApiError for improved error management in email service
* refactor: replace EmailServiceError with KitApiError for consistency
* chore: update error handling logic to utilize BaseError and genericError
* test: ensure robust error logging and handling in email service methods

Author: tyler-dane

bun.lock

@@ -1,4 +1,4 @@
-import axios from "axios";
+import { BaseError } from "@core/errors/errors.base";
 import { Logger } from "@core/logger/winston.logger";
 import { mapCompassUserToEmailSubscriber } from "@core/mappers/subscriber/map.subscriber";
 import {
@@ -9,13 +9,50 @@ import { type Schema_User } from "@core/types/user.types";
 import { ENV } from "@backend/common/constants/env.constants";
 import { isMissingUserTagId } from "@backend/common/constants/env.util";
 import { EmailerError } from "@backend/common/errors/emailer/emailer.errors";
-import { error } from "@backend/common/errors/handlers/error.handler";
+import {
+  error,
+  genericError,
+} from "@backend/common/errors/handlers/error.handler";
 import {
   type Response_TagSubscriber,
   type Response_UpsertSubscriber,
 } from "./email.types";
 
 const logger = Logger("app:email.service");
+
+/**
+ * Internal error class for Kit API failures.
+ * Used to pass response details from post() to callers, who then
+ * transform it into appropriate domain errors using error().
+ */
+class KitApiError extends Error {
+  constructor(
+    message: string,
+    public readonly method: string,
+    public readonly url: string,
+    public readonly status?: number,
+    public readonly data?: unknown,
+  ) {
+    super(message);
+    this.name = "KitApiError";
+    Object.setPrototypeOf(this, new.target.prototype);
+    Error.captureStackTrace(this);
+  }
+}
+
+const getResponseData = async (response: Response): Promise<unknown> => {
+  const text = await response.text();
+  if (!text) {
+    return undefined;
+  }
+
+  try {
+    return JSON.parse(text);
+  } catch {
+    return text;
+  }
+};
+
 class EmailService {
   private static headers: { headers: Record<string, string> };
   private static readonly baseUrl = "https://api.kit.com/v4";
@@ -64,18 +101,22 @@ class EmailService {
       // add tag to subscriber
       logger.info(`Tagging subscriber: ${subscriber.email_address}`);
       const url = `${this.baseUrl}/tags/${tagId}/subscribers/${subId}`;
-      const result = await axios.post(url, {}, this.headers);
-      return result.data;
+      return await this.post<Response_TagSubscriber>(url, {});
     } catch (err) {
-      if (axios.isAxiosError(err)) {
+      if (err instanceof BaseError) {
+        throw err;
+      }
+
+      if (err instanceof KitApiError) {
         logger.error({
           message: err.message,
-          status: err.response?.status,
-          data: err.response?.data,
-          url: err.config?.url,
-          method: err.config?.method,
+          status: err.status,
+          data: err.data,
+          method: err.method,
+          url: err.url,
         });
-        switch (err.response?.status) {
+
+        switch (err.status) {
           case 401:
             throw error(
               EmailerError.InvalidSecret,
@@ -84,11 +125,11 @@ class EmailService {
           case 404:
             throw error(EmailerError.InvalidTagId, "Subscriber was not tagged");
           default:
-            throw err;
+            throw genericError(err, "Failed to tag subscriber");
         }
-      } else {
-        throw err;
       }
+
+      throw genericError(err, "Failed to tag subscriber");
     }
   }
 
@@ -104,8 +145,28 @@ class EmailService {
     }
 
     const url = `${this.baseUrl}/subscribers`;
-    const result = await axios.post(url, data, this.headers);
-    return result.data;
+    return await this.post<Response_UpsertSubscriber>(url, data);
+  }
+
+  private static async post<T>(url: string, body: object): Promise<T> {
+    const response = await fetch(url, {
+      body: JSON.stringify(body),
+      headers: this.headers.headers,
+      method: "POST",
+    });
+    const data = await getResponseData(response);
+
+    if (!response.ok) {
+      throw new KitApiError(
+        `Kit request failed with status ${response.status}`,
+        "POST",
+        url,
+        response.status,
+        data,
+      );
+    }
+
+    return data as T;
   }
 }
 

packages/backend/src/email/email.service.ts

@@ -1,4 +1,3 @@
-import axios from "axios";
 import pkg from "inquirer";
 import { ObjectId } from "mongodb";
 import { getApiBaseUrl, log } from "@scripts/common/cli.utils";
@@ -16,9 +15,18 @@ async function createEvent(
   baseUrl: string,
   accessToken: string,
 ) {
-  await axios.post(`${baseUrl}/event`, events, {
-    headers: { Cookie: `sAccessToken=${accessToken}` },
+  const response = await fetch(`${baseUrl}/event`, {
+    body: JSON.stringify(events),
+    headers: {
+      "Content-Type": "application/json",
+      Cookie: `sAccessToken=${accessToken}`,
+    },
+    method: "POST",
   });
+
+  if (!response.ok) {
+    throw new Error(`Failed to create events: ${response.status}`);
+  }
 }
 
 async function seedEvents(userInput: string) {

packages/scripts/src/commands/seed.ts

@@ -19,7 +19,6 @@
     "@react-oauth/google": "^0.7.0",
     "@reduxjs/toolkit": "^1.6.1",
     "@tanstack/react-hotkeys": "^0.3.1",
-    "axios": "^1.2.2",
     "classnames": "^2.3.1",
     "dayjs": "^1.10.7",
     "dexie": "^4.2.1",

packages/web/package.json

@@ -292,7 +292,7 @@ describe("useConnectGoogle", () => {
       userMetadataStatus: "loaded",
     });
     mockAuthApi.connectGoogle.mockRejectedValueOnce({
-      isAxiosError: true,
+      config: { url: "/auth/google/connect" },
       response: {
         data: {
           code: "GOOGLE_ACCOUNT_ALREADY_CONNECTED",

packages/web/src/auth/google/hooks/useConnectGoogle/useConnectGoogle.test.ts

@@ -1,4 +1,3 @@
-import { type AxiosError, isAxiosError } from "axios";
 import { useCallback, useSyncExternalStore } from "react";
 import { GOOGLE_REVOKED } from "@core/constants/sse.constants";
 import { type GoogleConnectionState } from "@core/types/user.types";
@@ -14,11 +13,12 @@ import {
 } from "@web/auth/google/state/google.sync.state";
 import { syncPendingLocalEvents } from "@web/auth/google/util/google.auth.util";
 import { AuthApi } from "@web/common/apis/auth.api";
+import { SyncApi } from "@web/common/apis/sync.api";
 import {
   getApiErrorCode,
+  isApiError,
   parseGoogleConnectError,
-} from "@web/common/apis/compass.api.util";
-import { SyncApi } from "@web/common/apis/sync.api";
+} from "@web/common/apis/util/api.util";
 import { GOOGLE_REPAIR_FAILED_TOAST_ID } from "@web/common/constants/toast.constants";
 import { showErrorToast } from "@web/common/utils/toast/error-toast.util";
 import {
@@ -69,7 +69,7 @@ export const useConnectGoogle = (): UseConnectGoogleResult => {
       try {
         await AuthApi.connectGoogle(googleConnectRequest);
       } catch (error) {
-        if (isAxiosError(error)) {
+        if (isApiError(error)) {
           const message = parseGoogleConnectError(error)?.message;
 
           if (message) {
@@ -103,7 +103,7 @@ export const useConnectGoogle = (): UseConnectGoogleResult => {
       } catch (error) {
         clearGoogleSyncIndicatorOverride();
         const isGoogleRevoked =
-          getApiErrorCode(error as AxiosError) === GOOGLE_REVOKED;
+          isApiError(error) && getApiErrorCode(error) === GOOGLE_REVOKED;
 
         if (isGoogleRevoked) {
           return;

packages/web/src/auth/google/hooks/useConnectGoogle/useConnectGoogle.ts

@@ -0,0 +1,31 @@
+import { type Status } from "@core/errors/status.codes";
+
+export type ApiAdapter = <T>(
+  config: ApiRequestConfig & { body?: unknown },
+) => Promise<ApiResponse<T>>;
+
+export interface ApiError extends Error {
+  config?: ApiRequestConfig;
+  response?: ApiResponse<unknown>;
+}
+
+export interface ApiRequestConfig {
+  headers?: HeadersInit;
+  method?: string;
+  url?: string;
+}
+
+export interface ApiResponse<T> {
+  config: ApiRequestConfig;
+  data: T;
+  headers: Headers;
+  status: number;
+  statusText: string;
+}
+
+export type ApiMethodConfig = Pick<ApiRequestConfig, "headers">;
+
+export type SignoutStatus =
+  | Status.UNAUTHORIZED
+  | Status.NOT_FOUND
+  | Status.GONE;

packages/web/src/common/apis/api.types.ts

@@ -4,11 +4,11 @@ import {
   type Result_Auth_Compass,
 } from "@core/types/auth.types";
 import { type GoogleAuthConfig } from "@web/auth/google/hooks/googe.auth.types";
-import { CompassApi } from "@web/common/apis/compass.api";
+import { BaseApi } from "@web/common/apis/base/base.api";
 
 const AuthApi = {
   async loginOrSignup(data: GoogleAuthConfig): Promise<Result_Auth_Compass> {
-    const response = await CompassApi.post<Result_Auth_Compass>(
+    const response = await BaseApi.post<Result_Auth_Compass>(
       `/signinup`,
       data,
       { headers: { rid: "thirdparty" } },
@@ -20,7 +20,7 @@ const AuthApi = {
   async connectGoogle(
     data: GoogleAuthCodeRequest,
   ): Promise<GoogleConnectResponse> {
-    const response = await CompassApi.post<GoogleConnectResponse>(
+    const response = await BaseApi.post<GoogleConnectResponse>(
       `/auth/google/connect`,
       data,
     );