Claude Code の利用状況を OpenTelemetry で Grafana Cloud に流して手元で確認する

Claude Code の利用状況を OpenTelemetry で Grafana Cloud に流して手元で確認する
Article actions
View in Markdown

Requires Chrome (latest) built-in AI.

Requires Chrome (latest) built-in AI.

Claude Code を一日どれくらい使っているのか、トークンやコストを数字で見たくなりました。調べると OpenTelemetry(OTel)でメトリクスを出せると分かったので、Grafana Cloud に直接流して、手元の Mac で確認できるところまでやってみました。

Claude Codeの利用状況はOTelで送信できる

Claude Code は OTel 計装を内蔵していて、CLAUDE_CODE_ENABLE_TELEMETRY=1 を立てて送出先の環境変数を渡すと、メトリクスとイベントログをエクスポートできます。送出先には標準の OTEL_EXPORTER_OTLP_* をそのまま読みます。

Grafana Cloud 側でトークンと環境変数を出す

最初に送出先の値を Grafana Cloud から取得しましょう。

Grafana Cloud Portal にサインインすると、組織の Overview が開きます。

Grafana Cloud Portal の Overview 画面

少し下にスクロールすると、作成済みのスタックが並んでいます。対象スタックの Details を開きます。

Grafana Cloud Portal のスタック一覧。対象スタックの Launch / Details ボタン

スタックの管理画面(Manage Stack)に OpenTelemetry / Connect using OTLP protocol のタイルがあります。ここの Configure がメトリクスの送出設定の入り口です。

Manage Stack 画面。Grafana / Prometheus / Loki / OpenTelemetry のタイルが並び、OpenTelemetry に Configure ボタンがある

Configure を開くと、OTLP Endpoint が表示されます。東京リージョンのスタックでは次の形でした。

https://otlp-gateway-prod-ap-northeast-0.grafana.net/otlp

OTLP Endpoint 画面。otlp-gateway-prod-ap-northeast-0.grafana.net/otlp が表示されている

同じ画面の Password / API TokenGenerate now を押します。

Password / API Token セクション。Generate now のリンク

Create an API token のダイアログが開きます。スコープは metrics:write logs:write traces:write などが既定で付与され、アクセスポリシー名は stack-<Instance ID>-otlp-write の形で自動生成されます。トークン名は任意なので claude-code としておくと後で識別しやすいです。

Create an API token ダイアログ。トークン名 claude-code、スコープに metrics:write / logs:write / traces:write など

トークンを発行すると、画面下に Environment Variables のブロックが出ます。ここが目的地で、次のような3行が生成済みの状態でコピーできます。

export OTEL_EXPORTER_OTLP_PROTOCOL="http/protobuf"
export OTEL_EXPORTER_OTLP_ENDPOINT="https://otlp-gateway-prod-ap-northeast-0.grafana.net/otlp"
# Python requires "Basic%20" instead of "Basic "
export OTEL_EXPORTER_OTLP_HEADERS="Authorization=Basic <base64(InstanceID:token)>"

生成された Environment Variables のブロック。OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf、ENDPOINT、HEADERS=Authorization=Basic が並ぶ

HEADERS に入るのは glc_ で始まる生のトークンではありません。Basic 認証なので、Instance ID を username、glc_ トークンを password として InstanceID:token を base64 した文字列が Basic の後ろに入ります。この base64 化を画面がやってくれるので、生成された OTEL_EXPORTER_OTLP_HEADERS の行をそのまま貼れば済みます。

Mac の全シェルセッションに効かせて走らせる

環境変数を毎回手で打つのは面倒なので、新しいタブでも自動で効くようにします。

今回はトークンを含む値とそれ以外を分けて配置しました。トークンを .zshenv に直書きすると dotfiles を公開・git 管理したときに漏れるので、その2行だけ別ファイルに隔離するのが安全です。

まずトークン入りの値を、git 管理外の場所に隔離します。

mkdir -p ~/.config/claude
cat > ~/.config/claude/otel.env <<'EOF'
export OTEL_EXPORTER_OTLP_ENDPOINT="https://otlp-gateway-prod-ap-northeast-0.grafana.net/otlp"
export OTEL_EXPORTER_OTLP_HEADERS="Authorization=Basic <base64(InstanceID:token)>"
EOF
chmod 600 ~/.config/claude/otel.env

次に .zshenv に設定の本体と、隔離ファイルの読み込みだけを書きます。.zshenv は zsh が起動するたびに読まれるので、インタラクティブシェルでもログインシェルでも効きます。

cat >> ~/.zshenv <<'EOF'
# Claude Code -> Grafana Cloud OTLP
export CLAUDE_CODE_ENABLE_TELEMETRY=1
export OTEL_METRICS_EXPORTER=otlp
export OTEL_LOGS_EXPORTER=otlp
export OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf
export OTEL_EXPORTER_OTLP_METRICS_TEMPORALITY_PREFERENCE=cumulative
[ -f ~/.config/claude/otel.env ] && source ~/.config/claude/otel.env
EOF

