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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
nus3
March 13, 2025
Programming
2
600
DenoでOpenTelemetryに入門する
nus3
March 13, 2025
Tweet
Share
More Decks by nus3
See All by nus3
WebDriver BiDi 2025年のふりかえり
yotahada3
1
630
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
8
2.8k
WebDriver BiDiとは何なのか
yotahada3
1
910
コンポーネントテストの手法と その効果を考える
yotahada3
8
1.9k
フロントエンドクイズ大会
yotahada3
0
150
Node.jsのWorker threadsの話
yotahada3
1
1.5k
ワタシとPodcast
yotahada3
2
2k
Do you like Storybook?
yotahada3
2
4.6k
10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり
yotahada3
3
890
Other Decks in Programming
See All in Programming
登壇資料を作る時に意識していること #登壇資料_findy
konifar
5
2.1k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
180
CSC307 Lecture 15
javiergs
PRO
0
210
CSC307 Lecture 14
javiergs
PRO
0
450
nilとは何か 〜interfaceの構造とnil!=nilから理解する〜
kuro_kurorrr
3
1.6k
grapheme_strrev関数が採択されました(あと雑感)
youkidearitai
PRO
1
200
2026年は Rust 置き換えが流行る! / 20260220-niigata-5min-tech
girigiribauer
0
220
クライアントワークでSREをするということ。あるいは事業会社におけるSREと同じこと・違うこと
nnaka2992
1
290
「ブロックテーマでは再現できない」は本当か?
inc2734
0
1.1k
Claude Codeセッション現状確認 2026福岡 / fukuoka-aicoding-00-beacon
monochromegane
3
380
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
160
Rubyと楽しいをつくる / Creating joy with Ruby
chobishiba
0
200
Featured
See All Featured
From π to Pie charts
rasagy
0
140
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.7k
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
620
Navigating Weather and Climate Data
rabernat
0
130
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
250
ラッコキーワード サービス紹介資料
rakko
1
2.5M
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
190
Designing Experiences People Love
moore
143
24k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
260
YesSQL, Process and Tooling at Scale
rocio
174
15k
Docker and Python
trallard
47
3.8k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
270
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 みたいなことを探求してきたい
おわり