【入門編】Sentryの「Replays(セッションリプレイ)」機能でユーザーの操作画面を再現してデバッグする – 運用監視・オブザーバビリティ活用バイブル

こんにちは!プロダクトの開発現場で、日々エラーとの格闘にお疲れ様です。

「ユーザーから『なんか画面が固まって動かないんです』と言われた。でも、手元の開発環境で再現させようとしても、エラーログには `TypeError: Cannot read properties of undefined` とだけ出ていて、一体ユーザーがどんな神業的な操作をしたのかサッパリ分からない……」

夜中にこんなバグ報告を受けて、天井を見上げた経験はありませんか?私は何度も有ります。

そんな現代のフロントエンド開発における「デバッグの迷宮」を、一撃で光の彼方に吹き飛ばしてくれるのが、今回ご紹介する Sentryの「セッションリプレイ(Replays)」機能 です。

これをマスターすれば、「ユーザーが何をポチったか分からない」という恐怖から解放され、毎日の保守作業が劇的に楽になりますよ。さあ、一緒にその扉を開けてみましょう!

—

1. セッションリプレイ機能の概要とプライバシー配慮の仕組み

セッションリプレイとは何か?

セッションリプレイとは、一言で言うと「ユーザーのWebブラウザ上での操作を、まるでビデオカメラで撮影したかのように動画(風)で再現する機能」です。

従来のSentryは、「どこで・どんなエラーが起きたか(スタックトレース)」を教えてくれましたが、リプレイ機能はその前後にユーザーが「どのボタンを押し、どこへスクロールし、どんなテキストを入力したか」を視覚的に追体験させてくれます。

「でも、パスワードや個人情報が盗まれるんじゃ…?」という懸念

ここで鋭いエンジニアなら、「画面をそのまま録画するなんて、ユーザーの入力したパスワードやクレジットカード番号がSentryのサーバーに丸見えになるのでは?」と心配するはずです。当然の懸念ですね。

ご安心ください。Sentryのセッションリプレイは、デフォルトで鉄壁のプライバシー保護が組み込まれています。

1. テキストのマスク(隠蔽): デフォルトですべてのテキスト入力(`` や `