︙

Error Handling

このドキュメンテーションでは、あなたがどのように development、server-side、そして client-side の error を処理できるかについて説明しています。

Handling Errors in Development

あなたの Next.js アプリケーションの development フェーズ中に runtime error が発生した場合、オーバーレイが表示されます。これはウェブページ全体を覆うモーダルです。development server が next dev 、 pnpm dev 、 npm run dev 、 yarn dev 、または bun dev を使用して実行されているときにのみ表示され、production では表示されません。error を修正すると、オーバーレイは自動的に解除されます。

ここにオーバーレイの例を示します：

Handling Server Errors

Next.js は、アプリケーションで発生する server-side の error を処理するために、default で静的な 500 ページを提供します。また、pages/500.js ファイルを作成することで、このページをカスタマイズすることもできます。

あなたのアプリケーションに 500 ページがあっても、それは app ユーザーに特定の error を表示しません。

file not foundのような特定の runtime error を処理するためにも、404 ページを使用することができます。

Handling Client Errors

React のerror Boundaries は、client 上の JavaScript エラーを上手く扱い、アプリケーションの他の部分が正常に動作し続ける為の方法です。ページのクラッシュを防止するだけでなく、カスタム fallback component の提供や error 情報のログ記録も可能にします。

あなたの Next.js アプリケーションで Error バウンダリーを使用するには、ErrorBoundaryというクラス component を作成し、pages/_app.jsファイル内のComponentプロップをラップする必要があります。この component は次の責任を持ちます：

error がスローされた後に fallback UI を Render する
アプリケーションの状態をリセットする方法を提供してください
ログ error 情報

あなたは React.Componentを拡張することで、ErrorBoundaryクラスの component を作成することができます。例えば：

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

    // Define a state variable to track whether is an error or not
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI

    return { hasError: true };
  }
  componentDidCatch(error, errorInfo) {
    // You can use your own error logging service here
    console.log({ error, errorInfo });
  }
  render() {
    // Check if the error is thrown
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <div>
          <h2>Oops, there is an error!</h2>
          <button
            type="button"
            onClick={() => this.setState({ hasError: false })}
          >
            Try again?
          </button>
        </div>
      );
    }

    // Return children components in case of no error

    return this.props.children;
  }
}

export default ErrorBoundary;

ErrorBoundarycomponent は、hasErrorの状態を追跡します。この状態の variable の value は真偽値です。hasErrorの value がtrueの場合、ErrorBoundarycomponent は fallbackUI を rendering します。それ以外の場合、それは子供たちのコンポーネントを rendering します。

ErrorBoundary component を作成した後、それをpages/_app.jsファイルに import し、 Next.js アプリケーションのComponentプロパティをラップします。

// Import the ErrorBoundary component
import ErrorBoundary from "../components/ErrorBoundary";

function MyApp({ Component, pageProps }) {
  return (
    // Wrap the Component prop with ErrorBoundary component
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  );
}

export default MyApp;

ErrorBoundaries については、React のドキュメンテーションで詳しく学ぶことができます。

error の報告

client の error を監視するには、Sentry 、Bugsnag、または Datadog のようなサービスを使用してください。