diff --git a/client/src/hooks/useError/ErrorProvider.tsx b/client/src/hooks/useError/ErrorProvider.tsx new file mode 100644 index 000000000..e1466cf4c --- /dev/null +++ b/client/src/hooks/useError/ErrorProvider.tsx @@ -0,0 +1,69 @@ +import {createContext, useState, useEffect, ReactNode} from 'react'; + +import {SERVER_ERROR_MESSAGES} from '@constants/errorMessage'; + +// 에러 컨텍스트 생성 +export interface ErrorContextType { + clientErrorMessage: string; + setErrorInfo: (error: ErrorInfo) => void; + clearError: (ms?: number) => void; + errorInfo: ErrorInfo | null; +} + +export const ErrorContext = createContext(undefined); + +// 에러 컨텍스트를 제공하는 프로바이더 컴포넌트 +interface ErrorProviderProps { + children: ReactNode; + callback?: (message: string) => void; +} + +export type ErrorInfo = { + errorCode: string; + message: string; +}; + +export const ErrorProvider = ({children, callback}: ErrorProviderProps) => { + const [clientErrorMessage, setClientErrorMessage] = useState(''); + const [errorInfo, setErrorState] = useState(null); + + useEffect(() => { + if (errorInfo) { + if (isUnhandledError(errorInfo.errorCode)) { + // 에러바운더리로 보내기 + + throw errorInfo; + } + + const message = SERVER_ERROR_MESSAGES[errorInfo.errorCode]; + setClientErrorMessage(message); + // callback(message); + } + }, [errorInfo, callback]); + + const setErrorInfo = (error: ErrorInfo) => { + setClientErrorMessage(''); + setErrorState(error); + }; + + const clearError = (ms: number = 0) => { + if (errorInfo === null) return; + + setTimeout(() => { + setClientErrorMessage(''); + setErrorState(null); + }, ms); + }; + + return ( + + {children} + + ); +}; + +const isUnhandledError = (errorCode: string) => { + if (errorCode === 'INTERNAL_SERVER_ERROR') return true; + + return SERVER_ERROR_MESSAGES[errorCode] === undefined; +};