🦆

DuckDB-Wasm を利用したブラウザでのログ解析機能

2024/12/04に公開

時雨堂の自社サービスのアピールが含まれます

概要

これは自社サービスの管理者用ダッシュボードのログ解析機能として DuckDB-Wasm を採用したので雑に紹介します。

DuckDB とは

こちらをどうぞ。

DuckDB雑紹介(1.1対応版)@DuckDB座談会 - Speaker Deck

まとめ

Image from Gyazo

  • DuckDB-Wasm を利用する事でクライアントリソースが利用できるようになった
  • Parquet ファイルを OPFS に保存できるようになり、オフラインで利用できるようになった
  • 自分が求めるレベルでの可視化は全て DuckDB/DuckDB-Wasm で十分だとわかった

ダッシュボードの実装

自社が提供している 自社パッケージ製品を検証できるサービス の管理者用ダッシュボード(以降ダッシュボード)で DuckDB-Wasm を利用してログ解析をブラウザ上で実現しています。

Fluent Bit からオブジェクトストレージへ

ログはパッケージ製品が出力する JSON Lines 形式のログで、それを Fluent Bit を利用して S3 互換オブジェクトストレージ(以降オブジェクトストレージ)へ保存しています。

リクエストベースでのログからの Parquet ファイル生成

ダッシュボードではリクエストベースでログを解析できるようになっています。

解析したいログを一覧を選び、そのログをオブジェクトストレージからダウンロードし、 DuckDB で Parquet ファイルを生成、オブジェクトストレージへ保存しています。

Image from Gyazo

Presigned URL を利用してダウンロード

Parquet ファイルを生成し S3 互換オブジェクトストレージの Go 向け SDK である minio-go を利用してオブジェクトストレージの Presigned URL を発行してダウンロードしています。

リクエストを受け取ってバックエンドで Parquet ファイルの生成には go-duckdb を利用しています。これはバックエンドが Go で書かれているというのもありますが、同時に CPU バウンドなリクエストを処理するため Go が最適と判断したためです。

ダウンロードした Parquet ファイルを OPFS に保存

Parquet ファイルを Presigned URL から Fetch API を利用してダウンロードしたら、そのまま OPFS に保存します。 OPFS に保存してあるため、ブラウザを更新すると Parquet ファイルのダウンロードは行いません。

Image from Gyazo

好き放題オフラインでログ解析

これで準備完了です。あとは SQL エディターで好き放題 SQL を試します。SQL インジェクションもありません。完全にローカルで動いています。

Parquet ファイルのダウンロード

解析したいログをダウンロードする方法をずっと考えていたのですが、この仕組みで DuckDB で Parquet ファイルを生成して、 OPFS 似保存したものをダウンロードして貰うというのが最も手軽だとわかりました。

SQL エディター

DuckDB-Wasm を利用するにあたり、ブラウザで動作する SQL エディターはとても重要だと考えています。実際ブラウザ上で SQL をこねくり回すときエディタが優秀だと嫌にならないってのは大事だと思っています。

CodeMirror の採用

SQL エディターには CodeMirror を採用しました。
採用理由は Vim キーバインドのプラグインが継続的なメンテナンスされているからです。また SQL ハイライト もよくできています。

Image from Gyazo

ちなみに CodeMirror は v6 で 1 から書き直されているので、v5 までしか使ったことがない人はちょっと戸惑うかもしれません。

TypeScript + React + Vite

フロントエンドは TypeScript + React + Vite を採用しています。静的ファイルと Go の API サーバーは閉じた世界にあるため、外部からは叩けないようになっています。

雑感

DuckDB-Wasm はブラウザ上で Parquet ファイルを SQL で解析するという革命的なツールです。オブジェクトストレージや OPFS を利用する事で安価でスケールさせることが可能になります。実際、利用しているとログがブラウザ上で解析できるのとても便利です。

この機能を実現するのに追加でかかった費用は オブジェクトストレージ 250 GB で月 5 ドル だけです。小規模なサービスなので 1 TB になっても 月 20 ドルです。そもそも JSON Lines 形式のログは gz で圧縮して保存してますし、 Parquet は Zstandard で圧縮しているので、1 TB のログとなるとよほどのことになります。

今後は自社の商用サービスのダッシュボードにもこの機能を展開していく予定です。

Discussion