エラー処理

エラーは「予期されるエラー」と「未捕捉例外」の2つのカテゴリに分けることができます：

予期されるエラーは戻り値としてモデル化する：Server Actionsで予期されるエラーに対してtry/catchの使用を避けてください。これらのエラーを管理しクライアントに返すにはuseActionStateを使用します。
予期しないエラーにはエラーバウンダリを使用する：error.tsxとglobal-error.tsxファイルを使用してエラーバウンダリを実装し、予期しないエラーを処理してフォールバックUIを提供します。

予期されるエラーの処理

予期されるエラーとは、サーバーサイドのフォームバリデーションや失敗したリクエストなど、アプリケーションの通常の操作中に発生する可能性があるエラーです。これらのエラーは明示的に処理し、クライアントに返す必要があります。

Server Actionsからの予期されるエラーの処理

Server Actionsの状態を管理するにはuseActionStateフックを使用します。これにはエラー処理も含まれます。このアプローチでは、予期されるエラーに対してtry/catchブロックを使用せず、例外としてスローするのではなく戻り値としてモデル化します。

app/actions.ts

TypeScript

'use server'
 
import { redirect } from 'next/navigation'
 
export async function createUser(prevState: any, formData: FormData) {
  const res = await fetch('https://...')
  const json = await res.json()
 
  if (!res.ok) {
    return { message: 'Please enter a valid email' }
  }
 
  redirect('/dashboard')
}

そして、アクションをuseActionStateフックに渡し、返されたstateを使用してエラーメッセージを表示できます。

app/ui/signup.tsx

TypeScript

'use client'
 
import { useActionState } from 'react'
import { createUser } from '@/app/actions'
 
const initialState = {
  message: '',
}
 
export function Signup() {
  const [state, formAction, pending] = useActionState(createUser, initialState)
 
  return (
    <form action={formAction}>
      <label htmlFor="email">Email</label>
      <input type="text" id="email" name="email" required />
      {/* ... */}
      <p aria-live="polite">{state?.message}</p>
      <button disabled={pending}>Sign up</button>
    </form>
  )
}

返された状態を使用して、クライアントコンポーネントからトーストメッセージを表示することもできます。

Server Componentsからの予期されるエラーの処理

Server Componentでデータをフェッチする場合、レスポンスを使用して条件付きでエラーメッセージをレンダリングしたり、redirectを実行したりできます。

app/page.tsx

TypeScript

export default async function Page() {
  const res = await fetch(`https://...`)
  const data = await res.json()
 
  if (!res.ok) {
    return 'There was an error.'
  }
 
  return '...'
}

未捕捉例外

未捕捉例外は、アプリケーションの通常のフローでは発生しないはずのバグや問題を示す予期しないエラーです。これらはエラーをスローすることで処理され、エラーバウンダリによってキャッチされます。

一般的：ルートレイアウトの下の未捕捉エラーをerror.jsで処理します。
オプション：ネストされたerror.jsファイル（例：app/dashboard/error.js）で細分化された未捕捉エラーを処理します。
まれ：ルートレイアウトの未捕捉エラーをglobal-error.jsで処理します。

エラーバウンダリの使用

Next.jsは未捕捉例外を処理するためにエラーバウンダリを使用します。エラーバウンダリは子コンポーネントのエラーをキャッチし、クラッシュしたコンポーネントツリーの代わりにフォールバックUIを表示します。

ルートセグメント内にerror.tsxファイルを作成し、Reactコンポーネントをエクスポートしてエラーバウンダリを作成します：

app/dashboard/error.tsx

TypeScript

'use client' // エラーバウンダリはクライアントコンポーネントである必要があります
 
import { useEffect } from 'react'
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // エラーをエラーレポートサービスにログ記録
    console.error(error)
  }, [error])
 
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button
        onClick={
          // セグメントの再レンダリングを試みて回復を試みる
          () => reset()
        }
      >
        Try again
      </button>
    </div>
  )
}

errorコンポーネントをレンダリングするときにthrowすることで、エラーを親のエラーバウンダリにバブルアップさせることができます。

ネストされたルートでのエラー処理

エラーは最も近い親のエラーバウンダリにバブルアップします。これにより、ルート階層の異なるレベルにerror.tsxファイルを配置することで、きめ細かいエラー処理が可能になります。

グローバルエラーの処理

あまり一般的ではありませんが、ルートappディレクトリにあるapp/global-error.jsを使用して、国際化を活用する場合でも、ルートレイアウトのエラーを処理できます。グローバルエラーUIはアクティブな場合、ルートレイアウトまたはテンプレートを置き換えるため、独自の<html>タグと<body>タグを定義する必要があります。

app/global-error.tsx

TypeScript

'use client' // エラーバウンダリはクライアントコンポーネントである必要があります
 
export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    // global-errorはhtmlとbodyタグを含める必要があります
    <html>
      <body>
        <h2>Something went wrong!</h2>
        <button onClick={() => reset()}>Try again</button>
      </body>
    </html>
  )
}

エラー処理

予期されるエラーの処理

Server Actionsからの予期されるエラーの処理

Server Componentsからの予期されるエラーの処理

未捕捉例外

エラーバウンダリの使用

ネストされたルートでのエラー処理

グローバルエラーの処理

下一步

error.js