エラーハンドリング

ErrorBoundary コンポーネントを使用すると、サーバコンポーネントの内部でアプリケーションのエラーをキャッチすることができます。エラー処理中にレンダリングされるフォールバックコンポーネントと、エラー発生時にレンダリングされるクライアントコンポーネントを定義できます。

これはアプリの異なる部分のエラー処理を細かく調整したい場合に便利です。アプリ内で ErrorBoundary コンポーネントをいくつでも使用することができ、それぞれの ErrorBoundary は独自のフォールバックコンポーネントを持つことができます。

App.jsx
import { ErrorBoundary } from "@lazarv/react-server/error-boundary";

export default function MyComponent() {
  return (
    <ErrorBoundary fallback={"Loading..."} component={ErrorMessage}>
      <MaybeAnError />
    </ErrorBoundary>
  );
}

fallback プロパティは、エラーが処理されている間に表示される React ノードです。component プロパティは、エラーが発生した時に表示される React コンポーネントです。fallback プロパティは内部的に Suspense コンポーネントと連携しているため、fallback プロパティには、あなたが普段 Suspense コンポーネントで使用しているのと同じタイプのローディング表示を設定するとよいでしょう。

ErrorMessage.jsx
"use client";

export default function ErrorMessage({ error }) {
  return (
    <>
      <h1>Error</h1>
      <p>{error.message}</p>
      <pre>{error.stack}</pre>
    </>
  );
}

エラーを検知して処理するためのコンポーネント（Error Boundary）の component プロパティに指定したエラー表示用コンポーネントは、エラーが発生した場合、問題のある部分の代わりに表示されます。このエラー表示用コンポーネントでは、エラーの詳細情報や「問題が発生しました」などのメッセージを自由に表示できます。

クライアントでエラーが発生した場合は、エラークライアントコンポーネントから resetErrorBoundary() 関数を呼び出してエラーをリセットすることができます。

ErrorMessage.jsx
"use client";

export default function ErrorMessage({ error, resetErrorBoundary }) {
  return (
    <>
      <h1>Error</h1>
      <p>{error.message}</p>
      <pre>{error.stack}</pre>
      <button onClick={resetErrorBoundary}>Retry</button>
    </>
  );
}

サーバでエラーが発生した場合、クライアントでエラーが発生したわけではないので、エラーをリセットすることはできません。しかし、Refreshコンポーネントを使用することで、ページを再読み込みすることができます。詳しくはルーターセクションのクライアントサイドナビゲーションページを参照してください。

ErrorMessage.jsx
"use client";

import { Refresh } from "@lazarv/react-server/navigation";

export default function ErrorMessage({ error }) {
  return (
    <>
      <h1>Error</h1>
      <p>{error.message}</p>
      <pre>{error.stack}</pre>
      <Refresh>Retry</Refresh>
    </>
  );
}

ファイルシステムベースのルーティングを使用する際のエラー処理方法については、ルーターセクションのエラーハンドリングページで詳しく説明されています。