# 通知設計書 9-スキーマファイルパス保存エラー

## 概要

本ドキュメントは、Liamアプリケーションにおけるスキーマファイルパス保存失敗時のUI通知（トースト）の設計仕様を定義する。ブランチ詳細画面でスキーマファイルのパスと形式を設定しようとした際に、何らかの理由で保存に失敗した場合に表示されるエラー通知について、表示仕様、トリガー条件、処理フローを詳細に記載する。

### 本通知の処理概要

スキーマファイルパス保存エラー通知は、ブランチ詳細画面でスキーマファイルのパスとフォーマットを設定しようとした際に、バリデーションエラーまたはデータベース保存エラーが発生した場合に表示されるエラートースト通知である。

**業務上の目的・背景**：スキーマファイルパスの設定が失敗した場合、ユーザーに明確なフィードバックを提供することで、問題の認識と対処を促す。エラーの原因（パスが空、無効なフォーマット、サーバーエラーなど）を示すことで、ユーザーが適切な修正アクションを取れるようにする。

**通知の送信タイミング**：ブランチ詳細画面のスキーマファイルパス設定フォームで、保存ボタンを押下した後、サーバーアクション`saveSchemaFilePath`がエラーを返した時点で表示される。

**通知の受信者**：スキーマファイルパス設定操作を実行したユーザー本人。現在表示しているブランチ詳細画面上でトースト通知が表示される。

**通知内容の概要**：「Error」というタイトルと、具体的なエラー内容を説明するdescriptionが、エラー（error）ステータスのトースト通知として表示される。

**期待されるアクション**：ユーザーはエラーメッセージを確認し、入力内容を修正して再度保存を試みる。

## 通知種別

UI通知（トースト）

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 同期（サーバーアクション完了後に即座に表示） |
| 優先度 | 高 |
| リトライ | なし（UI表示のため不要、ユーザーが手動で再試行） |

### 送信先決定ロジック

スキーマファイルパス設定操作を実行したユーザーの現在のページ上でトースト通知を表示する。

## 通知テンプレート

### UI通知の場合

| 項目 | 内容 |
|-----|------|
| タイトル | Error |
| 説明文 | state.errorの値（エラー内容に応じて変動） |
| ステータス | error |
| 表示位置 | header（ヘッダー下部） |

### 本文テンプレート

```
タイトル: Error
説明: ${state.error}
```

### 想定されるエラーメッセージ一覧

| エラーメッセージ | 発生条件 |
|----------------|---------|
| Path is required | パスが空の場合 |
| Invalid input | その他のバリデーションエラー |
| 組織ID取得エラー | セッションから組織IDを取得できない場合 |
| Failed to save schema file path | データベース保存に失敗した場合 |

### 添付ファイル

| ファイル名 | 形式 | 条件 | 説明 |
|----------|------|------|------|
| なし | - | - | UI通知のため添付ファイルなし |

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| state.error | エラーメッセージ | サーバーアクションのレスポンス | Yes |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| 画面操作 | スキーマファイルパス保存ボタン押下 | saveSchemaFilePathが失敗 | state.errorが存在する場合 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| 保存成功時 | state.successがtrueの場合は表示しない（成功トースト表示） |
| 初期状態 | state.errorがnullの場合は表示しない |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[ユーザーがSaveボタン押下] --> B[saveSchemaFilePath実行]
    B --> C[フォームデータバリデーション]
    C -->|pathが空| D[Path is required エラー返却]
    C -->|その他バリデーション失敗| E[Invalid input エラー返却]
    C -->|バリデーション成功| F[組織ID取得]
    F -->|失敗| G[組織ID取得エラー返却]
    F -->|成功| H[schema_file_pathsテーブルUPSERT]
    H -->|失敗| I[Failed to save... エラー返却]
    H -->|成功| J[成功レスポンス返却]
    D --> K[state.error設定]
    E --> K
    G --> K
    I --> K
    K --> L[useEffect検知]
    L --> M[エラートースト表示]
    M --> N[終了]
    J --> O[成功トースト表示]
    O --> N
