🔧 chore(constants.ts): add URL_EXCLUDED_FROM_ERROR_RETRIES constant to store URLs excluded from error retries for better error handling

🔧 chore(api.tsx): add logic to exclude certain URLs from error retries in the ApiInterceptor component to improve error handling
🔧 chore(index.ts): update postCustomComponent function to use the api instance instead of axios for consistency and reusability

src/frontend/src/constants/constants.ts

@@ -491,3 +491,10 @@ export const NOUNS: string[] = [
  *
  */
 export const USER_PROJECTS_HEADER = "My Collection";
+
+/**
+ * URLs excluded from error retries.
+ * @constant
+ *
+ */
+export const URL_EXCLUDED_FROM_ERROR_RETRIES = ["/api/v1/validate/code", "/api/v1/custom_component", "/api/v1/validate/prompt"];

src/frontend/src/controllers/API/api.tsx

@@ -1,6 +1,7 @@
 import axios, { AxiosError, AxiosInstance } from "axios";
 import { useContext, useEffect, useRef } from "react";
 import { alertContext } from "../../contexts/alertContext";
+import { URL_EXCLUDED_FROM_ERROR_RETRIES } from "../../constants/constants";
 
 // Create a new Axios instance
 const api: AxiosInstance = axios.create({
@@ -15,6 +16,9 @@ function ApiInterceptor() {
     const interceptor = api.interceptors.response.use(
       (response) => response,
       async (error: AxiosError) => {
+        if (URL_EXCLUDED_FROM_ERROR_RETRIES.includes(error.config?.url)) {
+          return Promise.reject(error);
+        }
         let retryCount = 0;
 
         while (retryCount < 4) {
@@ -31,7 +35,7 @@ function ApiInterceptor() {
                   "Refresh the page",
                   "Use a new flow tab",
                   "Check if the backend is up",
-                  "Endpoint: " + error.config.url,
+                  "Endpoint: " + error.config?.url,
                 ],
               });
               return Promise.reject(error);

src/frontend/src/controllers/API/index.ts

@@ -344,5 +344,5 @@ export async function postCustomComponent(
   code: string,
   apiClass: APIClassType
 ): Promise<AxiosResponse<APIClassType>> {
-  return await axios.post(`/api/v1/custom_component`, { code });
+  return await api.post(`/api/v1/custom_component`, { code });
 }