エラーハンドリング

このドキュメントでは、開発時、サーバーサイド、およびクライアントサイドのエラーを処理する方法について説明します。

開発時のエラーハンドリング

Next.jsアプリケーションの開発フェーズでランタイムエラーが発生すると、オーバーレイが表示されます。これはウェブページを覆うモーダルで、next dev を使用した開発サーバー（pnpm dev、npm run dev、yarn dev、または bun dev 経由）でのみ表示され、本番環境では表示されません。エラーを修正すると自動的にオーバーレイは消えます。

以下はオーバーレイの例です：

開発モード時のオーバーレイ例

サーバーエラーの処理

Next.jsはデフォルトで静的500ページを提供し、アプリケーションで発生するサーバーサイドエラーを処理します。また、pages/500.js ファイルを作成することでこのページをカスタマイズできます。

500ページがある場合でも、アプリユーザーには具体的なエラー内容は表示されません。

file not found などの特定のランタイムエラーを処理するには、404ページも使用できます。

クライアントエラーの処理

Reactのエラー境界 (Error Boundaries)を使用すると、クライアント側でJavaScriptエラーを適切に処理でき、アプリケーションの他の部分は引き続き動作します。ページのクラッシュを防ぐだけでなく、カスタムフォールバックコンポーネントを表示したり、エラー情報を記録したりできます。

Next.jsアプリケーションでエラー境界を使用するには、クラスコンポーネント ErrorBoundary を作成し、pages/_app.js ファイルの Component プロップをラップする必要があります。このコンポーネントは以下の役割を担います：

エラー発生時にフォールバックUIを表示
アプリケーションの状態をリセットする方法を提供
エラー情報を記録

React.Component を拡張して ErrorBoundary クラスコンポーネントを作成できます。例：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)

    // エラーの有無を追跡する状態変数を定義
    this.state = { hasError: false }
  }
  static getDerivedStateFromError(error) {
    // 次のレンダリングでフォールバックUIが表示されるよう状態を更新
    
    return { hasError: true }
  }
  componentDidCatch(error, errorInfo) {
    // 独自のエラーロギングサービスを使用可能
    console.log({ error, errorInfo })
  }
  render() {
    // エラーが発生したか確認
    if (this.state.hasError) {
      // 任意のカスタムフォールバックUIをレンダリング可能
      return (
        <div>
          <h2>エラーが発生しました！</h2>
          <button
            type="button"
            onClick={() => this.setState({ hasError: false })}
          >
            再試行
          </button>
        </div>
      )
    }

    // エラーがない場合は子コンポーネントを返す

    return this.props.children
  }
}

export default ErrorBoundary

ErrorBoundary コンポーネントは hasError 状態を追跡します。この状態変数の値は真偽値で、true の場合、ErrorBoundary コンポーネントはフォールバックUIをレンダリングします。それ以外の場合は子コンポーネントをレンダリングします。

ErrorBoundary コンポーネントを作成したら、pages/_app.js ファイルでインポートし、Next.jsアプリケーションの Component プロップをラップします。

// ErrorBoundaryコンポーネントをインポート
import ErrorBoundary from '../components/ErrorBoundary'

function MyApp({ Component, pageProps }) {
  return (
    // ComponentプロップをErrorBoundaryコンポーネントでラップ
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

export default MyApp

Reactのドキュメントでエラー境界 (Error Boundaries)についてさらに学べます。

エラーの報告

クライアントエラーを監視するには、Sentry、Bugsnag、Datadogなどのサービスを使用します。

開発時のエラーハンドリング

サーバーエラーの処理

クライアントエラーの処理

エラーの報告

On this page