fix: improve error handling in EventFormClient and Axios interceptor to provide more detailed error messages

Author: pepperdad

apps/ticket-admin/src/app/events/create/_clientBoundary/EventFormClient/index.tsx

@@ -622,8 +622,9 @@ export function EventFormClient() {
       console.log(error);
 
       if (isAxiosErrorResponse(error)) {
-        alert("이벤트 생성 중 오류가 발생했습니다. 다시 시도해주세요.\n" + error.message);
-        console.error("Error creating event:", error);
+        alert(
+          "이벤트 생성 중 오류가 발생했습니다. 다시 시도해주세요.\n" + error.response?.data.message,
+        );
       }
     } finally {
       setIsSubmitting(false);

apps/ticket-admin/src/lib/axios/index.ts

@@ -38,12 +38,20 @@ instance.interceptors.response.use(
       // Server에서는 기본 전파
       console.error(error);
 
+      if (error?.response?.data) {
+        return Promise.reject({
+          ...error,
+          response: {
+            ...error.response,
+            data: error.response?.data,
+          },
+        });
+      }
+
       return Promise.reject(error);
     }
 
-    console.error("##error", JSON.stringify(error));
-
-    if (isAxiosErrorResponse(error.response?.data)) {
+    if (isAxiosErrorResponse(error)) {
       // 엑세스 토큰 없음
       if (
         error.response?.data.code === ERROR_CODE.NO_ACCESS_TOKEN ||
@@ -81,6 +89,16 @@ instance.interceptors.response.use(
           const originalRequest = error.config;
 
           if (!originalRequest) {
+            if (error?.response?.data) {
+              return Promise.reject({
+                ...error,
+                response: {
+                  ...error.response,
+                  data: error.response?.data,
+                },
+              });
+            }
+
             return Promise.reject(error);
           }
 
@@ -89,17 +107,33 @@ instance.interceptors.response.use(
           if (typeof window !== "undefined") {
             redirectToLoginOnce();
 
-            return Promise.reject(error?.response?.data);
+            if (error?.response?.data) {
+              return Promise.reject({
+                ...error,
+                response: {
+                  ...error.response,
+                  data: error.response?.data,
+                },
+              });
+            }
+
+            return Promise.reject(error);
           }
         }
       }
     }
 
-    if (error.response?.status === 500) {
-      return Promise.reject(error?.response?.data);
+    if (error?.response?.data) {
+      return Promise.reject({
+        ...error,
+        response: {
+          ...error.response,
+          data: error.response?.data,
+        },
+      });
     }
 
-    return Promise.reject(error?.response?.data);
+    return Promise.reject(error);
   },
 );
 

apps/ticket-admin/src/shared/types/axioxError.ts

@@ -1,15 +1,43 @@
-export type AxiosErrorResponse = {
+import { AxiosError } from "axios";
+
+import { ERROR_CODE } from "@/lib/axios/utils/errorCode";
+
+type ErrorResponse = {
   code: number;
   message: string;
 };
 
+export type AxiosErrorResponse = AxiosError<ErrorResponse>;
+
 export function isAxiosErrorResponse(error: unknown): error is AxiosErrorResponse {
+  if (error === null || typeof error !== "object") {
+    return false;
+  }
+
+  const hasOwnproperty = Object.prototype.hasOwnProperty;
+
   return (
-    typeof error === "object" &&
-    error !== null &&
-    "code" in error &&
-    "message" in error &&
-    typeof (error as AxiosErrorResponse).code === "number" &&
-    typeof (error as AxiosErrorResponse).message === "string"
+    hasOwnproperty.call(error, "isAxiosError") ||
+    (hasOwnproperty.call(error, "config") &&
+      hasOwnproperty.call(error, "request") &&
+      hasOwnproperty.call(error, "response"))
   );
 }
+
+export function isNotAuthErrorResponse(error: unknown): error is AxiosErrorResponse {
+  return (
+    isAxiosErrorResponse(error) &&
+    (error.response?.data.code === ERROR_CODE.NO_ACCESS_TOKEN ||
+      error.response?.data.code === ERROR_CODE.REFRESH_TOKEN_EXPIRED)
+  );
+}
+
+export function isAuthError(error: Error): error is AxiosErrorResponse {
+  return (
+    isAxiosErrorResponse(error) && error.response?.data.code === ERROR_CODE.ACCESS_TOKEN_EXPIRED
+  );
+}
+
+export function isNetworkError(error: Error): error is AxiosErrorResponse {
+  return isAxiosErrorResponse(error) && (error.response?.status ?? 0) >= 400;
+}