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
660
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
DenoでOpenTelemetryに入門する
nus3
March 13, 2025
More Decks by nus3
See All by nus3
フロントエンド刷新 4年間の軌跡
yotahada3
0
1.3k
WebDriver BiDi 2025年のふりかえり
yotahada3
1
930
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
8
2.9k
WebDriver BiDiとは何なのか
yotahada3
1
1.1k
コンポーネントテストの手法と その効果を考える
yotahada3
8
2k
フロントエンドクイズ大会
yotahada3
0
170
Node.jsのWorker threadsの話
yotahada3
1
1.6k
ワタシとPodcast
yotahada3
2
2.2k
Do you like Storybook?
yotahada3
2
4.7k
Other Decks in Programming
See All in Programming
Semantic Version 単位で戦略を柔軟に変えて、パッケージアップデートを自動化する
daitasu
1
300
肥大化するレガシーコードに立ち向かうためのインターフェース分離と依存の逆転 / JJUG CCC 2026 Spring
hirokunimaeta
0
610
IBM Bobを活用したレガシーアプリの最新化
oniak3ibm
PRO
1
210
Make SRE Operations Easier with Azure SRE Agent
kkamegawa
0
7.8k
TypeScript+Orvalで実現する型安全かつ堅牢でスケーラブルなマルチチャネル通知基盤 / TSKaigi Night talks ~after conference~
d0riven
0
360
Vite+ Unified Toolchain for the Web
naokihaba
0
340
さぁV100、メモリをお食べ・・・
nilpe
0
150
ローカルLLMでどこまでコードが書けるか -拡張版 / How much code can be written on a local LLM Extended
kishida
12
4.4k
キャリア迷子上等 ─ "ない道"は自分で作ればいい
16bitidol
3
2.3k
「なぜそう決めたのか」を残し続ける仕組み ― Notion AI カスタムエージェント × Slack連携による設計判断の自動記録 - NIKKEI Tech Talk #47
niftycorp
PRO
0
230
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
mom0tomo
8
3.3k
技術記事、 専門家としてのプログラマ、 言語化
mizchi
13
6.5k
Featured
See All Featured
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
1
360
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
250
Leo the Paperboy
mayatellez
7
1.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
25k
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
The Pragmatic Product Professional
lauravandoore
37
7.3k
How to Talk to Developers About Accessibility
jct
2
250
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.1k
Designing Experiences People Love
moore
143
24k
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.7k
SEO for Brand Visibility & Recognition
aleyda
0
4.6k
The Curse of the Amulet
leimatthew05
2
13k
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 みたいなことを探求してきたい
おわり