<h2 id="%E5%89%8D%E6%8F%90" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E5%89%8D%E6%8F%90" aria-hidden="true"></a> 前提</h2>
<ul data-line="2" class="code-line">
<li data-line="2" class="code-line">ミドルウェアのログ可視化</li>
<li data-line="3" class="code-line">ログサイズは全体で 1 TB 未満</li>
<li data-line="4" class="code-line">ログは jsonl で出力される</li>
</ul>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="6" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<ul data-line="8" class="code-line">
<li data-line="8" class="code-line">非同期での可視化</li>
<li data-line="9" class="code-line">オフラインでの可視化</li>
<li data-line="10" class="code-line">低コスト</li>
</ul>
<h2 id="duckdb-%E3%81%A8%E3%81%AF" data-line="12" class="code-line">
<a class="header-anchor-link" href="#duckdb-%E3%81%A8%E3%81%AF" aria-hidden="true"></a> DuckDB とは</h2>
<p data-line="14" class="code-line">こちらをどうぞ。</p>
<p data-line="16" class="code-line"><a href="https://speakerdeck.com/ktz/duckdbza-shao-jie-1-dot-1dui-ying-ban-at-duckdbzuo-tan-hui" target="_blank" rel="nofollow noopener noreferrer">DuckDB雑紹介(1.1対応版)@DuckDB座談会 - Speaker Deck</a></p>
<h2 id="%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB" data-line="18" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB" aria-hidden="true"></a> サンプル</h2>
<p data-line="20" class="code-line">とりあえず動くのが見たい人用です。ソースコードも公開してます。</p>
<p data-line="22" class="code-line"><a href="https://voluntas.github.io/duckdb-wasm-parquet/" target="_blank" rel="nofollow noopener noreferrer">DuckDB-Wasm + Parquet + S3-compatible object storage + OPFS</a></p>
<ul data-line="24" class="code-line">
<li data-line="24" class="code-line">S3 から Parquet ファイルを fetch して DuckDB-Wasm への登録</li>
<li data-line="25" class="code-line">OPFS へ Parquet ファイルの保存</li>
<li data-line="26" class="code-line">OPFS から Parquet ファイルの読み込み DuckDB-Wasm へ登録</li>
<li data-line="27" class="code-line">SAMPLE 1 の出力</li>
<li data-line="28" class="code-line">SAMPLE 1 での検索</li>
<li data-line="29" class="code-line">SAMPLE 1 での Parquet ファイル出力</li>
<li data-line="30" class="code-line">雑な集計</li>
<li data-line="31" class="code-line">OPFS の削除</li>
</ul>
<p data-line="33" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__9e83230dfaa8" src="https://embed.zenn.studio/card#zenn-embedded__9e83230dfaa8" data-content="https%3A%2F%2Fgithub.com%2Fvoluntas%2Fduckdb-wasm-parquet" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/voluntas/duckdb-wasm-parquet" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/voluntas/duckdb-wasm-parquet</a></p>
<h2 id="%E9%9D%9E%E5%90%8C%E6%9C%9F%E3%81%AE%E5%8F%AF%E8%A6%96%E5%8C%96" data-line="35" class="code-line">
<a class="header-anchor-link" href="#%E9%9D%9E%E5%90%8C%E6%9C%9F%E3%81%AE%E5%8F%AF%E8%A6%96%E5%8C%96" aria-hidden="true"></a> 非同期の可視化</h2>
<p data-line="37" class="code-line">DuckDB を利用する事で、HTTP で可視化要求リクエストを受け取って S3 または S3 互換オブジェクトストレージ (以降 S3) から jsonl.gz ログ取得し Parquet ファイルを生成し、S3 にアップロードし、署名付き URL を発行して返すことができます。</p>
<p data-line="39" class="code-line">クライアントは Parquet ファイルをダウンロードし OPFS に保存、その後は通信することなくオフラインで好き放題ブラウザ上で解析することができます。</p>
<span class="embed-block zenn-embedded zenn-embedded-mermaid"><iframe id="zenn-embedded__d4a6725afa4f1" src="https://embed.zenn.studio/mermaid#zenn-embedded__d4a6725afa4f1" data-content="sequenceDiagram%0A%20%20participant%20B%20as%20Browse%0A%20%20participant%20O%20as%20OPFS%0A%20%20participant%20DW%20as%20DuckDB-Wasm%0A%20%20participant%20A%20as%20App(DuckDB)%0A%20%20participant%20S3%20as%20S3%0A%20%20participant%20M%20as%20Middleware%0A%20%20M-)S3%3A%20Fluent-Bit%20%E3%81%A7%2020240801.jsonl.gz%20%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%0A%20%20M-)S3%3A%20Fluent-Bit%20%E3%81%A7%2020240802.jsonl.gz%20%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%0A%20%20note%20over%20B%2CM%3A%20%E6%95%B0%E6%97%A5%E7%B5%8C%E9%81%8E%0A%20%20B-%3E%3E%2BA%3A%202024%20%2F%208%20%2F%2001-02%20%E3%81%AE%20xyz%20%E3%81%AE%E5%8F%AF%E8%A6%96%E5%8C%96%E3%82%92%E8%A6%81%E6%B1%82%0A%20%20A-%3E%3EA%3A%20SELECT%20*%20FROM%20's3%3A%2F%2F%3Cbucket%3E%2F2024%2F08%2F*%2Fxyz.jsonl.gz%0A%20%20A-%3E%3E%2BS3%3A%20GetObject%2020240801.jsonl.gz%0A%20%20S3-%3E%3E-A%3A%2020240801.jsonl.gz%0A%20%20A-%3E%3E%2BS3%3A%20GetObject%2020240802.jsonl.gz%0A%20%20S3-%3E%3E-A%3A%2020240802.jsonl.gz%0A%20%20A-%3E%3EA%3A%2020240801.jsonl.gz%20%E3%81%A8%2020240802.jsonl.gz%20%E3%82%92%E9%9B%86%E7%B4%84%E3%81%97%E3%81%A6%20Parquet%20%E3%81%AB%E5%A4%89%E6%8F%9B%0A%20%20A-%3E%3E%2BS3%3A%20PutObject%20xyz.parquet%0A%20%20S3-%3E%3E-A%3A%20OK%0A%20%20A-%3E%3E%2BS3%3A%20GetPresignedURL%20xyz.parquet%0A%20%20S3-%3E%3E-A%3A%20Presigned%20URL%20xyz.parquet%0A%20%20A-%3E%3E-B%3A%20Presigned%20URL%20xyz.parquet%0A%20%20B-)O%3A%20Write%20xyz.parquet%0A%20%20B-)DW%3A%20Register%20xyz.parquet%0A%20%20B-%3E%3E%2BDW%3A%20%E3%82%AF%E3%82%A8%E3%83%AA%E3%83%BC%0A%20%20DW-%3E%3E-B%3A%20%E7%B5%90%E6%9E%9C%0A%20%20B-%3E%3EB%3A%20%E5%8F%AF%E8%A6%96%E5%8C%96" frameborder="0" scrolling="no" loading="lazy"></iframe></span><p data-line="71" class="code-line">そもそもダッシュボードの可視化を求められるのは、なにか問題があったときであって、<strong>それ以外では必要とされることは基本的にありません</strong>。</p>
<p data-line="73" class="code-line">S3 の jsonl.gz や Parquet ファイルの有効期限を設定しておくことで、一定期間で削除することができます。</p>
<h2 id="%E3%82%AA%E3%83%95%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%A7%E3%81%AE%E5%8F%AF%E8%A6%96%E5%8C%96" data-line="75" class="code-line">
<a class="header-anchor-link" href="#%E3%82%AA%E3%83%95%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%A7%E3%81%AE%E5%8F%AF%E8%A6%96%E5%8C%96" aria-hidden="true"></a> オフラインでの可視化</h2>
<p data-line="77" class="code-line">この仕組みを使う事で OPFS に保存された Parquet ファイルはいつでもオフラインで確認することができるようになります。毎回ダウンロードも発生しません。</p>
<p data-line="79" class="code-line">OPFS のファイルはクライアント側の判断で好きに削除することができます。</p>
<h2 id="%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9" data-line="81" class="code-line">
<a class="header-anchor-link" href="#%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9" aria-hidden="true"></a> クライアントリソース</h2>
<p data-line="83" class="code-line">この仕組みを使う事で集計や解析に必要なリソースをクライアント側に持たせることができます。クライアント側で Parquet で数十メガ程度のログを解析はとても軽く、負担になる範囲ではありません。</p>
<h2 id="%E3%82%B3%E3%82%B9%E3%83%88" data-line="85" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B3%E3%82%B9%E3%83%88" aria-hidden="true"></a> コスト</h2>
<p data-line="87" class="code-line">上記の構成でかかる費用は S3 のストレージ費用と、Parquet ファイルの転送量だけです。要求の処理は集約だけなのでほぼ CPU リソースを使うことはありません。</p>
<h2 id="%E3%82%AA%E3%83%95%E3%83%A9%E3%82%A4%E3%83%B3%E8%A7%A3%E6%9E%90" data-line="89" class="code-line">
<a class="header-anchor-link" href="#%E3%82%AA%E3%83%95%E3%83%A9%E3%82%A4%E3%83%B3%E8%A7%A3%E6%9E%90" aria-hidden="true"></a> オフライン解析</h2>
<p data-line="91" class="code-line">DuckDB-Wasm をうまく使えば、ミドルウェアが出力した json.gz ログをブラウザに D&amp;D で読み込ませて、それを解析することもできるようになります。</p>
<p data-line="93" class="code-line">ブラウザで利用できるオフライン解析ツールが実現できるようになります。</p>
<h2 id="duckdb-wasm-%E3%81%AE-opfs-%E5%AF%BE%E5%BF%9C" data-line="95" class="code-line">
<a class="header-anchor-link" href="#duckdb-wasm-%E3%81%AE-opfs-%E5%AF%BE%E5%BF%9C" aria-hidden="true"></a> DuckDB-Wasm の OPFS 対応</h2>
<p data-line="97" class="code-line"><a href="https://github.com/duckdb/duckdb-wasm/pull/1856" target="_blank" rel="nofollow noopener noreferrer">Add OPFS (Origin Private File System) Support to the Latest Version of duckdb-wasm by e1arikawa · Pull Request #1856 · duckdb/duckdb-wasm</a></p>
<p data-line="99" class="code-line">DuckDB-Wasm 利用時に OPFS を保存先とする仕組みです。この仕組みを利用することで 10 GB 近いデータをブラウザで読み込めるようになるようです。</p>
<p data-line="101" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-tweet"><iframe id="zenn-embedded__a40e3b7aeb0ba" src="https://embed.zenn.studio/tweet#zenn-embedded__a40e3b7aeb0ba" data-content="https%3A%2F%2Fx.com%2Feiichi292929%2Fstatus%2F1841760741713707122" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://x.com/eiichi292929/status/1841760741713707122" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://x.com/eiichi292929/status/1841760741713707122</a></p>
<h2 id="duckdb-wasm-%E3%81%A7%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%88%E3%82%B5%E3%83%BC%E3%83%81" data-line="103" class="code-line">
<a class="header-anchor-link" href="#duckdb-wasm-%E3%81%A7%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%88%E3%82%B5%E3%83%BC%E3%83%81" aria-hidden="true"></a> DuckDB-Wasm でインスタントサーチ</h2>
<p data-line="105" class="code-line">かなり雑に作ったのですが、キー入力毎に DuckDB-Wasm で SQL を実行して、Samples (1) を実行しています。</p>
<p data-line="107" class="code-line"><a href="https://gyazo.com/2dd16bb90cd7756a836eab287dc77e49" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/2dd16bb90cd7756a836eab287dc77e49.gif" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>
<p data-line="109" class="code-line">以下のような SQL を実行しています。<br>
当たり前ですが DuckDB-Wasm は SQL インジェクションが存在しないので最高です。</p>
<div class="code-block-container"><pre class="language-sql"><code class="language-sql code-line" data-line="112"><span class="token keyword">SELECT</span> <span class="token keyword">timestamp</span><span class="token punctuation">,</span> connection_id<span class="token punctuation">,</span> rtc_type
<span class="token keyword">FROM</span> rtc_stats
<span class="token keyword">WHERE</span> connection_id <span class="token operator">LIKE</span> <span class="token string">'%${searchTerm}%'</span>
    <span class="token operator">OR</span> <span class="token keyword">timestamp</span> <span class="token operator">LIKE</span> <span class="token string">'%${searchTerm}%'</span>
    <span class="token operator">OR</span> rtc_type <span class="token operator">LIKE</span> <span class="token string">'%${searchTerm}%'</span>
