NextJS Best Practice: “Server Error”과 “Client-side Error” 처리하기
NextJS를 사용할 때는 원활한 사용자 경험을 위해 견고한 오류 처리 전략을 갖추는 것이 중요합니다. NextJS 애플리케이션에서는 “Server Error”와 “Client-side Error” 두 가지 유형의 오류가 발생할 수 있습니다. 이 블로그 포스트에서는 이러한 오류를 효과적으로 처리하기 위한 최상의 방법론에 대해 논의하겠습니다.
Client-side 오류와 Error Boundaries
NextJS에서는 ReactJS와 마찬가지로 Error Boundaries를 사용하여 client-side 오류, 즉 처리되지 않은 런타임 오류를 캡처할 수 있습니다. Error Boundaries를 사용하면 렌더링 중에 발생하는 오류, 라이프사이클 메소드에서 발생하는 오류 또는 모든 하위 컴포넌트의 생성자에서 발생하는 오류를 catch할 수 있습니다.
import ErrorBoundary from 'path/to/ErrorBoundary';
function App() {
return (
<ErrorBoundary>
{/* 여기에 애플리케이션 컴포넌트를 작성하세요 */}
</ErrorBoundary>
);
}
export default App;
ErrorBoundary를 사용하여 애플리케이션 컴포넌트를 래핑함으로써 client-side 오류를 우아하게 처리하고 전체 애플리케이션을 크래시되지 않도록 대체 UI를 표시할 수 있습니다.
Server Error와 초기 반환
NextJS에서 server 오류를 처리하는 권장 방법은 getInitialProps 함수에서 초기 반환을 사용하는 것입니다. 이 함수는 서버 측에서 페이지의 초기 데이터와 props를 가져옵니다.
import Error from 'next/error';
function Page({ stars, statusCode }) {
if (statusCode !== 200) {
return <Error statusCode={statusCode} />;
}
return
<div>Next stars: {stars}</div>
;
}
Page.getInitialProps = async (ctx) => {
try {
const res = await fetch('https://api.github.com/repos/vercel/next.js');
const json = await res.json();
if (res.status >= 400) {
return { stars: json.stargazers_count, statusCode: res.status };
}
return { stars: json.stargazers_count, statusCode: 200 };
} catch (error) {
return { stars: null, statusCode: 503 };
}
};
export default Page;
위의 코드 스니펫에서는 statusCode prop을 사용하여 server 오류 여부를 확인합니다. 상태 코드가 오류를 나타내면 해당 상태 코드로 Error 컴포넌트를 렌더링합니다. 이 접근 방식을 사용하면 server 오류를 우아하게 처리하고 사용자에게 적절한 오류 메시지나 UI를 표시할 수 있습니다.
결론
적절한 오류 처리는 어떤 제품 수준의 NextJS 애플리케이션에서도 중요합니다. 이 블로그 포스트에서 언급된 최상의 방법을 따라 client-side와 server 오류를 효과적으로 처리하여 원활하고 무결한 사용자 경험을 제공할 수 있습니다.
client-side 오류를 캡처하기 위해 Error Boundaries를 사용하고, server 오류를 처리할 때는 적절한 상태 코드로 초기 반환을 구현하는 것을 기억하세요. 이러한 방법론을 NextJS 프로젝트에 적용하여 문제가 발생했을 때 오류를 처리하고 사용자에게 의미 있는 피드백을 제공할 수 있습니다.
