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
1
220
DenoでOpenTelemetryに入門する
nus3
March 13, 2025
Tweet
Share
More Decks by nus3
See All by nus3
WebDriver BiDiとは何なのか
yotahada3
1
170
コンポーネントテストの手法と その効果を考える
yotahada3
8
1.5k
フロントエンドクイズ大会
yotahada3
0
71
Node.jsのWorker threadsの話
yotahada3
1
900
ワタシとPodcast
yotahada3
2
1.2k
Do you like Storybook?
yotahada3
2
4.2k
10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり
yotahada3
3
790
App Runner & Next.js
yotahada3
0
130
frontend-couse03
yotahada3
1
110
Other Decks in Programming
See All in Programming
もう一人で悩まない! 個の知見をチームの知見にする3つの習慣と工夫 / Into team knowledge.
honyanya
3
460
エンジニアに許された特別な時間の終わり
watany
84
72k
保守性を高める AWS CDK のセオリー・ベストプラクティス
yamanashi_ren01
5
670
ローコードサービスの進化のためのモノレポ移行
taro28
1
210
ステートソーシング型イベント駆動の視点で捉えるCQRS+ES
shinnosuke0522
0
160
iOSでQRコード生成奮闘記
ktcryomm
2
180
やっと腹落ち「スプリント毎に動くモノをリリースする」〜ゼロから始めるメガバンクグループのアジャイル実践〜
sasakendayo
0
300
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
150
気がついたら子供が社会人になって 自分と同じモバイルアプリエンジニアになった件 / Parent-Child Engineers
koishi
0
210
技術好きなエンジニアが "リーダーへの進化" によって得たものと失ったもの
pospome
5
1.2k
オレを救った Cline を紹介する
codehex
16
15k
Scala 3 で GLSL のための c-like-for を実装してみた
exoego
1
140
Featured
See All Featured
Designing for humans not robots
tammielis
250
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Become a Pro
speakerdeck
PRO
26
5.2k
Documentation Writing (for coders)
carmenintech
69
4.7k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Statistics for Hackers
jakevdp
797
220k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
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 みたいなことを探求してきたい
おわり