500에러 발생확인

2026-03-09 14:20:35 +09:00 · 2026-03-09 14:20:35 +09:00 · 9ec59bdabb
commit 9ec59bdabb
parent b1e823083e
5 changed files with 192 additions and 32 deletions
--- a/src/app/error.jsx
+++ b/src/app/error.jsx
@ -1,6 +1,16 @@
 'use client'

 export default function ServerError() {
+  // Log 500 error details to console
+  if (typeof window !== 'undefined') {
+    console.error('🚨 500 Server Error Page Rendered:', {
+      timestamp: new Date().toISOString(),
+      userAgent: navigator.userAgent,
+      url: window.location.href,
+      referrer: document.referrer
+    })
+  }
+
  return (
    <section className="bg-white dark:bg-gray-900">
      <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
@ -8,6 +18,9 @@ export default function ServerError() {
          <h1 className="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-primary-600 dark:text-primary-500">500</h1>
          <p className="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">Internal Server Error.</p>
          <p className="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">We are already working to solve the problem. </p>
+          <p className="text-sm text-gray-400 dark:text-gray-500">
+            Check the browser console for detailed error information.
+          </p>
        </div>
      </div>
    </section>
--- a/src/app/layout.js
+++ b/src/app/layout.js
@ -9,6 +9,7 @@ import GlobalDataProvider from './GlobalDataProvider'
 import Header from '@/components/header/Header'
 import QModal from '@/components/common/modal/QModal'
 import PopupManager from '@/components/common/popupManager/PopupManager'
+import ErrorBoundary from '@/components/common/ErrorBoundary'

 import './globals.css'
 import '../styles/style.scss'
@ -69,26 +70,28 @@ export default async function RootLayout({ children }) {
  return (
    <RecoilRootWrapper>
      <GlobalDataProvider>
-        <html lang="en">
-          <body>
-            {headerPathname === '/login' || headerPathname === '/join' ? (
-              <QcastProvider>{children}</QcastProvider>
-            ) : (
-              <QcastProvider>
-                <GlobalLoadingProvider />
-                <div className="wrap">
-                  <Header userSession={sessionProps} />
-                  <div className="content">
-                    <SessionProvider useSession={sessionProps}>{children}</SessionProvider>
+        <ErrorBoundary>
+          <html lang="en">
+            <body>
+              {headerPathname === '/login' || headerPathname === '/join' ? (
+                <QcastProvider>{children}</QcastProvider>
+              ) : (
+                <QcastProvider>
+                  <GlobalLoadingProvider />
+                  <div className="wrap">
+                    <Header userSession={sessionProps} />
+                    <div className="content">
+                      <SessionProvider useSession={sessionProps}>{children}</SessionProvider>
+                    </div>
+                    <Footer />
                  </div>
-                  <Footer />
-                </div>
-                <QModal />
-                <PopupManager />
-              </QcastProvider>
-            )}
-          </body>
-        </html>
+                  <QModal />
+                  <PopupManager />
+                </QcastProvider>
+              )}
+            </body>
+          </html>
+        </ErrorBoundary>
      </GlobalDataProvider>
    </RecoilRootWrapper>
  )
--- a/src/components/main/MainContents.jsx
+++ b/src/components/main/MainContents.jsx
@ -55,12 +55,26 @@ export default function MainContents({ setFaqOpen, setFaqModalNoticeNo }) {
    })

    const apiUrl = `${url}?${params.toString()}`
-    const resultData = await get({ url: apiUrl })
+    
+    try {
+      const resultData = await get({ url: apiUrl })

-    if (resultData) {
-      if (resultData.result.code === 200) {
-        setFileList(resultData.data)
+      if (resultData) {
+        if (resultData.result.code === 200) {
+          setFileList(resultData.data)
+        }
      }
+    } catch (error) {
+      console.error('🚨 ARCHIVE fetching error:', {
+        error,
+        timestamp: new Date().toISOString(),
+        apiUrl,
+        params: Object.fromEntries(params),
+        status: error.response?.status,
+        statusText: error.response?.statusText,
+        message: error.message,
+        stack: error.stack
+      })
    }
  }

@ -82,7 +96,16 @@ export default function MainContents({ setFaqOpen, setFaqModalNoticeNo }) {
        }
      })
    } catch (error) {
-      console.error('NOTICE fetching error:', error)
+      console.error('🚨 NOTICE fetching error:', {
+        error,
+        timestamp: new Date().toISOString(),
+        apiUrl: noticeApiUrl,
+        params: param,
+        status: error.response?.status,
+        statusText: error.response?.statusText,
+        message: error.message,
+        stack: error.stack
+      })
    }
  }

@ -106,7 +129,16 @@ export default function MainContents({ setFaqOpen, setFaqModalNoticeNo }) {
        }
      })
    } catch (error) {
-      console.error('FAQ fetching error:', error)
+      console.error('🚨 FAQ fetching error:', {
+        error,
+        timestamp: new Date().toISOString(),
+        apiUrl: faqApiUrl,
+        params: param,
+        status: error.response?.status,
+        statusText: error.response?.statusText,
+        message: error.message,
+        stack: error.stack
+      })
    }
  }

