DenoでOpenTelemetryに入門する

Slide 1

Slide 1 text

2025/03/14 toranoana.deno #20 DenoでOpenTelemetryに入門する

Slide 2

Slide 2 text

nus3（なすさん）サイボウズ所属フロントエンド刷新⁨⁩と格闘する日々を過ごして、もうすぐ4年になります

Slide 3

Slide 3 text

はじめに

Slide 4

Slide 4 text

業務でもプライベートでも Denoを使わせてもろてます

Slide 5

Slide 5 text

Denoの好きなところ U 開発に必要なものがビルトインされているので、  やりたいことをすぐに始められるとこ% U Linter、Formatter、テスト、型（tsconfig U ロゴが、かあいA U グッズも、かあいい 2023年のDeno Festでの戦利品たち余談だけどもGo (Gopherくん) も同じ理由でも好き

Slide 6

Slide 6 text

そんなDenoのv2.2が  先日リリース

Slide 7

Slide 7 text

https://deno.com/blog/v2.2

Slide 8

Slide 8 text

OpenTelemetry ... 言葉は見たことあるがナニモワカランこの子はウチのマスコットのハシコウくん

Slide 9

Slide 9 text

ナニモワカランが  Denoにビルトインされたということは...

Slide 10

Slide 10 text

Denoの好きなところ開発に必要なものがビルトインされているので Linter、Formatter、テスト、型（tsconfig% ロゴが、かあい8 グッズも、かあいい、  やりたいことをすぐに始められるとこu 2023年のDeno Festでの戦利品たち余談だけどもGo（Gopherくん）も好き

Slide 11

Slide 11 text

Denoをきっかけに OpenTelemetryに入門できる！！

Slide 12

Slide 12 text

ナニモワカラン状態から DenoでOpenTelemetryを試してみる

Slide 13

Slide 13 text

Denoのドキュメントにある OpenTelemetryのQuick start をやってみる

Slide 14

Slide 14 text

https://docs.deno.com/runtime/fundamentals/open_telemetry/

Slide 15

Slide 15 text

Quick start H9 Denoで任意のスクリプトを実1 09 DockerでOpenTelemetry用コンテナを起 9 計測結果を確認する

Slide 16

Slide 16 text

Denoで任意のスクリプトを実行 w 環境変数とフラグを追加して、Denoでの  OpenTelemetryを有効H w OpenTelemetryを有効化することで、OpenTelemery用の  エンドポイント（デフォルトはlocalhost:4318）に  スクリプト実行時に何かしらのデータを送信するように

Slide 17

Slide 17 text

Denoで任意のスクリプトを実行 my_script.tsは以下のような内S f Deno.serve()でHTTPサーバーを起C f リクエストを受け取ったら、fetch()を実行して  外部にリクエストを送" f fetch()の返り値をレスポンスとして返す

Slide 18

Slide 18 text

DockerでOTel用コンテナを起動 grafana/otel-lgtmって  どんな構成なんじゃろ...?

Slide 19

Slide 19 text

DockerでOTel用コンテナを起動 https://grafana.com/blog/2024/03/13/an-opentelemetry-backend-in-a-docker-image-introducing-grafana/otel-lgtm/

Slide 20

Slide 20 text

DockerでOTel用コンテナを起動 https://grafana.com/blog/2024/03/13/an-opentelemetry-backend-in-a-docker-image-introducing-grafana/otel-lgtm/ DockerでOTel用コンテナを起動 v Prometheus→メトリクスを収集するDh v ⁨⁩Tempo→トレースを収集するDh v Loki→ログを収集するDh v localhost:4318に送信することで、  データを保存してくれてそV v localhost:3000にアクセスすることで、  Grafanaを介してデータを参照できそうみたいな構成っぽい

Slide 21

Slide 21 text

È 計測結果を確認する @ localhost:3000にアクセスするとGrafanaのUIが表示される

Slide 22

Slide 22 text

È 計測結果を確認する @ localhost:3000にアクセスするとGrafanaのUIが表示される Lokiをみると、console.logで出力されたログが見れた

Slide 23

Slide 23 text

È 計測結果を確認する @ localhost:3000にアクセスするとGrafanaのUIが表示される Traceなるもの  が見れる

Slide 24

Slide 24 text

ここまでのまとめ u DenoでOpenTelemetryを有効にすると、  任意のエンドポイントへ何かしらのデータを  送信してくれ6 u データの送信先（grafana/otel-lgtmのような）  があれば、データを保存してくれるし、そのデータを  いろんな観点で確認できた

Slide 25

Slide 25 text

ざっくり動くものはイメージはできたので、 OpenTelemetryの  公式ドキュメントを読んでみる https://opentelemetry.io/ja/

Slide 26

Slide 26 text

公式ドキュメントを読んでみて m Otelはアプリケーションの状態を知るための仕様が  定められてるって印X m この仕様にはアプリの状態を知るための情報を  どのように生成、収集、管理、送信するかを定めてH m 仕様だからベンダーやツールに依存しな( m 仕様に合わせてツールが作られてH m 統一された仕様があることで、マイクロサービスなど  複数システムを跨ぐようなリクエストの流れを  一貫して追える

Slide 27

Slide 27 text

https://grafana.com/blog/2024/03/13/an-opentelemetry-backend-in-a-docker-image-introducing-grafana/otel-lgtm/ ここに統一の仕様  (データ形式など)  があることで統一の仕様を前提にツールが作れる公式ドキュメントを読んだ後のイメージ

Slide 28

Slide 28 text

アプリの状態を可視化するために可視化する情報（シグナル？テレメトリ？）のカテゴi G トレー9 G リクエストの経d G メトリク9 G 実行時に取得できる測定& G ロV G 任意のメタデータを含むタイムスタンプ付きの  テキスト

Slide 29

Slide 29 text

トレースとは 1つのリクエストが辿った経路を記録する図はclaudeさんに作ってもらった

Slide 30

Slide 30 text

DenoでOpenTelemetryを有効にすることでこれらを自動で収集できる（自動計装）

Slide 31

Slide 31 text

Denoで収集できるもの 6 トレーW 6 ⁨⁩Deno.serveでのHTTPリクエスD 6 fetchを使ったHTTPリクエスD 6 メトリクW 6 Deno.serveによるリクエストの時間や$ 6 リクエストのbodyサイ 6 ロ3 6 console.*で作成されたロ3 6 Denoによって作成されたログ

Slide 32

Slide 32 text

感想

Slide 33

Slide 33 text

自動計装による  導入の手軽さがとても良い！

Slide 34

Slide 34 text

という話が、昨日ブログで公開されてた https://docs.deno.com/runtime/fundamentals/open_telemetry/ Node.jsにOtelを追加するには8つの依存と84行のコードを追加し、  ログ出力は独自で実装したものに置き換える必要があったそれが1つのコマンドで実現できるようになるよ。そう、Denoならね⁨⁩⁨⁩  （意訳）

Slide 35

Slide 35 text

Otel調べるのなんか腰が重かったけども... DenoでOtelがサポートされるって聞いて Otelをすごく身近に感じられた（し、実際サッと調べられた）

Slide 36

Slide 36 text

余談 b @opentelemetry/apiを使うことで独自のトレースや  メトリクスを収集でき# b ログは任意のメタデータを含められ# b ってことはOtelに則ってCore Web Vitalsも収集できそうa b みたいなことを探求してきたい

Slide 37

Slide 37 text

おわり