> 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가 표시됩니다.

<figure><img src="https://200425-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVEZx3rsZsIv89GPS3d2J%2Fuploads%2FNPoaUGI7La2I6iLGGwHc%2Fimg%20(3).png?alt=media&amp;token=bfbdd54b-2922-4617-a016-1d3f645f87e2" alt=""><figcaption></figcaption></figure>

### notFound 함수로 404 오류 처리

존재하지 않는 리소스를 가져오려고 할 때는 notFound 함수를 사용하는 것이 유용합니다. error.tsx는 모든 오류를 잡는 데 유용하지만, 리소스 부재(404)를 더 구체적으로 처리하려면 notFound를 사용하세요.

{% code title="/dashboard/invoices/\[id]/edit/page.tsx" %}

```
```

{% endcode %}

위 예제는 invoice 값이 없으면 notFound 페이지로 이동합니다.

<figure><img src="https://200425-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVEZx3rsZsIv89GPS3d2J%2Fuploads%2F2l1V56QfT1CuZDrnOHPI%2Fimg%20(4).png?alt=media&amp;token=b81f739c-6fa0-4fc8-bd79-f16969413c17" alt=""><figcaption></figcaption></figure>

아래는 해당 경로에 대한 not-found 컴포넌트 예시입니다.

{% code title="/dashboard/invoices/\[id]/edit/not-found.tsx" %}

```
```

{% endcode %}

notFound로 404 처리를 하면 다음과 같은 UI가 표시됩니다.

<figure><img src="https://200425-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVEZx3rsZsIv89GPS3d2J%2Fuploads%2FC8AV8GLUyiw9oMnuZYx6%2Fimg%20(5).png?alt=media&amp;token=fa5a78d9-99f1-42ff-a1e1-4ddf3c132c45" alt=""><figcaption></figcaption></figure>

notFound는 error.tsx보다 우선하므로, 더 구체적인 404 처리가 필요할 때 활용하세요.

<div align="left"><figure><img src="https://200425-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVEZx3rsZsIv89GPS3d2J%2Fuploads%2F4yTIYAfi1Qp6x3GBTLOJ%2Fimg%20(6).png?alt=media&amp;token=f3138f30-8098-43df-abb4-13ebb9e4ba3b" alt=""><figcaption></figcaption></figure></div>

전체적으로 경로가 없을 시 not found 처리를 하고 싶다면 \[...not\_found]와 같은 catch-all 세그먼트에 notFound 호출을 적용하여, 요청한 페이지가 없으면 notFound 처리하도록 구현할 수 있습니다.