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
2
350
DenoでOpenTelemetryに入門する
nus3
March 13, 2025
Tweet
Share
More Decks by nus3
See All by nus3
WebDriver BiDiとは何なのか
yotahada3
1
220
コンポーネントテストの手法と その効果を考える
yotahada3
8
1.6k
フロントエンドクイズ大会
yotahada3
0
79
Node.jsのWorker threadsの話
yotahada3
1
1k
ワタシとPodcast
yotahada3
2
1.3k
Do you like Storybook?
yotahada3
2
4.3k
10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり
yotahada3
3
800
App Runner & Next.js
yotahada3
0
140
frontend-couse03
yotahada3
1
120
Other Decks in Programming
See All in Programming
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
160
Bedrock×MCPで社内ブログ執筆文化を育てたい!
har1101
7
1.4k
Instrumentsを使用した アプリのパフォーマンス向上方法
hinakko
0
230
Cline with Amazon Bedrockで爆速開発体験ハンズオン/ 株式会社ブリューアス登壇資料
mhan
0
110
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
rkaga
4
1.2k
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
8
1.9k
状態と共に暮らす:ステートフルへの挑戦
ypresto
3
1.1k
Enterprise Web App. Development (1): Build Tool Training Ver. 5
knakagawa
1
120
Improve my own Ruby
sisshiki1969
0
100
KANNA Android の技術的課題と取り組み
watabee
0
170
API for docs
soutaro
3
1.6k
実践Webフロントパフォーマンスチューニング
cp20
45
9.9k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Documentation Writing (for coders)
carmenintech
69
4.7k
Gamification - CAS2011
davidbonilla
81
5.3k
Raft: Consensus for Rubyists
vanstee
137
6.9k
KATA
mclloyd
29
14k
Docker and Python
trallard
44
3.4k
Speed Design
sergeychernyshev
29
920
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
What's in a price? How to price your products and services
michaelherold
245
12k
Being A Developer After 40
akosma
91
590k
We Have a Design System, Now What?
morganepeng
52
7.5k
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 みたいなことを探求してきたい
おわり