§01-30Data Visualization
log viewer
流れてくるログを表示し、検索で絞り込める。
稼働中の処理から出る出力をその場で追い、問題の箇所を探す。デプロイやジョブの実行状況を見守る画面に向く。
実装のポイント
表示行数に上限を設けて古い行を捨て、末尾追従は利用者が上にスクロールしたら止める。大量ログは仮想スクロールで描画コストを抑える。
- 特徴
- リアルタイム
- タイマー
- モック
- デモで使っているもの
- lucide-react
§01-30Data Visualization
流れてくるログを表示し、検索で絞り込める。
稼働中の処理から出る出力をその場で追い、問題の箇所を探す。デプロイやジョブの実行状況を見守る画面に向く。
表示行数に上限を設けて古い行を捨て、末尾追従は利用者が上にスクロールしたら止める。大量ログは仮想スクロールで描画コストを抑える。