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
一人でちいさくはじめる Platform Engineering
syossan27
4
3k
一人SREが歩んだPlatform Engineeringスモールスタート実践録 ~ クラウドネイティブ会議版 ~
syossan27
4
2.2k
プロポーザル サポートガイドを読み解いていこう!
syossan27
3
990
幻滅期を越える サイトリライアビリティ エンジニアリング
syossan27
1
270
一人SREが歩んだ Platform Engineering スモールスタート実践録
syossan27
2
2k
SREって何? 現場で学んだサイト信頼性の第一歩
syossan27
5
1.7k
知識0からカンファレンスやってみたらこうなった!
syossan27
5
780
突然のメモリ使用率上昇へ対応! k8sカスタムコントローラー開発事例
syossan27
2
580
最先端を追う前に、まず広めよう! 〜AIツールの普及活動のすすめ〜
syossan27
2
1.6k
Other Decks in Programming
See All in Programming
DynamoDBの基礎を振り返りながらベクトル検索機能を理解する
musan
3
260
PyO3 で既存 Python 評価器を Rust core 化する ー wasm-bindgen でブラウザにも配るための設計
kdash
1
270
まずはプロンプトガイドを読もう、話はそれからだ
kiakiraki
1
250
Swift愛好会と私(ウホーイ) / Swift Fan Club and Uhooi
uhooi
0
120
Discordを用いたラボオートメーション関連情報収集の自動化
noguhiro2002
0
490
GraphRAGのKnowledge Graphを 直接!見る/View-GraphRAG's-KnowledgeGraph-directly!
tyumugi1113
0
120
私のClaude Code活用法 (個人開発編) - PHPerKaigi mini #4(2026/08/24)
panda_program
1
200
ソフトウェアエンジニアにとっての生成AI - 特性を知って使い倒す / generative ai for software enginner
kishida
7
2.3k
業務時間外もAIに働いてもらう話
colorful12
3
9.8k
AI時代に学ぶ 好きなルール 嫌いなルール Linter編
shorty5121
0
770
AWS Step Functions 大規模並列の壁を越える / jaws-sonic-2026-niigata-step-functions
kasacchiful
PRO
0
210
kubernetes コンポーネント開発入門 / 新卒N年目の勉強会&交流会!〜〇〇への誘い〜 #n_study
mazrean
0
140
Featured
See All Featured
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
1.1k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
2.1k
Bootstrapping a Software Product
garrettdimon
PRO
306
120k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
840
The Invisible Side of Design
smashingmag
301
52k
How to Think Like a Performance Engineer
csswizardry
28
2.8k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
490
The Spectacular Lies of Maps
axbom
PRO
1
970
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
2
410
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 ご清聴ありがとうございました