```

## データベース参照・更新仕様

### 参照テーブル一覧

| テーブル名 | 用途 | 備考 |
|-----------|------|------|
| なし | - | エラー通知時はデータベース参照なし |

### テーブル別参照項目詳細

エラー通知のため、データベースからの参照は行わない（エラー発生時点で処理中断）。

### 更新テーブル一覧

| テーブル名 | 操作 | 概要 |
|-----------|------|------|
| なし | - | エラー時はデータベース更新なし |

#### 送信ログテーブル

| 操作 | 項目（カラム名） | 更新値 | 備考 |
|-----|-----------------|-------|------|
| - | - | - | UI通知のため送信ログなし |

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| バリデーションエラー | パスが空 | エラートースト表示、ユーザーにパス入力を促す |
| バリデーションエラー | フォーマットが不正 | エラートースト表示、ユーザーに再選択を促す |
| 認証エラー | 組織IDを取得できない | エラートースト表示、再ログインを促す |
| データベースエラー | 保存クエリが失敗 | エラートースト表示、ユーザーに再試行を促す |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | なし（ユーザー操作による手動リトライ） |
| リトライ間隔 | - |
| リトライ対象エラー | - |

## 配信設定

### レート制限

| 項目 | 内容 |
|-----|------|
| 1分あたり上限 | なし（UI表示のため制限不要） |
| 1日あたり上限 | なし |

### 配信時間帯

特に制限なし。ユーザー操作に応じて即座に表示される。

## セキュリティ考慮事項

- エラーメッセージには技術的な詳細情報を含めず、ユーザーフレンドリーな表現を使用
- サーバーサイドでバリデーションを行い、不正な入力を拒否
- エラー内容のログ出力は適切に行うが、ユーザーには必要最小限の情報のみ表示

## 備考

- React 19のuseActionStateフックを使用してフォームの状態管理を実装
- useEffectでstate.errorの変更を監視し、errorが存在する場合にトーストを表示
- valibotスキーマでバリデーションを行い、minLength制約で空パスを拒否
- フォーマットはpicklistで限定された値のみ許可

---

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

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

### 推奨読解順序

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

まず、サーバーアクションのエラー状態を理解することが重要。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | saveSchemaFilePath.ts | `frontend/apps/app/components/BranchDetailPage/actions/saveSchemaFilePath.ts` | 戻り値の型（16-23行目）でエラー状態の構造を理解する |

**読解のコツ**: `{ success: false, error: string | null, message: null }`がエラー時の状態。

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | SchemaFilePathForm.tsx | `frontend/apps/app/components/BranchDetailPage/components/SchemaFilePathForm/SchemaFilePathForm.tsx` | useEffect（33-47行目）でエラー時のトースト表示処理を理解する |

**主要処理フロー**:
1. **33行目**: useEffectでstateを監視
2. **40-45行目**: state.error時にエラートースト表示
3. **41行目**: title: 'Error'を設定
4. **42行目**: description: state.errorを設定

#### Step 3: サーバーアクションのエラーケースを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | saveSchemaFilePath.ts | `frontend/apps/app/components/BranchDetailPage/actions/saveSchemaFilePath.ts` | 各種エラーケース（32-36行目、43-47行目、70-75行目）を理解する |

**主要処理フロー**:
- **32-36行目**: バリデーション失敗時のエラー（`result.issues[0]?.message || 'Invalid input'`）
- **43-47行目**: 組織ID取得失敗時のエラー
- **70-75行目**: データベース保存失敗時のエラー

#### Step 4: バリデーションスキーマを理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | saveSchemaFilePath.ts | `frontend/apps/app/components/BranchDetailPage/actions/saveSchemaFilePath.ts` | バリデーションスキーマ（8-12行目）を理解する |

**主要処理フロー**:
- **10行目**: `v.pipe(v.string(), v.minLength(1, 'Path is required'))`で空パスを拒否
- **11行目**: `v.picklist(['schemarb', 'postgres', 'prisma', 'tbls'])`でフォーマットを限定

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

```
SchemaFilePathForm.tsx
    │
    ├─ useActionState(saveSchemaFilePath)
    │
    └─ useEffect([state])
           │
           └─ [error時] toast({ title: 'Error', description: error })

saveSchemaFilePath
    │
    ├─ [バリデーション失敗] return { success: false, error: '...' }
    │
    ├─ getOrganizationId()
    │      │
    │      └─ [失敗] return { success: false, error: '...' }
    │
    └─ supabase.from('schema_file_paths').upsert()
           │
           └─ [失敗] return { success: false, error: '...' }
```

### データフロー図

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

フォーム送信             ───▶ saveSchemaFilePath          ───▶ state更新
(無効なデータ)                │                               │
                              │                               ▼
                              └─▶ バリデーション/保存失敗   useEffect検知
                                    │                         │
                                    └─▶ error設定          エラートースト
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| SchemaFilePathForm.tsx | `frontend/apps/app/components/BranchDetailPage/components/SchemaFilePathForm/SchemaFilePathForm.tsx` | ソース | スキーマパス設定UI・エラーハンドリング |
| saveSchemaFilePath.ts | `frontend/apps/app/components/BranchDetailPage/actions/saveSchemaFilePath.ts` | ソース | スキーマパス保存サーバーアクション・エラー生成 |
| Toast.tsx | `frontend/packages/ui/src/components/Toast/Toast.tsx` | ソース | トースト通知UIコンポーネント |
| useToast.tsx | `frontend/packages/ui/src/components/Toast/useToast.tsx` | ソース | トーストフック |
