React Router v7 ドキュメント 日本語版

English

エラー報告



React Router は、ルートモジュールで発生したエラーをキャッチし、エラーが発生した際に空白ページが表示されるのを防ぐために、エラー境界に送信します。ただし、ErrorBoundary はエラーのログ記録や報告には十分ではありません。

サーバーエラー

サーバー上でキャッチされたこれらのエラーにアクセスするには、サーバーエントリモジュールの handleError エクスポートを使用します。

1. サーバーエントリを明らかにする

アプリディレクトリに entry.server.tsx が見当たらない場合は、デフォルトのエントリを使用しています。次の CLI コマンドでそれを明らかにします。

react-router reveal entry.server

2. エラーハンドラーをエクスポートする

この関数は、React Router がサーバー上のアプリケーションでエラーをキャッチするたびに呼び出されます。

entry.server.tsx
import { type HandleErrorFunction } from "react-router";
 
export const handleError: HandleErrorFunction = (
  error,
  { request },
) => {
  // React Router は中断されたリクエストを中止する可能性があるため、それらはログに記録しない
  if (!request.signal.aborted) {
    myReportError(error);
 
    // エラーを確認できるように、必ずエラーをログに記録する
    console.error(error);
  }
};

こちらも参照してください:

クライアントエラー

クライアントでキャッチされたこれらのエラーにアクセスするには、HydratedRouter または RouterProvider コンポーネントの onError prop を使用します。

フレームワークモード

1. クライアントエントリを明らかにする

アプリディレクトリに entry.client.tsx が見当たらない場合は、デフォルトのエントリを使用しています。次の CLI コマンドでそれを明らかにします。

react-router reveal entry.client

2. エラーハンドラーを追加する

この関数は、React Router がクライアント上のアプリケーションでエラーをキャッチするたびに呼び出されます。

entry.client.tsx
import { type ClientOnErrorFunction } from "react-router";
 
const onError: ClientOnErrorFunction = (
  error,
  { location, params, unstable_pattern, errorInfo },
) => {
  myReportError(error, location, errorInfo);
 
  // エラーを確認できるように、必ずエラーをログに記録する
  console.error(error, errorInfo);
};
 
startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <HydratedRouter onError={onError} />
    </StrictMode>,
  );
});

こちらも参照してください:

データモード

この関数は、React Router がクライアント上のアプリケーションでエラーをキャッチするたびに呼び出されます。

import { type ClientOnErrorFunction } from "react-router";
 
const onError: ClientOnErrorFunction = (
  error,
  { location, params, unstable_pattern, errorInfo },
) => {
  myReportError(error, location, errorInfo);
 
  // エラーを確認できるように、必ずエラーをログに記録する
  console.error(error, errorInfo);
};
 
function App() {
  return <RouterProvider onError={onError} />;
}

こちらも参照してください: