# 通知設計書 1-汎用エラー通知

## 概要

本ドキュメントは、Actual Budget アプリケーションにおける「汎用エラー通知」の設計仕様を定義する。この通知は内部エラーが発生した際にユーザーへアプリのリスタートを促し、GitHubへのバグ報告を案内するものである。

### 本通知の処理概要

**業務上の目的・背景**：アプリケーション内部で予期しないエラーが発生した際に、ユーザーに状況を通知し、適切な対処（アプリの再起動）を促すことで、データの整合性を保護しユーザー体験の悪化を最小限に抑える。また、GitHub への Issue 報告を促すことで、開発チームがバグを迅速に把握・修正できるようにする。

**通知の送信タイミング**：サーバーから `server-error` イベントが発生した時点で即座に発行される。Redux の非同期アクションが `isRejected` 状態になった場合にも発行される可能性がある。

**通知の受信者**：現在アプリケーションを使用しているユーザー（ローカルのクライアント）。通知はアプリ内の通知コンポーネントを通じて画面に表示される。

**通知内容の概要**：内部エラーが発生した旨のメッセージと、アプリ再起動の推奨、GitHub への Issue 報告の案内が含まれる。エラー種別は `error` として赤色の警告スタイルで表示される。

**期待されるアクション**：ユーザーはアプリケーションを再起動し、問題が解消されない場合は GitHub に新しい Issue を作成してバグ報告を行う。

## 通知種別

アプリ内通知（トースト通知）

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 同期（イベント駆動） |
| 優先度 | 中 |
| リトライ | 無し |

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

- アプリケーションを使用している全てのローカルユーザーに対して通知が表示される
- 特定のユーザーやロールによるフィルタリングは行われない

## 通知テンプレート

### アプリ内通知の場合

| 項目 | 内容 |
|-----|------|
| 通知タイプ | `error` |
| タイトル | なし |
| スタイル | エラー背景色（赤系） |

### 本文テンプレート

```
Something internally went wrong. You may want to restart the app if anything looks wrong. Please report this as a new issue on GitHub.
```

（日本語訳：内部で何か問題が発生しました。何かおかしい点があればアプリを再起動することをお勧めします。GitHub で新しい Issue として報告してください。）

### 添付ファイル

| ファイル名 | 形式 | 条件 | 説明 |
|----------|------|------|------|
| なし | - | - | 添付ファイルなし |

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| なし | この通知は固定メッセージのため変数なし | - | - |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| サーバーイベント | `server-error` | イベント発生時 | サーバーからエラーイベントが送信された場合に通知を発行 |
| Redux アクション | `isRejected` | 非同期アクション失敗時 | Redux Toolkit の非同期 Thunk が拒否状態になった場合 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| 同一 ID の通知が存在 | 同じ ID を持つ通知が既に表示されている場合は重複追加しない |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[server-error イベント発生] --> B[handleGlobalEvents でイベントリッスン]
    B --> C[addGenericErrorNotification アクション発行]
    C --> D[Redux Store に通知追加]
    D --> E[Notifications コンポーネントで通知表示]
    E --> F[6.5秒後に自動消去 or ユーザーが閉じる]
    F --> G[removeNotification で通知削除]
