> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/02./5.-error-handling.md).
# 5. Error Handling
이 문서는 Error handling에 대해 설명합니다. 특히 JavaScript 서버 액션에서의 오류 처리와 중첩된 경로에서의 404 오류 처리에 대해 중점적으로 다룹니다.
***
## 서버 액션에 try/catch 추가
먼저 오류를 적절하게 처리할 수 있도록 JavaScript의 try/catch 문을 서버 액션에 추가합니다.
서버 액션을 업데이트하는 데 몇 분 정도 시간을 투자하거나 아래 코드를 복사할 수 있습니다.
{% stepper %}
{% step %}
### Create Invoice (createInvoice)
{% code title="/app/lib/actions.ts — createInvoice" %}
```
```
{% endcode %}
{% endstep %}
{% step %}
### Update Invoice (updateInvoice)
{% code title="/app/lib/actions.ts — updateInvoice" %}
```
```
{% endcode %}
{% endstep %}
{% step %}
### Delete Invoice (deleteInvoice)
{% code title="/app/lib/actions.ts — deleteInvoice" %}
```
```
{% endcode %}
{% endstep %}
{% endstepper %}
서버 액션에서 오류를 강제로 발생시키면 다음과 같이 동작합니다:
{% code title="/app/lib/actions.ts — deleteInvoice (throwing error example)" %}
```
```
{% endcode %}
이제 서버 액션에서 오류를 발생시키면 로컬호스트에서 오류가 표시됩니다. 개발 중에는 이러한 오류를 확인해 잠재적 문제를 조기에 발견할 수 있으며, 사용자에게 적절한 오류 메시지를 제공해 애플리케이션이 계속 실행되도록 도울 수 있습니다.
{% hint style="info" %}
서버 액션에서 오류를 반환할 때는 사용자에게 노출되는 메시지에 민감 정보가 포함되지 않도록 주의하세요. 또한 로깅/오류 리포팅 도구에 에러를 전송해 추적할 수 있도록 하면 운영 환경에서 유용합니다.
{% endhint %}
## Nested Routes
에러는 가장 가까운 부모 에러 바운더리로 전파됩니다. 그러므로 error.tsx 파일이 있는 상위 세그먼트가 중첩된 하위 세그먼트의 에러를 처리할 수 있습니다. 단, 에러 바운더리는 동일 세그먼트 내의 layout.js에서 발생한 에러를 처리하지 않습니다(에러 바운더리가 해당 레이아웃 컴포넌트 내에 중첩되어 있기 때문).
### error.tsx로 모든 오류 처리
error.tsx 파일은 경로 세그먼트에 대한 UI 경계를 정의하는 데 사용됩니다. 예상치 못한 오류에 대한 포괄적인 역할을 하며 사용자에게 대체 UI를 표시할 수 있습니다.
{% code title="error.tsx" %}
```
```
{% endcode %}
예: 위와 같은 error.tsx 파일을 만들고 에러를 발생시키면 사용자에게 대체 UI가 표시됩니다.
### notFound 함수로 404 오류 처리
존재하지 않는 리소스를 가져오려고 할 때는 notFound 함수를 사용하는 것이 유용합니다. error.tsx는 모든 오류를 잡는 데 유용하지만, 리소스 부재(404)를 더 구체적으로 처리하려면 notFound를 사용하세요.
{% code title="/dashboard/invoices/\[id]/edit/page.tsx" %}
```
```
{% endcode %}
위 예제는 invoice 값이 없으면 notFound 페이지로 이동합니다.
아래는 해당 경로에 대한 not-found 컴포넌트 예시입니다.
{% code title="/dashboard/invoices/\[id]/edit/not-found.tsx" %}
```
```
{% endcode %}
notFound로 404 처리를 하면 다음과 같은 UI가 표시됩니다.
notFound는 error.tsx보다 우선하므로, 더 구체적인 404 처리가 필요할 때 활용하세요.
전체적으로 경로가 없을 시 not found 처리를 하고 싶다면 \[...not\_found]와 같은 catch-all 세그먼트에 notFound 호출을 적용하여, 요청한 페이지가 없으면 notFound 처리하도록 구현할 수 있습니다.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/02./5.-error-handling.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.