Chapter13 Handling Errors

[ShotaroHirose59]

In the previous chapter, you learned how to mutate data using Server Actions. Let's see how you can handle errors gracefully using JavaScript's try/catch statements and Next.js APIs. https://nextjs.org/learn/dashboard-app/error-handling

Topic

• How to use the special error.tsx file to catch errors in your route segments, and show a fallback UI to the user.
• How to use the notFound function and not-found file to handle 404 errors (for resources that don’t exist).

[ShotaroHirose59]

error.tsx

error.tsx ファイルを使用して、ルート セグメントの UI 境界を定義できます。 これは、予期しないエラーに対するキャッチオールとして機能し、ユーザーにフォールバック UI を表示できるようにします。

• クライアントコンポーネントにする必要がある
• 2つのpropsを受け取れる
  • error: JavaScript のネイティブ Error オブジェクトのインスタンス
  • recet: エラー境界をリセットする機能。 実行されると、関数はルート セグメントの再レンダリングを試みる

[ShotaroHirose59]

Handling 404 errors with the notFound function

notFound は存在しないリソースを取得しようとするときに使用できる。 404 エラーを表示して、アクセスしようとしているリソースが見つからなかったことをユーザーに伝えることができる。

notFound()関数でnot-found.tsxをレンダリングできる (サーバーコンポーネントでok)

notFoundはerror.tsxよりも優先される

[ShotaroHirose59]

Further reading あとでちゃんと見る