refactor: enhance error handling and logging in API requests

src/components/Global/ApiRequest.jsx

@@ -20,6 +20,13 @@ instance.interceptors.response.use(
   async (error) => {
     const originalRequest = error.config;
 
+    console.error("🚨 Response Error Interceptor:", {
+      status: error.response?.status,
+      url: originalRequest.url,
+      message: error.response?.data?.message,
+      hasRetried: originalRequest._retry
+    });
+
     if (error.response?.status === 401 && !originalRequest._retry) {
       originalRequest._retry = true;
 
@@ -29,14 +36,16 @@ instance.interceptors.response.use(
 
         const newAccessToken = refreshRes.data.data.accessToken;
         localStorage.setItem("token", newAccessToken);
+        console.log("✅ Token refreshed successfully");
 
         // update token di header
         instance.defaults.headers.common["Authorization"] = `Bearer ${newAccessToken}`;
         originalRequest.headers["Authorization"] = `Bearer ${newAccessToken}`;
 
+        console.log("🔁 Retrying original request...");
         return instance(originalRequest);
       } catch (refreshError) {
-        console.error("Refresh token gagal:", refreshError);
+        console.error("❌ Refresh token gagal:", refreshError.response?.data || refreshError.message);
         localStorage.clear();
         window.location.href = "/signin";
       }
@@ -66,15 +75,28 @@ async function ApiRequest({
 
   const rawToken = localStorage.getItem("token");
   if (token && rawToken) {
-    request.headers["Authorization"] = `Bearer ${rawToken.replace(/"/g, "")}`;
+    const cleanToken = rawToken.replace(/"/g, "");
+    request.headers["Authorization"] = `Bearer ${cleanToken}`;
+    console.log("🔐 Sending request with token:", cleanToken.substring(0, 20) + "...");
+  } else {
+    console.warn("⚠️ No token found in localStorage");
   }
 
+  console.log("📤 API Request:", { method, url: prefix, hasToken: !!rawToken });
+
   try {
     const response = await instance(request);
+    console.log("✅ API Response:", { url: prefix, status: response.status, statusCode: response.data?.statusCode });
     return { ...response, error: false };
   } catch (error) {
     const status = error?.response?.status || 500;
     const message = error?.response?.data?.message || error.message || "Something Wrong";
+    console.error("❌ API Error:", {
+      url: prefix,
+      status,
+      message,
+      fullError: error?.response?.data
+    });
 
     if (status !== 401) {
       await cekError(status, message);
@@ -109,14 +131,39 @@ async function cekError(status, message = "") {
 const SendRequest = async (queryParams) => {
   try {
     const response = await ApiRequest(queryParams);
-    return response?.data || [];
-  } catch (error) {
-    console.error("Request error:", error);
-    await Swal.fire({
-      icon: "error",
-      text: error.message || "Something went wrong",
+    console.log("📦 SendRequest response:", {
+      hasError: response.error,
+      status: response.status,
+      statusCode: response.data?.statusCode,
+      data: response.data
     });
-    return [];
+
+    // If ApiRequest returned error flag, return error structure
+    if (response.error) {
+      const errorMsg = response.data?.message || response.statusText || "Request failed";
+      console.error("❌ SendRequest error response:", errorMsg);
+
+      // Return consistent error structure instead of empty array
+      return {
+        statusCode: response.status || 500,
+        message: errorMsg,
+        data: null,
+        error: true
+      };
+    }
+
+    return response?.data || { statusCode: 200, data: [], message: "Success" };
+  } catch (error) {
+    console.error("❌ SendRequest catch error:", error);
+
+    // Don't show Swal here, let the calling code handle it
+    // This allows better error handling in each API call
+    return {
+      statusCode: 500,
+      message: error.message || "Something went wrong",
+      data: null,
+      error: true
+    };
   }
 };