NextBlog의 Error Handling

이번 포스트에서는 NextBlog에서 Error Handling 하는 방식에 대해 작성합니다.

특히 Custom ErrorBoundary를 만들어 Handling하는 방법에 대해 다룹니다.

NextBlog는 기본적으로는 Next.js의 Error Handling을 주로 사용하려고 하고 있습니다.

그래서 서버 사이드의 Page의 경우 내부에서 Error를 catch하지 않고 위로 건내 error.tsx나 not-found.tsx에서 핸들링 하고 있습니다.

하지만 작성하기 페이지에서는 두가지 파트가 있습니다.

이때 예측할 수 있는 에러가 발생할 수 있는 곳은 세곳입니다.

노션 링크 업로드

유효한 노션 URL인지 판단

이는 미리 처리 가능

노션 ID upload

post upload API 에러

노션 페이지 미리보기

노션 ID에 해당하는 컨텐츠 불러오기 API

이 에러들을 기존 방식처럼 Next.js의 ErrorBoundary로 throw하게 되면 불필요하게 다음과 같이 페이지가 에러 페이지로 바뀌게 됩니다.

ErrorBoundary 도입하기

이를 방지하기 위해 Next.js의 error boundary가 아닌, Custom으로 ErrorBoundary를 만들어 노션 페이지 미리보기에 감싸 에러가 발생할 경우 다시 시도 UI를 해당 부분에만 보여주기로 합니다.

현재 네모로 칠해진 부분은 다음과 같이 이루어져 있습니다.


<NotionRecordMapFetcher pageId={pageId as string}>
    <PreRender/>
</NotionRecordMapFetcher>

이때 Fetcher는 API호출 상태에 대한 책임을 가지고 있습니다. 또한 API 호출에 대해 선언형으로 접근할 수 있습니다.

API 호출 시 상태인 로딩, 에러, 데이터 저장의 역할을 하고 있습니다.


function NotionRecordMapFetcher({children, pageId}:{
    children:React.ReactNode,
    pageId:string
}) {

    const {setError} = useError();
    const {setMessageState} = useFeedback();
    const {setRecordMap,setIsLoading} = useNotionPage();
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down('lg'));
    const {data, isLoading, error} = useRecordMapFetch(pageId as string);


    //데이터 저장
    useEffect(()=>{
        if(data) {
            setRecordMap(data);
            if(isMobile) setMessageState(FEEDBACK_MESSAGES.POST.LOAD_SUCCESS, 'success', 'snackbar');
        }

        return () => {
            setRecordMap(null);
        }
    },[data,setRecordMap])

    //로딩 상태 관리
    useEffect(()=>{
        setIsLoading(isLoading);
    },[isLoading,setIsLoading])
    
    //로딩중일 땐 LoadingPage 렌더링
    if(isLoading){
        return <LoadingPage/>;
    }

    if(error){
        setIsLoading(false);
        setError(error);
        throw error;
    }

    return children;
}

제한된 영역에서 에러 제어하기

이때 에러 발생 시, 에러를 위로 throw하여 ErrorBoundary가 받아 해당 부분에 대해서만 다시 시도 UI를 보여주고자 합니다.


class FallbackErrorBoundary extends React.Component<
    IErrorProps,
    IErrorState
> {
	constructor(props:IErrorProps) {
		super(props);
		this.state = { hasError: false, shouldHandleError:false, errorStatus: 0 }; 
	}

	static getDerivedStateFromError(error: unknown) {
        if(error instanceof AxiosError){
            return {    
                hasError: true,
                shouldHandleError:true,
                errorStatus: error.response?.status || 500
            };
        }
        return {hasError: true, shouldHandleError:true, errorStatus: 500};
    }

이렇게 FallbackErrorBoundary를 선언해주고 3가지 상태를 선언해줍니다.

이 상태들을 가지고 refetch, status code로 렌더링 할 페이지 분기처리를 진행합니다.


switch (this.state.errorStatus) {
    case 404:
        return (
            <>
                <RefetchPage 
                    message="유효하지 않은 Notion URL입니다."
                    refetch={()=>this.setState({shouldHandleError:false})}
                />
            </>
        );
    case 400:
        return (
            <>
                <RefetchPage 
                    message="유효하지 않은 Notion URL입니다."
                    refetch={()=>this.setState({shouldHandleError:false})}
                />
            </>
        );
    case 409:
        return (
            <> 
                <RefetchPage 
                    message="이미 존재하는 포스트입니다."
                    refetch={()=>this.setState({shouldHandleError:false})}
                />
            </>
        );

다시 시도하기

ErrorBoundary내에서 다음과 같이 refetch를 진행합니다.


render() {

	//fetcher를 다시 mount하여 refetch
	//shouldHandleError가 false로 변하거나, key가 변경되면 refetch
	if(!this.state.shouldHandleError || this.props.key) return this.props.children;
	
	if (this.state.hasError) {
	    //에러 처리 분기
	    //다시 시도를 넣어 state를 변경
	    switch (this.state.errorStatus) {
	        case 404:
	            return (
	                <>
	                    <RefetchPage 
	                        message="유효하지 않은 Notion URL입니다."
	                        refetch={()=>this.setState({shouldHandleError:false})}
	                    />
	                </>
	            );
{/* ...ETC */}

이때. ErrorBoundary에서 refetch시, ErrorBoundary의 shouldHnadleError state를 false로 바꿔 children을 render합니다.

이때 Fetcher를 re-mount 하면서 API를 재호출 하게 됩니다.

즉 전체적인 코드를 간소화하면 다음과 같습니다.


<GlobalErrorBoundary>
	<NotionUrlSection />
	
	<PostActionBar/>
 
  <FallbackErrorBoundary key={`${pageId}-${timestamp}` || undefined}>
    <NotionRecordMapFetcher pageId={pageId as string}>
        <PreRender/>
    </NotionRecordMapFetcher>
  </FallbackErrorBoundary>
</GlobalErrorBoundary>

이렇게 작성하면 만약 노션 페이지 미리보기. 즉 Fetcher에서 에러가 발생하면 FallbackErrorBoundary에서 catch하여 다시 시도 UI를 보여줍니다.