# 画面設計書 3-エラー画面

## 概要

本ドキュメントは、Liam DBアプリケーションの汎用エラー画面について定義する。

### 本画面の処理概要

エラー画面は、アプリケーション内で発生した各種エラー（認証エラー、サーバーエラー等）をユーザーに通知するための汎用画面である。シンプルなエラーメッセージを表示し、ユーザーにエラーが発生したことを伝える。

**業務上の目的・背景**：アプリケーション利用中に予期しないエラーが発生した場合、ユーザーに適切なフィードバックを提供することでユーザー体験を損なわないようにするため。現状はシンプルな実装だが、将来的にエラー種別に応じた詳細表示や対処方法の案内を追加する基盤となる。

**画面へのアクセス方法**：
- 認証エラー発生時に自動リダイレクト
- 各種サーバーエラー発生時に自動リダイレクト
- ブラウザで直接`/error`にアクセス

**主要な操作・処理内容**：
1. エラーメッセージ「Sorry, something went wrong」を表示
2. ユーザーは画面を確認後、ブラウザの戻るボタン等で他の画面へ移動

**画面遷移**：
- 本画面への遷移：ログイン認証失敗、GitHub OAuth初期化失敗など各種エラー発生時
- 本画面からの遷移：ブラウザ操作による（明示的な遷移リンクなし）

**権限による表示制御**：なし（認証不要で表示可能）

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 36 | フィードバックコンポーネント | 主機能 | システムエラー発生時のエラーメッセージ表示 |

## 画面種別

エラー

## URL/ルーティング

- URL: `/error`
- ファイル: `frontend/apps/app/app/error/page.tsx`
- レンダリング: クライアントコンポーネント（`'use client'`）

## 入出力項目

なし

## 表示項目

| 項目名 | 説明 | 備考 |
|--------|------|------|
| エラーメッセージ | "Sorry, something went wrong" | p要素で表示 |

## イベント仕様

本画面にはユーザー操作に応じたイベントは存在しない。

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

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

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| ページ表示 | - | - | データベース操作なし |

本画面はエラーメッセージ表示のみであり、データベース操作は行わない。

## メッセージ仕様

| メッセージID | メッセージ内容 | 表示タイミング | 種別 |
|--------------|---------------|----------------|------|
| ERR-001 | "Sorry, something went wrong" | ページ表示時 | エラー |

## 例外処理

本画面自体が例外処理の結果として表示される画面であり、追加の例外処理は実装されていない。

## 備考

- クライアントコンポーネントとして実装されている（`'use client'`ディレクティブ）
- 現状は非常にシンプルな実装であり、将来的な機能拡張が想定される
- エラーの詳細情報やリカバリー方法の表示は未実装

---

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

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

### 推奨読解順序

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

エラーページは非常にシンプルな実装。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | page.tsx | `frontend/apps/app/app/error/page.tsx` | エラーページの全体実装 |

**主要処理フロー**:
1. **1行目**: `'use client'`ディレクティブでクライアントコンポーネントを宣言
2. **3-5行目**: シンプルなエラーメッセージを返すコンポーネント

**読解のコツ**: このファイルは5行のみの非常にシンプルな実装であり、将来の拡張ポイントとして理解しておく。

#### Step 2: エラー画面への遷移元を理解する

どこからエラー画面に遷移してくるかを把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | loginByEmail.ts | `frontend/apps/app/components/LoginPage/services/loginByEmail.ts` | 認証エラー時のリダイレクト |
| 2-2 | loginByGithub.ts | `frontend/apps/app/components/LoginPage/services/loginByGithub.ts` | OAuth エラー時のリダイレクト |

**主要処理フロー（loginByEmail.ts）**:
- **55行目**: バリデーションエラー時に`/error`へリダイレクト
- **69行目**: 認証失敗時に`/error`へリダイレクト

**主要処理フロー（loginByGithub.ts）**:
- **77行目**: OAuth初期化失敗時に`/error`へリダイレクト

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

```
app/error/page.tsx (ErrorPage)
    │
    └─ [単純なp要素のレンダリング]

[遷移元]
loginByEmail.ts ──▶ redirect(urlgen('error'))
loginByGithub.ts ──▶ redirect(urlgen('error'))
```

### データフロー図

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

各種エラー発生    ───▶ redirect('/error')    ───▶ ErrorPage
                                                    │
                                                    └─▶ "Sorry, something went wrong"
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| page.tsx | `frontend/apps/app/app/error/page.tsx` | ソース | エラーページコンポーネント |
| loginByEmail.ts | `frontend/apps/app/components/LoginPage/services/loginByEmail.ts` | ソース | エラー遷移元（メール認証） |
| loginByGithub.ts | `frontend/apps/app/components/LoginPage/services/loginByGithub.ts` | ソース | エラー遷移元（OAuth） |
| urlgen.ts | `frontend/apps/app/libs/routes/urlgen.ts` | ソース | URL生成ユーティリティ |
