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
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
一人でちいさくはじめる Platform Engineering
syossan27
4
3k
一人SREが歩んだPlatform Engineeringスモールスタート実践録 ~ クラウドネイティブ会議版 ~
syossan27
4
2.3k
プロポーザル サポートガイドを読み解いていこう!
syossan27
3
1k
幻滅期を越える サイトリライアビリティ エンジニアリング
syossan27
1
270
一人SREが歩んだ Platform Engineering スモールスタート実践録
syossan27
2
2k
SREって何? 現場で学んだサイト信頼性の第一歩
syossan27
5
1.7k
知識0からカンファレンスやってみたらこうなった!
syossan27
5
790
突然のメモリ使用率上昇へ対応! k8sカスタムコントローラー開発事例
syossan27
2
590
最先端を追う前に、まず広めよう! 〜AIツールの普及活動のすすめ〜
syossan27
2
1.6k
Other Decks in Programming
See All in Programming
From 6 People Classroom Meetup to 100 People Regional Conference / FOSS4G Hiroshima 2026
furukawayasuto
0
110
新卒PdEのリアル
ryu1013
1
420
XHTMLが残したもの
yosuke_furukawa
PRO
2
420
GraphRAGのKnowledge Graphを 直接!見る/View-GraphRAG's-KnowledgeGraph-directly!
tyumugi1113
0
240
Gmail/Google DriveをトリガーにAIエージェントを動かそう! / Run AI agents with Gmail/Google Drive as triggers!
har1101
3
470
Press start. Python's next generation.
willingc
PRO
3
310
PyConJP2026_wat_Python × Signal Processing: How to Draw Pictures with Sound Using Spectrogram Art
wat
0
670
LL言語やWebフレームワークのPostgreSQL対応 〜DBの機能がユーザーに届くまで〜
kentaroutakeda
0
140
AI時代に学ぶ 好きなルール 嫌いなルール Linter編
shorty5121
0
870
片田舎のおっさん、 Swift Buildのダイアモンド問題解決の不具合修正PRを出すが、解決方法がキャッシュをしないようにすることであり、ビルド時間が伸びると言われてマージされないので高速化もする/swiftbuild
yimajo
0
360
業務時間外もAIに働いてもらう話
colorful12
3
10k
GKE アップグレード前に知っておきたい Blue/Green と PDB の関係
stkk
0
160
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
232
55k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
490
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
510
Crafting Experiences
bethany
1
300
The #1 spot is gone: here's how to win anyway
tamaranovitovic
3
1.2k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
320
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.6k
Darren the Foodie - Storyboard
khoart
PRO
3
3.9k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
440
Skip the Path - Find Your Career Trail
mkilby
1
220
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
440
More Than Pixels: Becoming A User Experience Designer
marktimemedia
3
520
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 ご清聴ありがとうございました