<span class="token keyword">USING</span> SAMPLE <span class="token number">1</span> <span class="token keyword">PERCENT</span> <span class="token punctuation">(</span>bernoulli<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p data-line="121" class="code-line">以下の検索ボックスで試せます。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__fa10d5813ba13" src="https://embed.zenn.studio/card#zenn-embedded__fa10d5813ba13" data-content="https%3A%2F%2Fvoluntas.github.io%2Fduckdb-wasm-parquet%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://voluntas.github.io/duckdb-wasm-parquet/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://voluntas.github.io/duckdb-wasm-parquet/</a></p>
<h2 id="duckdb-wasm-%E3%81%A7-parquet-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%87%BA%E5%8A%9B" data-line="124" class="code-line">
<a class="header-anchor-link" href="#duckdb-wasm-%E3%81%A7-parquet-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%87%BA%E5%8A%9B" aria-hidden="true"></a> DuckDB-Wasm で Parquet ファイル出力</h2>
<p data-line="126" class="code-line">DuckDB-Wasm で Parquet ファイルを出力することができます。</p>
<div class="code-block-container"><pre class="language-sql"><code class="language-sql code-line" data-line="128">COPY <span class="token punctuation">(</span><span class="token keyword">SELECT</span> <span class="token operator">*</span> <span class="token keyword">FROM</span> rtc_stats
<span class="token keyword">USING</span> SAMPLE <span class="token number">1</span> <span class="token keyword">PERCENT</span> <span class="token punctuation">(</span>bernoulli<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">TO</span> samples<span class="token punctuation">.</span>parquet <span class="token punctuation">(</span>FORMAT <span class="token string">'parquet'</span><span class="token punctuation">,</span> COMPRESSION <span class="token string">'zstd'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p data-line="133" class="code-line">後はこんな感じで Buffer に保存して、それを Blob にしてダウンロードすることができます。</p>
<div class="code-block-container"><pre class="language-javascript"><code class="language-javascript code-line" data-line="135"><span class="token keyword">const</span> parquet_buffer <span class="token operator">=</span> <span class="token keyword control-flow">await</span> db<span class="token punctuation">.</span><span class="token method function property-access">copyFileToBuffer</span><span class="token punctuation">(</span><span class="token string">'samples.parquet'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> blob <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">(</span><span class="token punctuation">[</span>parquet_buffer<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'application/octet-stream'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p data-line="140" class="code-line">以下の <code>Samples (1%) Download Parquet</code> ボタンで試せます。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__03cbfcbbaa7ae" src="https://embed.zenn.studio/card#zenn-embedded__03cbfcbbaa7ae" data-content="https%3A%2F%2Fvoluntas.github.io%2Fduckdb-wasm-parquet%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://voluntas.github.io/duckdb-wasm-parquet/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://voluntas.github.io/duckdb-wasm-parquet/</a></p>


DuckDB/DuckDB-Wasm を利用した低コストでの可視化

DuckDB-Wasm でインスタントサーチ

DuckDB-Wasm で Parquet ファイル出力

renadachi

voluntas

<p data-line="0" class="code-line">同じようなことやろうかな～と思っていたのでサンプルめちゃくちゃ参考になりました！</p>
<p data-line="2" class="code-line">サンプルサイト、複数タブで開くとエラーになるので本番投入するときはそのあたり対応したいと思います。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="4">Error: Failed to execute 'createSyncAccessHandle' on 'FileSystemFileHandle': Access Handles cannot be created if there is another open Access Handle or Writable stream associated with the same file.:
    at r (duckdb-browser-eh.worker-CsY_IVEi.js:53:3110)
    at async Object.prepareFileHandles (duckdb-browser-eh.worker-CsY_IVEi.js:53:3169)
    at async ha.prepareDBFileHandle (duckdb-browser-eh.worker-CsY_IVEi.js:40:64828)
    at async xo.onMessage (duckdb-browser-eh.worker-CsY_IVEi.js:40:68775)
    at async globalThis.onmessage (duckdb-browser-eh.worker-CsY_IVEi.js:53:14143)
</code></pre></div>

<p data-line="0" class="code-line">今のところ <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API" target="_blank" rel="nofollow noopener noreferrer">Web Locks API</a> を使うくらいしか手が無いと思います。</p>


<p data-line="0" class="code-line">ありがとうございます！スクラップの方に書いてありましたね🙏</p>


Discussion