loglerのCLIコマンドはJSONを返す — AIエージェントには最適だが、ログファイルを睨んで何が起きたか解明しようとする人間にはあまり優しくない。Logler Webは同じRust駆動の解析エンジンの上にビジュアルレイヤーを載せる: ファイルをブラウズし、レベルでフィルタし、サービス間でスレッドを追い、数値メトリクスをチャート化し、イベントを相関させる — すべてブラウザの中で。
フロントエンドはVue 3 + TypeScript + Naive UI。バックエンドはloglerのPython APIにプロキシする29のFastAPIエンドポイント。別のデータベースもインジェストパイプラインも不要。ログファイルのディレクトリを指定して調査を始めるだけ。
6つのビュー
各ビューはログに関する異なる種類の質問に答える。
ログビューア
デフォルトビュー。1つ以上のログファイルからのエントリを、レベルに基づくカラーコーディングでスクロール可能なリストとして表示。レベル（INFO/DEBUG/WARN/ERROR）でフィルタ、テキストまたは正規表現で検索、大きなファイルのページネーション。
複数のファイルが開いている場合、エントリはタイムスタンプ順にインターリーブされる — すべてのファイルで何が起きたかを時系列で確認できる。各エントリにはカラードット付きのソースファイルが表示される（最大12色、自動割当て）。
階層
スレッドIDと命名パターンからツリーを構築。スレッドがworker-1 → worker-1.task-a → worker-1.task-a.subtaskのような規則に従っている場合、loglerが親子構造を推論し、ログ数とエラー伝播付きの折りたたみ可能なツリーとしてレンダリング。
ウォーターフォール
各スレッドまたはスパンがいつアクティブで、どれくらい時間がかかったかを示すタイムラインバー。重なり、ギャップ、クリティカルパス上のオペレーションの特定に便利。
SQL
DuckDB駆動のクエリエディタ。読み込まれた全ログエントリがSQLテーブルとして利用可能。プリセットクエリ（エラーサマリ、レベル分布、最繁忙スレッド）と完全な結果テーブル付き。ビルトインビューで対応できない質問への脱出ハッチ。
メトリクス
ログのフィールドとメッセージからの数値抽出。response_time_msやqueue_depthなどのフィールドを選択し、統計値（min、max、mean、p95、p99）を確認し、EChartsで時系列チャートを描画。Z-scoreの異常検知が外れ値をハイライト。
イベント相関
時間ウィンドウ付きのクロスファイルイベント相関。アンカーイベント（ERROR、特定のタイムスタンプ）を選び、ウィンドウ（5秒、30秒）を定義し、そのウィンドウ内で全ファイルにわたって何が起きたかを確認。関連イベントをグループにクラスタリング。
アーキテクチャ
ブラウザ (Vue 3 + Naive UI)
↕ HTTP/JSON + WebSocket
FastAPIバックエンド (29エンドポイント)
↕ Python関数呼び出し
logler (Rustコア + Python API)
↕ ファイルI/O
ローカルログファイル
バックエンドは単一のapp.pyファイル。ORM、マイグレーション、バックグラウンドワーカーなし。メモリ上にThreadTrackerインスタンスを保持し、loglerの調査関数をRESTエンドポイントとして公開。ファイルを開くたびにトラッカーが状態を蓄積 — スレッド、トレース、統計が成長していく。
フロントエンドの状態管理は9つのPiniaストアを使用。それぞれが特定のドメインを担当: logs（エントリ + フィルタリング）、files（ブラウザ + アクティブファイル）、threads（スレッドリスト）、metrics（数値抽出 + チャート）、correlations（仮想トレース + イベント）、そしてUI状態、ナビゲーション、調査コンテキスト、ファイルカラー用にさらに4つ。
主要機能
ファイルカラーコーディング
各開いたファイルに12色パレットから固有の色が割り当てられる。色はログエントリ横のドット、サイドバーのファイルリスト、フィルタトグルに表示。5つの異なるマイクロサービスのインターリーブされたエントリを見る時、色でソースの帰属が即座にわかる。
フォーマット自動検出
ファイルを開くと、loglerのフォーマット検出器がバックグラウンドで実行され、結果を報告: JSON、syslog RFC-3164、syslog RFC-5424、logfmt、Apache CLF、またはカスタム。ログエントリの上に検出されたフォーマットとマッチ率を示す信頼度バナーが表示される。
カスタムフォーマットは.logler/formats.yamlで定義し、サイドバーのライブ正規表現エディタでサンプル行に対してテスト可能。
仮想トレース相関
相関ルール（.logler/correlations.yamlで定義）でフィールド値のマッチングによりファイル間のエントリをリンク。api.logにrequest_id=abc-123があり、worker.logにreq_id=abc-123がある場合、フィールドマッチルールがそれらを接続する仮想トレースを作成。サイドバーに発見された相関が表示され、リンクされたエントリ間をナビゲート可能。
ライブフォロー
WebSocket接続でログファイルのリアルタイムテーリングを実現 — 書き込まれた新しいエントリがリアルタイムで表示される。
バックエンドテストスイート
29のエンドポイントに9つのテストファイルで109のpytestテスト:
| テストファイル | エンドポイント | テスト数 |
|---|---|---|
test_files_browse | browse, glob | 11 |
test_files_open | open, open_many, filter | 20 |
test_threads_traces | threads, traces | 4 |
test_search_analysis | search + 9解析エンドポイント | 15 |
test_formats | format config, builtin, test, save | 14 |
test_correlations | correlation config, run, events | 11 |
test_metrics_detect | metrics extract, format detect | 7 |
test_sql | SQLクエリ | 4 |
test_security | パストラバーサル、不正入力、エッジケース | 21 |
ファイル操作テストは実際のログファイルを使用 — 既知の内容を持つ決定論的フィクスチャ（10行: INFO 4、DEBUG 2、WARN 2、ERROR 2）。アサーションは形状ではなく正確な値をチェック。解析エンドポイントテストはloglerのバックエンドをモックしてAPI層を分離。セキュリティテストはパストラバーサル保護を検証（全ファイル操作がLOG_ROOTに対してチェック）。
実行方法
# インストール
pip install logler-web # または: uv add logler-web
# サーバー起動
logler-web --root /path/to/logs
# 開発
pnpm dev # フロントエンド開発サーバー
pnpm test:run # Vitest単体テスト
pnpm test:e2e # Playwright E2Eテスト
uv run pytest # バックエンドテスト（109テスト）
pnpm build # 本番ビルド
未対応の項目
- 認証なし — ローカル開発ツール。共有サーバーで実行するとポートに到達できる誰にでもログファイルが公開される。
- 永続セッションなし — 状態はメモリ上。サーバー再起動でゼロからスタート。
- ログ収集なし — 既存のファイルを指す。実行中のサービスからログを収集しない。
- EChartsバンドルサイズ — メトリクスビューが約1.6MBのEChartsを取り込む。ツリーシェイキングで軽減するが、開発ツールとしてはまだ大きい。
- loglerバージョン依存 — 全機能（フォーマット、相関、メトリクス、検出）にlogler >= 1.2.1が必要。古いバージョンではそれらの機能はグレースフルデグラデーションで利用不可。
これらは意図的なスコープ境界であり、バグではない。Logler Webはローカル調査ツールであり、本番オブザーバビリティプラットフォームではない。