```

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

### 参照テーブル一覧

| テーブル名 | 用途 | 備考 |
|-----------|------|------|
| なし | この通知はDBを参照しない | Redux Store のみ使用 |

### 更新テーブル一覧

| テーブル名 | 操作 | 概要 |
|-----------|------|------|
| なし | - | データベースへの永続化は行わない |

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| 通知追加失敗 | Redux Store 操作の失敗 | コンソールにエラー出力（ログのみ） |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | なし |
| リトライ間隔 | - |
| リトライ対象エラー | - |

## 配信設定

### レート制限

| 項目 | 内容 |
|-----|------|
| 1分あたり上限 | 制限なし |
| 1日あたり上限 | 制限なし |

### 配信時間帯

制限なし（エラー発生時に即座に通知）

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

- 通知メッセージには機密情報を含まない
- 内部エラー詳細（`internal` フィールド）は `console.error` にのみ出力され、ユーザーには表示されない
- GitHub への Issue 報告は外部リンクとして提供され、ユーザーが自発的に行う

## 備考

- `addGenericErrorNotification` は `notificationsSlice.ts` で定義された専用の Redux アクションである
- 通知 ID は UUID v4 で自動生成される
- `sticky` プロパティが設定されていないため、デフォルトのタイムアウト（6.5秒）後に自動的に消去される
- i18next による国際化対応が行われている

---

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

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

### 推奨読解順序

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

通知の型定義と状態管理の構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | notificationsSlice.ts | `packages/desktop-client/src/notifications/notificationsSlice.ts` | `Notification` 型（9-26行目）と `NotificationWithId` 型（27行目）の定義を確認。`type`, `message`, `sticky` 等のプロパティを理解する |

**読解のコツ**: Redux Toolkit の `createSlice` パターンに慣れていると理解しやすい。`PayloadAction` の型パラメータに注目する。

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

処理の起点となるイベントリスナーを特定する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | global-events.ts | `packages/desktop-client/src/global-events.ts` | `handleGlobalEvents` 関数（19-168行目）内の `server-error` イベントリスナー（20-22行目）を確認 |

**主要処理フロー**:
1. **20行目**: `listen('server-error', ...)` でサーバーエラーイベントをリッスン
2. **21行目**: `addGenericErrorNotification()` アクションをディスパッチ

#### Step 3: Redux アクションを理解する

通知を追加する Redux アクションの実装を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | notificationsSlice.ts | `packages/desktop-client/src/notifications/notificationsSlice.ts` | `addGenericErrorNotification` リデューサー（69-79行目）の実装を確認 |

**主要処理フロー**:
- **69-79行目**: 固定メッセージを含む `error` タイプの通知オブジェクトを作成し、`notifications` 配列に追加

#### Step 4: 通知表示コンポーネントを理解する

通知の UI レンダリングを担当するコンポーネントを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | Notifications.tsx | `packages/desktop-client/src/components/Notifications.tsx` | `Notification` コンポーネント（100-367行目）と `Notifications` コンポーネント（369-412行目）の実装を確認 |

**主要処理フロー**:
- **127-135行目**: `type === 'error'` の場合のスタイリングとタイムアウト処理
- **138-139行目**: `positive`（message）と `error` の判定
- **214-218行目**: エラータイプに応じた色の適用

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

```
handleGlobalEvents (global-events.ts)
    │
    ├─ listen('server-error', callback)
    │      └─ store.dispatch(addGenericErrorNotification())
    │              │
    │              └─ notificationsSlice (Redux Store 更新)
    │                      │
    │                      └─ Notifications.tsx (UI 表示)
    │                              └─ Notification コンポーネント
    │
    └─ listen('undo-event', callback) [他イベント]
```

### データフロー図

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

server-error ───▶ handleGlobalEvents ───▶ Redux Store
   イベント              │                    (notifications)
                        │                         │
                        ▼                         ▼
              addGenericErrorNotification    Notifications.tsx
                        │                    (UI レンダリング)
                        ▼                         │
                  UUID 生成                       ▼
                  メッセージ固定           画面に通知表示
                  type: 'error'           (6.5秒後自動消去)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| notificationsSlice.ts | `packages/desktop-client/src/notifications/notificationsSlice.ts` | ソース | 通知の Redux Slice（状態管理・アクション定義） |
| Notifications.tsx | `packages/desktop-client/src/components/Notifications.tsx` | ソース | 通知表示用 React コンポーネント |
| global-events.ts | `packages/desktop-client/src/global-events.ts` | ソース | グローバルイベントハンドラー（server-error リスナー） |
| store.ts | `packages/desktop-client/src/redux/store.ts` | ソース | Redux Store 設定（isRejected マッチャー含む） |
| fetch/index.ts | `packages/loot-core/src/platform/client/fetch/index.ts` | ソース | クライアント側のサーバー通信・イベント発行基盤 |
