Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
監視 やばい
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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
数値変えただけで年間約100万円コスト削減した話
syossan27
2
830
一人でちいさくはじめる Platform Engineering
syossan27
4
3.1k
一人SREが歩んだPlatform Engineeringスモールスタート実践録 ~ クラウドネイティブ会議版 ~
syossan27
4
2.3k
プロポーザル サポートガイドを読み解いていこう!
syossan27
3
1k
幻滅期を越える サイトリライアビリティ エンジニアリング
syossan27
1
280
一人SREが歩んだ Platform Engineering スモールスタート実践録
syossan27
2
2k
SREって何? 現場で学んだサイト信頼性の第一歩
syossan27
5
1.7k
知識0からカンファレンスやってみたらこうなった!
syossan27
5
800
突然のメモリ使用率上昇へ対応! k8sカスタムコントローラー開発事例
syossan27
2
590
Other Decks in Programming
See All in Programming
Androidだけじゃない、DroidKaigiで広がった私の技術スタック
akkeylab
0
100
コードレビューのボトルネックを"する側"と"される側"の両面から解消する
yub0n
1
540
Security issues being discussed on Web Platforms
petamoriken
0
1.3k
Java 27新機能 / Java 27 new features
kishida
2
180
Omarchy Tokyo やると聞いて UMPC 買ってセットアップしてきた
mtsmfm
0
180
ゲームコントローラやキーボードのファームウェアをSwiftで書く
kishikawakatsumi
1
270
Turning Architecture into Unit Tests in the AI Era (NSSpain XIV)
steliosf
PRO
1
120
App Storeの外へ──日本のiOSサイドローディング入門 for iOSDC Japan 2026
yuukiw00w
0
270
Verilogで学ぶCPU自作入門.pdf
uyuki234
8
3.8k
Augmenting AI with the Power of Jakarta EE
ivargrimstad
0
340
JAWS-UG 東京支部が始める、JAWS-UG支部コラボ / JAWS-UG lunchtime LT Collaboration
y0hgi
0
170
ソニーのクラウド共通基盤の変遷とAI時代の開発スタイルに合わせた進化 / The Journey of Sony’s Common Cloud Platform and Its Evolution for AI-Native Development
kenjiyoneyama
0
180
Featured
See All Featured
What does AI have to do with Human Rights?
axbom
PRO
1
2.4k
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
720
Rails Girls Zürich Keynote
gr2m
96
14k
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
490
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
1
430
Exploring the relationship between traditional SERPs and Gen AI search
raygrieselhuber
PRO
3
4.3k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
340
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
340
A designer walks into a library…
pauljervisheath
211
25k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
31k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
3
270
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 ご清聴ありがとうございました