Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
DenoでOpenTelemetryに入門する
Search
nus3
March 13, 2025
Programming
610
2
Share
DenoでOpenTelemetryに入門する
nus3
March 13, 2025
More Decks by nus3
See All by nus3
フロントエンド刷新 4年間の軌跡
yotahada3
0
600
WebDriver BiDi 2025年のふりかえり
yotahada3
1
700
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
8
2.8k
WebDriver BiDiとは何なのか
yotahada3
1
970
コンポーネントテストの手法と その効果を考える
yotahada3
8
1.9k
フロントエンドクイズ大会
yotahada3
0
160
Node.jsのWorker threadsの話
yotahada3
1
1.5k
ワタシとPodcast
yotahada3
2
2k
Do you like Storybook?
yotahada3
2
4.6k
Other Decks in Programming
See All in Programming
Geminiをパートナーに神社DXシステムを個人開発した話(いなめぐDX 開発振り返り)
fujiba
0
130
Linux Kernelの1文字のミスで 権限昇格ができた話
rqda
0
2.2k
ロボットのための工場に灯りは要らない
watany
12
3.3k
ファインチューニングせずメインコンペを解く方法
pokutuna
0
220
S3ストレージクラスの「見える」「ある」「使える」は全部違う ─ 体験から見た、仕様の深淵を覗く
ya_ma23
0
1.2k
ネイティブアプリとWebフロントエンドのAPI通信ラッパーにおける共通化の勘所
suguruooki
0
230
存在論的プログラミング: 時間と存在を記述する
koriym
5
710
20260313 - Grafana & Friends Taipei #1 - Kubernetes v1.36 的開發雜記:那些困在 Alpha 加護病房太久的 Metrics
tico88612
0
240
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
o8n
4
1.4k
安いハードウェアでVulkan
fadis
1
850
車輪の再発明をしよう!PHP で実装して学ぶ、Web サーバーの仕組みと HTTP の正体
h1r0
2
470
The free-lunch guide to idea circularity
hollycummins
0
390
Featured
See All Featured
The agentic SEO stack - context over prompts
schlessera
0
720
Being A Developer After 40
akosma
91
590k
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
1
320
A Tale of Four Properties
chriscoyier
163
24k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
79
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.2k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
110
Scaling GitHub
holman
464
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
How Software Deployment tools have changed in the past 20 years
geshan
0
33k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.7k
Transcript
2025/03/14 toranoana.deno #20 DenoでOpenTelemetryに 入門する
nus3(なすさん) サイボウズ所属 フロントエンド刷新と格闘する日々を過ごして、もうすぐ4年になります
はじめに
業務でもプライベートでも Denoを使わせてもろてます
Denoの好きなところ U 開発に必要なものがビルトインされているので、 やりたいことをすぐに始められるとこ% U Linter、Formatter、テスト、型(tsconfig U ロゴが、かあいA U グッズも、かあいい
2023年のDeno Festでの戦利品たち 余談だけどもGo (Gopherくん) も同じ理由でも好き
そんなDenoのv2.2が 先日リリース
https://deno.com/blog/v2.2
OpenTelemetry ... 言葉は見たことあるが ナニモワカラン この子はウチのマスコットのハシコウくん
ナニモワカランが Denoにビルトインされた ということは...
Denoの好きなところ 開発に必要なものがビルトインされているので Linter、Formatter、テスト、型(tsconfig% ロゴが、かあい8 グッズも、かあいい 、
やりたいことをすぐに始められるとこu 2023年のDeno Festでの戦利品たち 余談だけどもGo(Gopherくん)も好き
Denoをきっかけに OpenTelemetryに 入門できる!!
ナニモワカラン状態から DenoでOpenTelemetryを 試してみる
Denoのドキュメントにある OpenTelemetryのQuick start をやってみる
https://docs.deno.com/runtime/fundamentals/open_telemetry/
Quick start H9 Denoで任意のスクリプトを実1 09 DockerでOpenTelemetry用コンテナを起 9 計測結果を確認する
Denoで任意のスクリプトを実行 w 環境変数とフラグを追加して、Denoでの OpenTelemetryを有効H w OpenTelemetryを有効化することで、OpenTelemery用の エンドポイント(デフォルトはlocalhost:4318)に スクリプト実行時に何かしらのデータを送信するように
Denoで任意のスクリプトを実行 my_script.tsは以下のような内S f Deno.serve()でHTTPサーバーを起C f リクエストを受け取ったら、fetch()を実行して 外部にリクエストを送" f fetch()の返り値をレスポンスとして返す
DockerでOTel用コンテナを起動 grafana/otel-lgtmって どんな構成なんじゃろ...?
DockerでOTel用コンテナを起動 https://grafana.com/blog/2024/03/13/an-opentelemetry-backend-in-a-docker-image-introducing-grafana/otel-lgtm/
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を介してデータを参照できそう みたいな構成っぽい
È 計測結果を確認する @ localhost:3000にアクセスするとGrafanaのUIが表示される
È 計測結果を確認する @ localhost:3000にアクセスするとGrafanaのUIが表示される Lokiをみると、console.logで出力されたログが見れた
È 計測結果を確認する @ localhost:3000にアクセスするとGrafanaのUIが表示される Traceなるもの が見れる
ここまでのまとめ u DenoでOpenTelemetryを有効にすると、 任意のエンドポイントへ何かしらのデータを 送信してくれ6 u データの送信先(grafana/otel-lgtmのような) があれば、データを保存してくれるし、そのデータを いろんな観点で確認できた
ざっくり動くものはイメージはできたので、 OpenTelemetryの 公式ドキュメントを読んでみる https://opentelemetry.io/ja/
公式ドキュメントを読んでみて m Otelはアプリケーションの状態を知るための仕様が 定められてるって印X m この仕様にはアプリの状態を知るための情報を どのように生成、収集、管理、送信するかを定めてH m 仕様だからベンダーやツールに依存しな( m
仕様に合わせてツールが作られてH m 統一された仕様があることで、マイクロサービスなど 複数システムを跨ぐようなリクエストの流れを 一貫して追える
https://grafana.com/blog/2024/03/13/an-opentelemetry-backend-in-a-docker-image-introducing-grafana/otel-lgtm/ ここに統一の仕様 (データ形式など) があることで 統一の仕様を前提にツールが作れる 公式ドキュメントを読んだ後のイメージ
アプリの状態を可視化するために 可視化する情報(シグナル?テレメトリ?)のカテゴi G トレー9 G リクエストの経d G メトリク9 G 実行時に取得できる測定&
G ロV G 任意のメタデータを含むタイムスタンプ付きの テキスト
トレースとは 1つのリクエストが辿った経路を記録する 図はclaudeさんに作ってもらった
DenoでOpenTelemetryを 有効にすることで これらを自動で収集できる (自動計装)
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によって作成されたログ
感想
自動計装による 導入の手軽さがとても良い!
という話が、昨日ブログで公開されてた https://docs.deno.com/runtime/fundamentals/open_telemetry/ Node.jsにOtelを追加するには8つの依存と84行のコードを追加し、 ログ出力は独自で実装したものに置き換える必要があった それが1つのコマンドで実現できるようになるよ。そう、Denoならね (意訳)
Otel調べるのなんか腰が重かったけども... DenoでOtelがサポートされるって聞いて Otelをすごく身近に感じられた (し、実際サッと調べられた)
余談 b @opentelemetry/apiを使うことで独自のトレースや メトリクスを収集でき# b ログは任意のメタデータを含められ# b ってことはOtelに則ってCore Web Vitalsも収集できそうa
b みたいなことを探求してきたい
おわり