ここで Claude Code 固有の指定が2つあります。OTEL_EXPORTER_OTLP_PROTOCOLhttp/protobuf にしているのは、Grafana Cloud のゲートウェイが https://.../otlp の HTTP エンドポイントだからです。公式クイックスタートにある grpclocalhost:4317 は自前 Collector 向けの値で、Grafana Cloud には通りません。OTEL_EXPORTER_OTLP_METRICS_TEMPORALITY_PREFERENCE=cumulative は、Claude Code のメトリクスが既定で delta temporality のためです。Grafana Cloud のメトリクスは Prometheus / Mimir ベースで cumulative を前提とするので、ここを delta のままにするとカウンタ系が期待通りに積み上がりません。

反映と確認をして、1セッション流します。

source ~/.zshenv
echo $CLAUDE_CODE_ENABLE_TELEMETRY        # 1
echo $OTEL_EXPORTER_OTLP_ENDPOINT         # gateway URL
echo ${OTEL_EXPORTER_OTLP_HEADERS:0:20}   # "Authorization=Basic " まで見えれば OK

claude -p "say hello"                      # 1 セッション分のメトリクスが出る

メトリクスは既定で60秒間隔のまとめて送出になるので、流した分が反映されるまで1〜2分待ちます。

Grafana の Explore でデータを見る

Grafana を開いて Explore に入り、データソースを選びます。Grafana Cloud では Prometheus種別の、grafanacloud-<stack>-promを見つけましょう。これがメトリクスの取り込み先です。

Explore のデータソース選択。grafanacloud-<stack>-prom(種別 Prometheus、default バッジ)が先頭にある

grafanacloud-<stack>-prom を選んでメトリクスを開くと、候補に次の名前が出ました。

  • claude_code_session_count_total
  • claude_code_token_usage_tokens_total
  • claude_code_cost_usage_USD_total

メトリクス選択。claude_code_cost_usage_USD_total、claude_code_session_count_total、claude_code_token_usage_tokens_total が候補に並ぶ

公式ドキュメントの表記は claude_code.session.countclaude_code.cost.usage です。OTLP から Prometheus に取り込まれる過程で、ドットがアンダースコアに変わり、単位(tokens / USD)と _total が付きます。公式の名前でクエリすると空振りするので、メトリクスブラウザで実際の名前を確認するのが確実です。

クエリビルダーで claude_code_session_count_total を選択した状態

claude_code_session_count_total を実行すると、値が 1 で返ってきました。ラベルには service_name="claude-code"service_versionstart_type="fresh"terminal_type="Apple_Terminal"session_iduser_email などが付いています。これで送出から取り込み、クエリでの取得までが確認できました。

claude_code_session_count_total の結果。値 1 のデータ点と、service_name=claude-code などのラベルが表示されている

イベントログ側を見るなら、Explore のデータソースを Loki 系(grafanacloud-<stack>-logs)に切り替えて {service_name="claude-code"} で引けます。

まとめ

Claude Code の OTel 出力を Grafana Cloud の OTLP gateway に直送するだけで、session / token / cost が手元の Explore で見えるようになりました。

要点は、Grafana Cloud の Configure 画面が生成する完成形の環境変数をそのまま使うこと、Claude Code 側で http/protobufcumulative を指定することです。

取り込みができたので、あとはどんな可視化ができるかを挑戦してみようと思います。

Share:

Hidetaka Okamoto profile photo

Hidetaka Okamoto

Developer Experience Engineer

Developer Experience Engineer. A developer specialized in serverless application development on AWS and Cloudflare. Former Stripe Developer Advocate / AWS Samurai 2017. Skilled in creating content and presentations that introduce service usage and best practices. You can follow me on Twitter at @hidetaka_dev

Related Articles

Claude CodeとClaude Projectを利用してサイトの改善計画をたてる

ウェブサイトの定期的な改善をする上で、いろんな視点でのレビューや検査があるのが理想です。今回は新しい切り口としてClaudeを使ったレビューと計画策定を試してみました。 Claude Codeを利用したサイトレビュー C [&hellip;]

Cursor AgentでWordPressプラグインのコードスキャンフローをCircleCIで動かす

サププライチェーン攻撃が原因と思われるセキュリティ事故のニュースが最近増えてきました。公開しているWordPressプラグインについても、セキュリティ対策をそろそろとるべきかと思い、簡単なスキャンフローをCursorにて [&hellip;]

CodeRabbitのAutofix(Beta)機能でレビュー項目を自動修正する

いつも通りCodeRabbitにレビューをさせていたところ、GitHubのPRに書かれているコメント内容が少し変化していることに気づきました。「Autofix(Beta)」セクションが追加されています。 説明をざっと読む [&hellip;]

KiroのProプランをFreeに戻した時の覚書

最近AIコーディング疲れを起こしている感じもあり、使用頻度の低いツールを解約したりダウングレードしています。今回はKiroをダウングレードしました。 Kiroのプラン変更はWebのダッシュボードから Kiroのプラン変更 [&hellip;]