# 画面設計書 37-エラーページ

## 概要

本ドキュメントはInvenTreeシステムにおけるエラーページ（ErrorPage）の設計仕様を記載したものである。本画面はシステムで予期しないエラーが発生した場合に表示されるエラーハンドリング画面である。

### 本画面の処理概要

本画面はReact Routerのルーティング処理中にエラーが発生した場合に表示される画面である。主にJavaScriptの実行時エラーやルーティングエラーをキャッチして、ユーザーにエラー情報を表示し、ホーム画面への復帰手段を提供する。

**業務上の目的・背景**：Webアプリケーションでは、様々な要因で予期しないエラーが発生する可能性がある。ネットワーク障害、サーバーエラー、クライアントサイドのJavaScriptエラーなどである。本画面は、このようなエラー発生時にユーザーに適切な情報を提供し、システムの利用を継続できるよう復帰手段（ホームへの遷移）を提供することで、ユーザー体験の悪化を最小限に抑える。

**画面へのアクセス方法**：本画面はユーザーが意図的にアクセスするものではなく、React Routerの`errorElement`として設定されており、ルーティング処理中にエラーが発生した場合に自動的に表示される。

**主要な操作・処理内容**：
1. エラー情報（エラータイトル、エラーメッセージ）を確認する
2. 「Return to the index page」ボタンでホーム画面へ戻る

**画面遷移**：
- 遷移元：任意の画面でエラー発生時（React Routerのエラーバウンダリ）
- 遷移先：ホーム画面（`/`）

**権限による表示制御**：本画面は認証状態に関係なく表示される。エラーページは誰でもアクセス可能である必要があるため、権限チェックは行わない。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 36 | グローバル設定管理 | 主機能 | エラー情報の表示 |

## 画面種別

エラー表示画面

## URL/ルーティング

本画面は特定のURLパスを持たない。React Routerの`errorElement`として以下のルートに設定されている：

| ルート | errorElement |
|--------|--------------|
| `*` (すべてのルート) | ErrorPage |
| `/` (メインルート) | ErrorPage |
| `/` (認証ルート) | ErrorPage |

## 入出力項目

本画面は表示専用であり、ユーザー入力項目はない。

## 表示項目

| 項目名 | データ型 | 説明 |
|--------|----------|------|
| title | string | エラータイトル（デフォルト: "Error"、エラー情報がある場合: "Error: {statusText}"） |
| message | string | エラーメッセージ（固定: "An unexpected error has occurred"） |
| エラーアイコン | - | 赤色の警告アイコン（IconExclamationCircle） |
| 戻るボタン | - | "Return to the index page"ボタン（緑色アウトライン） |

## イベント仕様

### 1-ページ読み込み

**トリガー**：エラー発生によるErrorPage表示時

**処理内容**：
1. useRouteError()でReact Routerからエラー情報を取得
2. エラー情報にstatusTextがある場合、タイトルに反映
3. useDocumentTitle()でブラウザタイトルを更新
4. GenericErrorPageコンポーネントでエラー画面をレンダリング

### 2-戻るボタンクリック

**トリガー**：「Return to the index page」ボタンをクリック

**処理内容**：
- navigate('/')でホーム画面へ遷移

## データベース更新仕様

### 操作別データベース影響一覧

本画面はデータベース操作を行わない。

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| - | - | - | - |

## メッセージ仕様

| 種別 | メッセージ | 表示条件 |
|------|-----------|----------|
| エラー | Error | デフォルトタイトル |
| エラー | Error: {statusText} | statusTextが存在する場合 |
| エラー | An unexpected error has occurred | 常に表示 |

## 例外処理

本画面自体がエラーハンドリング画面であるため、この画面内でのエラー発生は想定していない。

| 例外状況 | 表示内容 | 対応処理 |
|---------|---------|---------|
| - | - | - |

## 備考

- 本画面はReact Routerのエラーバウンダリ機能を利用している
- GenericErrorPageコンポーネントを使用して統一されたエラー画面UIを提供
- LanguageContextでラップすることで、多言語対応を維持
- エラー情報はuseRouteError()フックで取得されるErrorResponse型のオブジェクト

