fix: improve error handling around axios errors

flanksource · Sep 3, 2024 · 0cb1068 · 0cb1068
1 parent ba21f91
commit 0cb1068
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 27 deletions.
diff --git a/src/api/axios.ts b/src/api/axios.ts
@@ -1,5 +1,5 @@
+import { toastError } from "@flanksource-ui/components/Toast/toast";
 import axios, { AxiosError } from "axios";
-import { toastError } from "../components/Toast/toast";
 
 const isClerkAuthSystem = !!process.env.NEXT_PUBLIC_AUTH_IS_CLERK === true;
 
@@ -146,10 +146,26 @@ for (const client of [
   Snapshot
 ]) {
   client.interceptors.response.use(
-    (response) => response,
+    (response) => {
+      return response;
+    },
     (error) => {
       redirectToLoginPageOnSessionExpiry(error);
-      toastError(error.response.data.message);
+      if ("code" in (error as any)) {
+        // Show a toast message for timeout and network errors
+        if (error.code === "ECONNABORTED") {
+          toastError("Request timed out. Please try again.");
+          return;
+        }
+        if (error.code === "ERR_NETWORK") {
+          toastError("Network Error. Please try again.");
+          return;
+        }
+        if (error.code === "ERR_INTERNET_DISCONNECTED") {
+          toastError("No internet connection. Please try again.");
+          return;
+        }
+      }
       return Promise.reject(error);
     }
   );

diff --git a/src/api/resolve.ts b/src/api/resolve.ts
@@ -24,21 +24,10 @@ export type ApiResp<T = any> = Promise<
 export const resolvePostGrestRequestWithPagination: <T>(
   promise: AxiosPromise<T>
 ) => ApiResp<T> = async (promise) => {
-  try {
-    const { data, headers } = await promise;
-    const hasContentRangeHeader = !!headers["content-range"]?.trim();
-    const totalEntries = hasContentRangeHeader
-      ? +headers["content-range"].split("/")[1]
-      : undefined;
-    return { data, error: null, totalEntries };
-  } catch (error: any) {
-    if (error instanceof Error) {
-      return { error, data: null };
-    } else {
-      return {
-        error: Error("Unknown error happened while fetching."),
-        data: null
-      };
-    }
-  }
+  const { data, headers } = await promise;
+  const hasContentRangeHeader = !!headers["content-range"]?.trim();
+  const totalEntries = hasContentRangeHeader
+    ? +headers["content-range"].split("/")[1]
+    : undefined;
+  return { data, error: null, totalEntries };
 };
diff --git a/src/query-client.ts b/src/query-client.ts
@@ -1,6 +1,5 @@
 import { QueryClient } from "@tanstack/react-query";
 import { AxiosError } from "axios";
-import { toastError } from "./components/Toast/toast";
 
 const defaultStaleTime = 1000 * 60 * 5;
 
@@ -14,18 +13,13 @@ export const queryClient = new QueryClient({
       retry: (failureCount, error) => {
         if (error instanceof AxiosError) {
           // Retry timeout errors and network errors with a delay for up to 3 times
-          if (error.code === "ECONNABORTED" || !error.response) {
+          if (error.code === "ECONNABORTED" || error.code === "ERR_NETWORK") {
             if (failureCount < 3) {
               return true;
             }
           }
         }
         return false;
-      },
-      onError: (error) => {
-        if (error instanceof Error) {
-          toastError(`Something went wrong: ${error.message}`);
-        }
       }
     }
   }