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
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
900
一人でちいさくはじめる Platform Engineering
syossan27
4
3.2k
一人SREが歩んだPlatform Engineeringスモールスタート実践録 ~ クラウドネイティブ会議版 ~
syossan27
4
2.3k
プロポーザル サポートガイドを読み解いていこう!
syossan27
3
1.1k
幻滅期を越える サイトリライアビリティ エンジニアリング
syossan27
1
280
一人SREが歩んだ Platform Engineering スモールスタート実践録
syossan27
2
2.1k
SREって何? 現場で学んだサイト信頼性の第一歩
syossan27
5
1.7k
知識0からカンファレンスやってみたらこうなった!
syossan27
5
810
突然のメモリ使用率上昇へ対応! k8sカスタムコントローラー開発事例
syossan27
2
600
Other Decks in Programming
See All in Programming
SREの越境 / SRE Collaboration
y0hgi
2
300
KiroのSpecで「五目並べ」を作ってみる
satoshi256kbyte
1
360
自サークルのIdPからログアウトできるようになるまで
taiseiue
1
130
AWS CDKのカスタムリソースでContinuum(旧Security Agent)を実装した話 | Implementing Continuum (formerly Security Agent) via AWS CDK Custom Resource
akihisaikeda
2
140
個人開発者よ、Honoを使え(おじさんver)
tanahiro2010
2
160
パズルゲームの作り方 / how to make puzzle games
kaityo256
PRO
2
280
[ハンズオン]AIへの指示だけで「五目並べ」を作ってみよう
satoshi256kbyte
1
360
APNsからLive Activityを開始する話
yumnumm
0
160
Turning Architecture into Unit Tests in the AI Era (NSSpain XIV)
steliosf
PRO
1
140
更なる可用性を求めて、5年間運用したKotlinのアプリケーションをGoでリプレイスする話
ken_tunc
0
450
プロダクトコードからライブラリの境界を見つける
elmetal
PRO
0
110
iOS 27でニュースアプリはどう変わる!? 〜日経電子版の新機能対応と、開発事例から〜
lynnswap
7
13k
Featured
See All Featured
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
570
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
480
Product Roadmaps are Hard
iamctodd
55
13k
The SEO Collaboration Effect
kristinabergwall1
1
590
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
400
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
3
3.9k
Prompt Engineering for Job Search
mfonobong
0
500
Being A Developer After 40
akosma
92
590k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
840
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
2
320
GitHub's CSS Performance
jonrohan
1033
470k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
490
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 ご清聴ありがとうございました