Home

エラーページの作成

error.tsxの作成

frontend/src/app/error.tsx

'use client';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </>
  );
}

ブラウザで下記URLにアクセスすると、「Something went wrong!」と表示されます。

• http://localhost:3000/movies/-1

エラーページの確認

確認のため、意図的にエラーを発生させるときは、src/utils/index.tsの下記の箇所をコメントアウトして実行してください。確認後は元に戻してください。 frontend/src/utils/index.ts

export const fetcher = async (resource: RequestInfo, init?: RequestInit): Promise<any> => {
  const res = await fetch(resource, init);

  // if (!res.ok) {
  const errorRes = await res.json();
  const error = new Error(errorRes.message ?? 'APIリクエスト中にエラーが発生しました');

  throw error;
  // }

  return res.json();
};

参考

1. Routing: Error Handling | Next.js