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
監視 やばい
Search
syossan27
April 24, 2025
Programming
11k
12
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
監視 やばい
yabaibuki.dev #5の登壇資料です
https://livesense.connpass.com/event/349898/
syossan27
April 24, 2025
More Decks by syossan27
See All by syossan27
一人SREが歩んだPlatform Engineeringスモールスタート実践録 ~ クラウドネイティブ会議版 ~
syossan27
4
2k
プロポーザル サポートガイドを読み解いていこう!
syossan27
3
840
幻滅期を越える サイトリライアビリティ エンジニアリング
syossan27
1
230
一人SREが歩んだ Platform Engineering スモールスタート実践録
syossan27
2
1.9k
SREって何? 現場で学んだサイト信頼性の第一歩
syossan27
5
1.7k
知識0からカンファレンスやってみたらこうなった!
syossan27
5
730
突然のメモリ使用率上昇へ対応! k8sカスタムコントローラー開発事例
syossan27
2
560
最先端を追う前に、まず広めよう! 〜AIツールの普及活動のすすめ〜
syossan27
2
1.6k
Fanstaの1年を大解剖! 一人SREはどこまでできるのか!?
syossan27
2
870
Other Decks in Programming
See All in Programming
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
mom0tomo
8
3.4k
Language Server 使ってる? 〜VSCode と Zed の場合〜 / Are you using a Language Server? ~For VS Code and Zed~
handlename
0
820
[2026年度第1回ORセミナー] 計画最適化ベンチャーと競技プログラミング人材
terryu16
0
280
ローカルLLMでどこまでコードが書けるか -縮小版 / How much code can be written on a local LLM Shortened
kishida
2
150
jQueryをバージョンアップする前に使いたいjQuery Migrate
matsuo_atsushi
0
620
The Bowling Game- From Imperative to Functional Programming - Part 1
philipschwarz
PRO
0
160
Mujeres en SEO Summit 2026 - Greatest Disaster Hits en Web Performance
guaca
0
220
ランチタイムLT会3周年!ランチタイムLT会を3年間続けられたお話
y0hgi
1
120
「AIで開発し、AIを届ける」をEvalでつなぐ 〜AIネイティブに始めるプロダクト開発の実践〜 / Connecting "Develop with AI, deliver AI" with Eval
rkaga
4
5.6k
ローカルLLMを使ってB2Bサービスを作っていての学び
yaotti
0
220
LLM本来の能力を解き放つサンドボックス技術とAI民主化への適用
yukukotani
3
4.7k
AIキャラアプリkaiwaの低遅延音声通話基盤をどう作ったか - AWS Gravitonで支える低遅延・低コストAI Agent基盤
mogamit
0
140
Featured
See All Featured
Statistics for Hackers
jakevdp
799
230k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.5k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
62
44k
Agile that works and the tools we love
rasmusluckow
331
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
2k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
180
Speed Design
sergeychernyshev
33
1.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
3.6k
Optimising Largest Contentful Paint
csswizardry
37
3.7k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
1
400
What's in a price? How to price your products and services
michaelherold
247
13k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Transcript
©MIXI 監視 やばい 株式会社MIXI 井上 翔太
©MIXI 自己紹介 名前:しょっさん X(旧: Twitter)/ mixi2:@syossan27 所属:MIXI 活動: • SRE
Kaigi • SRE Magazine • ゆるSRE勉強会
©MIXI やばい
©MIXI 監視が
©MIXI 2024年 未だに地道な監視しかできていない ことに焦っていた・・・
©MIXI 地道にやっている例 承知! なんか最近サービスが遅いな〜って感じるので、どの辺 が原因なのか調査してくれない?
©MIXI 地道にやっている例 フロントエンドとバックエンド、それぞれの ログで遅くなっているところがないかチェッ クして、見つかったらそのアクセスでリクエ ストされたログを全てチェックして・・・
©MIXI 地道にやっている例 フロントエンドとバックエンド、それぞれのログで遅く なっているところがないかチェックして、見つかったら そのアクセスでリクエストされたログを全てチェックし て・・・ やばい!
©MIXI んじゃ楽するために行動しま しょ
©MIXI OTel × Cloud Traceを導入するぞ!!!!! • フロントエンド/バックエンドの一貫したTraceを収集することで、 1リクエストに対する全体の処理時間やボトルネックの特定を容易にする • リクエスト全体の総処理時間ごとの可視化
• SpanとLogがつながっていることで、Spanごとの詳細な動きがすぐに追える • Traceに属性を追加することによる拡張性 メリット
©MIXI OTel × Cloud Traceを導入するぞ!!!!! • フロントエンド/バックエンドの一貫したTraceを収集することで、 1リクエストに対する全体の処理時間やボトルネックの特定を容易にする • リクエスト全体の総処理時間ごとの可視化
• SpanとLogがつながっていることで、Spanごとの詳細な動きがすぐに追える • Traceに属性を追加することによる拡張性 メリット • めんどい デメリット
©MIXI 実装するぞ!!!!!
©MIXI 実装: フロントエンド Next.jsで組まれたフロントエンド に手動計装 Point Default Spanを無効化 • 不要なSpanがあったりなので、無効化した
• Samplerを用いて、 next.span_type を含むSpan を除外 class CustomSampler implements Sampler { shouldSample( _context: Context, _traceId: string, _spanName: string, _spanKind: SpanKind, attributes: Attributes ): SamplingResult { // next.span_typeが存在する場合は、 NextJSのDefault Spanなのでサンプリングしない if ("next.span_type" in attributes) { return { decision: SamplingDecision.NOT_RECORD, }; } return { decision: SamplingDecision.RECORD_AND_SAMPLED, }; } }
©MIXI 実装: フロントエンド Next.jsで組まれたフロントエンド に手動計装 Point Default Spanを無効化 • 不要なSpanがあったりなので、無効化した
• Samplerを用いて、 next.span_type を含むSpan を除外 Point CloudPropagatorでCloud Traceへ伝搬 • フロントエンドとバックエンドでTraceを繋げ る必要があるため、 opentelemetry-cloud-trace-propagator の CloudPropagatorで用いてTrace IDを送る // Cloud Traceで利用するために、 CloudPropagatorを使って X-Cloud-Trace-Contextの形式でTraceを伝搬させる const propagator = new CompositePropagator({ propagators: [new CloudPropagator()], }); propagation.setGlobalPropagator(propagator);
©MIXI 実装: バックエンド Railsで組まれたバックエンドに 自動計装 Point GraphQLに対応 • graphql-rubyを利用しているので、 ActiveSupport::Notifications
を用いてGraphQL でのtraceも取得する # graphql-rubyで発生するActiveSupport::Notificationsを利用する # ref: https://graphql-ruby.org/queries/tracing#activesupportnotifications trace_with(GraphQL::Tracing::ActiveSupportNotificationsTrace) notifications = [ 'lex.graphql', 'parse.graphql', 'validate.graphql', 'analyze_multiplex.graphql', 'analyze_query.graphql', 'execute_query.graphql', 'execute_query_lazy.graphql', 'execute_field_lazy.graphql', 'authorized_lazy.graphql', 'resolve_type.graphql', ] # デフォルトのNotificationsと上記のNotificationsをマージし て設定 config.google_cloud.trace.notifications = Google::Cloud::Trace::Railtie::DEFAULT_NOTIFICATIONS + notifications
©MIXI 実装: バックエンド Railsで組まれたバックエンドに 自動計装 Point GraphQLに対応 • graphql-rubyを利用しているので、 ActiveSupport::Notifications
を用いてGraphQL でのtraceも取得する # ログとTraceを紐付けるためのフィールド 'logging.googleapis.com/trace': "projects/[project-name]/traces/#{trace_id || ''}" , Point 構造化ログにtraceに関するフィールドを 追加 • 構造化ログに logging.googleapis.com/trace を付 け足すことで、Cloud Traceに該当するTrace ID にSpanを追加すると同時にログとの紐づけを行 う
©MIXI 実装: その他 Point opentelemetry-collectorの構築 • フロントエンドからCloud Traceへtraceを送出す るためにSidecarとして構築
©MIXI 実装: その他 Point バックエンド側のNGINXでヘッダー 編集 • X-Cloud-Trace-Contextからtrace_idを抽出し、 X-Request-Idヘッダーへ設定することで、 バックエンド側でtrace_idを扱えるようにする
# X-Cloud-Trace-Contextからtrace_idを抽出 map $http_x_cloud_trace_context $trace_id { ~^([0-9a-f]+)\/ $1; default $request_id; } log_format json escape=json '{' '"request_id":"$trace_id"' '}' Point opentelemetry-collectorの構築 • フロントエンドからCloud Traceへtraceを送出す るためにSidecarとして構築
©MIXI できたぞ!!!!
©MIXI ▪ Cloud Trace
©MIXI ▪ Cloud Trace - Span
©MIXI ▪ Cloud Trace - Span attributes
©MIXI まだまだ荒削りだが、一旦はOK
©MIXI 今後も"やばい"を撲滅していくぞ!
©MIXI ご清聴ありがとうございました