---

## コードリーディングガイド

本画面を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

まず、エラーデータの型定義を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | Auth.ts | `src/frontend/lib/types/Auth.ts` | ErrorResponse型定義 |

**読解のコツ**: ErrorResponse型にstatusTextプロパティが含まれているかを確認

#### Step 2: エントリーポイントを理解する

処理の起点となるページコンポーネントを特定する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ErrorPage.tsx | `src/frontend/src/pages/ErrorPage.tsx` | メインコンポーネント全体（9-26行目） |

**主要処理フロー**:
1. **10行目**: useRouteError()でエラー情報を取得
2. **11行目**: title状態を初期化（デフォルト: "Error"）
3. **12行目**: useDocumentTitle()でブラウザタイトルを設定
4. **14-18行目**: useEffectでエラー情報からタイトルを更新
5. **20-25行目**: GenericErrorPageをレンダリング

#### Step 3: 共通エラーページコンポーネントを理解する

GenericErrorPageの実装を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | GenericErrorPage.tsx | `src/frontend/src/components/errors/GenericErrorPage.tsx` | 共通エラーページUI（18-73行目） |

**主要処理フロー**:
- **29行目**: useNavigate()でナビゲーション関数取得
- **31-71行目**: LanguageContextでラップしたカード形式のエラーUI
- **58-65行目**: ホームへ戻るボタンの実装

#### Step 4: ルーティング設定を理解する

ErrorPageがどこで使用されているかを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | router.tsx | `src/frontend/src/router.tsx` | errorElement設定箇所（151, 152, 206-209行目） |

**主要処理フロー**:
- **151行目**: ワイルドカードルートのerrorElement
- **152行目**: メインレイアウトルートのerrorElement
- **206-209行目**: 認証レイアウトルートのerrorElement

### プログラム呼び出し階層図

```
[エラー発生]
    │
    ▼
React Router Error Boundary
    │
    ▼
ErrorPage
    │
    ├─ useRouteError() ─── エラー情報取得
    │      └─ ErrorResponse型
    │
    ├─ useState(title) ─── タイトル状態管理
    │
    ├─ useDocumentTitle(title) ─── ブラウザタイトル設定
    │
    ├─ useEffect ─── エラー情報からタイトル更新
    │      └─ error.statusText存在時にタイトル更新
    │
    └─ GenericErrorPage
           │
           ├─ LanguageContext ─── 多言語対応
           │
           ├─ Card ─── エラー情報表示
           │      ├─ IconExclamationCircle ─── エラーアイコン
           │      ├─ title ─── エラータイトル
           │      ├─ message ─── エラーメッセージ
           │      └─ status ─── ステータスコード（任意）
           │
           └─ Button ─── ホームへ戻る
                  └─ navigate('/')
```

### データフロー図

```
[入力]                   [処理]                         [出力]

エラー発生      ───▶ React Router            ───▶ errorElement呼び出し
                      Error Boundary
                           │
                           ▼
                     ErrorPage
                           │
useRouteError() ───▶ error取得               ───▶ ErrorResponse
                           │
                           ├─ error.statusText ───▶ title更新
                           │      "Error: {statusText}"
                           │
                           └─ title            ───▶ useDocumentTitle
                                                    ブラウザタイトル更新

GenericErrorPage ───▶ カード形式表示          ───▶ エラー画面UI
                           │
                           └─ Button onClick   ───▶ navigate('/')
                                                    ホーム遷移
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ErrorPage.tsx | `src/frontend/src/pages/ErrorPage.tsx` | ソース | メインエラーページコンポーネント |
| GenericErrorPage.tsx | `src/frontend/src/components/errors/GenericErrorPage.tsx` | ソース | 共通エラーページUIコンポーネント |
| router.tsx | `src/frontend/src/router.tsx` | ソース | ルーティング定義（errorElement設定） |
| Auth.ts | `src/frontend/lib/types/Auth.ts` | ソース | ErrorResponse型定義 |
| LanguageContext.tsx | `src/frontend/src/contexts/LanguageContext.tsx` | ソース | 多言語対応コンテキスト |
