5. Error Handling
서버 액션에 try/catch 추가
Nested Routes
error.tsx로 모든 오류 처리
notFound 함수로 404 오류 처리
마지막 업데이트
이 문서는 Error handling에 대해 설명합니다. 특히 JavaScript 서버 액션에서의 오류 처리와 중첩된 경로에서의 404 오류 처리에 대해 중점적으로 다룹니다.
먼저 오류를 적절하게 처리할 수 있도록 JavaScript의 try/catch 문을 서버 액션에 추가합니다.
서버 액션을 업데이트하는 데 몇 분 정도 시간을 투자하거나 아래 코드를 복사할 수 있습니다.
서버 액션에서 오류를 강제로 발생시키면 다음과 같이 동작합니다:
이제 서버 액션에서 오류를 발생시키면 로컬호스트에서 오류가 표시됩니다. 개발 중에는 이러한 오류를 확인해 잠재적 문제를 조기에 발견할 수 있으며, 사용자에게 적절한 오류 메시지를 제공해 애플리케이션이 계속 실행되도록 도울 수 있습니다.
서버 액션에서 오류를 반환할 때는 사용자에게 노출되는 메시지에 민감 정보가 포함되지 않도록 주의하세요. 또한 로깅/오류 리포팅 도구에 에러를 전송해 추적할 수 있도록 하면 운영 환경에서 유용합니다.
에러는 가장 가까운 부모 에러 바운더리로 전파됩니다. 그러므로 error.tsx 파일이 있는 상위 세그먼트가 중첩된 하위 세그먼트의 에러를 처리할 수 있습니다. 단, 에러 바운더리는 동일 세그먼트 내의 layout.js에서 발생한 에러를 처리하지 않습니다(에러 바운더리가 해당 레이아웃 컴포넌트 내에 중첩되어 있기 때문).
error.tsx 파일은 경로 세그먼트에 대한 UI 경계를 정의하는 데 사용됩니다. 예상치 못한 오류에 대한 포괄적인 역할을 하며 사용자에게 대체 UI를 표시할 수 있습니다.
예: 위와 같은 error.tsx 파일을 만들고 에러를 발생시키면 사용자에게 대체 UI가 표시됩니다.
존재하지 않는 리소스를 가져오려고 할 때는 notFound 함수를 사용하는 것이 유용합니다. error.tsx는 모든 오류를 잡는 데 유용하지만, 리소스 부재(404)를 더 구체적으로 처리하려면 notFound를 사용하세요.
위 예제는 invoice 값이 없으면 notFound 페이지로 이동합니다.
아래는 해당 경로에 대한 not-found 컴포넌트 예시입니다.
notFound로 404 처리를 하면 다음과 같은 UI가 표시됩니다.
notFound는 error.tsx보다 우선하므로, 더 구체적인 404 처리가 필요할 때 활용하세요.
전체적으로 경로가 없을 시 not found 처리를 하고 싶다면 [...not_found]와 같은 catch-all 세그먼트에 notFound 호출을 적용하여, 요청한 페이지가 없으면 notFound 처리하도록 구현할 수 있습니다.
마지막 업데이트