--- a/src/hooks/main/useMainContentsController.js
+++ b/src/hooks/main/useMainContentsController.js
@ -53,7 +53,20 @@ export const useMainContentsController = () => {
      })
    } catch (error) {
      setIsGlobalLoading(false)
-      console.error('MAIN API fetching error:', error)
+      console.error('🚨 MAIN API fetching error:', {
+        error,
+        timestamp: new Date().toISOString(),
+        apiUrl,
+        session: {
+          storeId: session?.storeId,
+          userId: session?.userId,
+          builderNo: session?.builderNo
+        },
+        status: error.response?.status,
+        statusText: error.response?.statusText,
+        message: error.message,
+        stack: error.stack
+      })
    }
  }

--- a/src/hooks/useAxios.js
+++ b/src/hooks/useAxios.js
@ -38,13 +38,65 @@ export function useAxios(lang = '') {
  })

  // response 추가 로직
-  axios.interceptors.request.use(undefined, (error) => {})
+  axios.interceptors.response.use(
+    (response) => {
+      // 500 에러 로깅
+      if (response.status === 500) {
+        console.error('🚨 500 Error Response:', {
+          url: response.config.url,
+          method: response.config.method,
+          status: response.status,
+          statusText: response.statusText,
+          timestamp: new Date().toISOString(),
+          requestData: response.config.data,
+          responseData: response.data
+        })
+      }
+      return response
+    },
+    (error) => {
+      // 500 에러 및 기타 에러 로깅
+      if (error.response?.status === 500) {
+        console.error('🚨 500 Error Caught:', {
+          url: error.config?.url,
+          method: error.config?.method,
+          status: error.response?.status,
+          statusText: error.response?.statusText,
+          timestamp: new Date().toISOString(),
+          requestData: error.config?.data,
+          errorMessage: error.message,
+          errorStack: error.stack
+        })
+      } else {
+        console.error('🚨 API Error:', {
+          url: error.config?.url,
+          method: error.config?.method,
+          status: error.response?.status,
+          statusText: error.response?.statusText,
+          timestamp: new Date().toISOString(),
+          errorMessage: error.message
+        })
+      }
+      return Promise.reject(error)
+    }
+  )

  const get = async ({ url, option = {} }) => {
    return await getInstances(url)
      .get(url, option)
      .then((res) => res.data)
-      .catch(console.error)
+      .catch((error) => {
+        console.error('🚨 GET Error:', {
+          url,
+          method: 'GET',
+          timestamp: new Date().toISOString(),
+          errorMessage: error.message,
+          status: error.response?.status,
+          statusText: error.response?.statusText,
+          config: error.config
+        })
+        throw error
+      })
  }

  const promiseGet = async ({ url, option = {} }) => {
@ -55,7 +107,19 @@ export function useAxios(lang = '') {
    return await getInstances(url)
      .post(url, data, option)
      .then((res) => res.data)
-      .catch(console.error)
+      .catch((error) => {
+        console.error('🚨 POST Error:', {
+          url,
+          method: 'POST',
+          timestamp: new Date().toISOString(),
+          errorMessage: error.message,
+          status: error.response?.status,
+          statusText: error.response?.statusText,
+          requestData: data,
+          config: error.config
+        })
+        throw error
+      })
  }

  const promisePost = async ({ url, data, option = {} }) => {
@ -66,7 +130,19 @@ export function useAxios(lang = '') {
    return await getInstances(url)
      .put(url, data, option)
      .then((res) => res.data)
-      .catch(console.error)
+      .catch((error) => {
+        console.error('🚨 PUT Error:', {
+          url,
+          method: 'PUT',
+          timestamp: new Date().toISOString(),
+          errorMessage: error.message,
+          status: error.response?.status,
+          statusText: error.response?.statusText,
+          requestData: data,
+          config: error.config
+        })
+        throw error
+      })
  }

  const promisePut = async ({ url, data, option = {} }) => {
@ -77,7 +153,19 @@ export function useAxios(lang = '') {
    return await getInstances(url)
      .patch(url, data, option)
      .then((res) => res.data)
-      .catch(console.error)
+      .catch((error) => {
+        console.error('🚨 PATCH Error:', {
+          url,
+          method: 'PATCH',
+          timestamp: new Date().toISOString(),
+          errorMessage: error.message,
+          status: error.response?.status,
+          statusText: error.response?.statusText,
+          requestData: data,
+          config: error.config
+        })
+        throw error
+      })
  }

  const promisePatch = async ({ url, data, option = {} }) => {
@ -88,7 +176,18 @@ export function useAxios(lang = '') {
    return await getInstances(url)
      .delete(url, option)
      .then((res) => res.data)
-      .catch(console.error)
+      .catch((error) => {
+        console.error('🚨 DELETE Error:', {
+          url,
+          method: 'DELETE',
+          timestamp: new Date().toISOString(),
+          errorMessage: error.message,
+          status: error.response?.status,
+          statusText: error.response?.statusText,
+          config: error.config
+        })
+        throw error
+      })
  }

  const promiseDel = async ({ url, option = {} }) => {