あの厄介なバグがありますよね？ローカルでは再現できないアレです。 何度環境を再現しようとしても、再現できません。パンくずリストを調べ、スタックトレースを読み、サポートチケットをつなぎ合わせて、バグが本物であることを確認しなければなりません。
しかし、もう原因をより迅速に突き止めるためにキーボードを走らせ頭を悩ませる必要はありません。SentryはSession Replayをリリースしました。この機能は現在すべてのウェブベースのプラットフォームでご利用いただけます。
Session Replayは、ウェブアプリケーション上のユーザーセッションを動画のように再現します。エラーやパフォーマンスの問題に至るまでユーザーが経験したことを正確に確認でき、再現が困難な問題をより迅速にトリアージして解決するのに役立ちます。
Session Replayを始める準備はできましたか? リプレイの基本割り当てはすべての Sentryプランに含まれておりすぐにご利用可能です。追加のリプレイは10,000リプレイにつき月額29ドルからご購入いただけます。詳細については、料金ページをご覧ください。
パンくずリストとスタックトレースの先へ
Sentryのエラー追跡では、例外データを記録し、パンくずリスト、スタックトレース、コードの改行など、開発者たちが問題をトラブルシューティングできるように背景情報を表示しますが、それでも理解や再現が困難なタイプの問題もあります。
Session Replayでユーザーが辿った行程を視覚化できるため、コードと実際のユーザーエクスペリエンスの間のギャップを埋めて、問題がUIでどのように現れるかを理解できます。また、DOM イベント、ネットワークデータ、コンソールログ、パンくずリストなどの追加のデバッグ用背景情報を Replay機能に追加したため、最も苛立たしいバグやパフォーマンスの問題のトラブルシューティングに必要なものがすべて揃っています。
意味のあるデータを記録
世の中にあるほとんどのセッションリプレイ製品は、製品を使うユーザーセッションの何%かをランダムを記録します。これは、ユーザー分析や製品ファネルの理解が目的の場合は理にかなっていますが、主にソフトウェアの問題のデバッグを行う場合にはあまり意味がありません。
この方法では、再現したい複雑な問題に対応するリプレイに到達するまでに、1,000回のランダムなセッションを記録する必要が生じる場合があります。これは時間と費用の両方がかかります。
SentryのSession Replayは仕組みが異なります。一般的な方法でサンプリングをするオプションも提供していますが、ユーザーがエラーに遭遇したときのセッションを優先的にサンプリングするオプションも提供しています。これにより、トリッキーなバグが発生した場合に、そのバグに対応するリプレイが手配でき、この方法では、再現したい複雑な問題に対応するリプレイに到達するまでに、1,000回のランダムなセッションを記録する必要が生じる場合があります。
問題に便利に紐付けられています。必要なデータの取得に必要なつ時間が減り、イベントクォータを監視する不安が軽減されます。サンプリングとカスタマイズの詳細については、ドキュメントをご覧ください。
SentryのSession Replayを使用すると、エラーに対応するリプレイに集中でき、問題を迅速に確認し、リプレイを閲覧して15分で解決できます。以前は、同じ問題を解決するのに一日はかかっていたかも知れません。- Resistbot社 ソフトウェアエンジニア
プライバシーを第一に考えたアプローチ
セッションリプレイ系の製品には難しい問題があります。記録された HTML内のユーザーの秘密情報を誤って明らかにすることなく、貴重なデバッグコンテキストを提供するというバランスを取らなければなりません。情報を隠しすぎると、ユーザーがそのトリッキーなバグを引き起こした正確な方法を解読するのが難しくなります。情報を隠さなすぎると、機密データがユーザーのブラウザから流出する危険があります。
SentryのSession Replayは、コンテンツをデフォルトで安全でないものとして扱うことで、ユーザのプライバシーに有利になるような調整を行っています。すぐに使用できるすべてのHTML テキスト、画像コンテンツ、およびユーザーによる入力内容がユーザーのブラウザからサーバへ送信される前にマスクし、代わりに、リプレイに必要な既知の安全な HTMLコンテンツ (静的ナビゲーションやヘッダーリンクなど) をオプトインするように開発者に依頼します ）。この方法ではより多くのコンテンツがマスクされることにより、記録内容の忠実度がわずかに低下します。 しかし、ほぼ確実に、既知の安全なコンテンツのみがユーザーのブラウザから送信されます。
追加の防御策としてSession Replayは、個人情報スクラビングやIPリダクションなど、Sentryの他の製品と同じプロジェクトレベルのプライバシー設定を適用します。これにより、データが保存される前にエッジ取り込みサービスで機密コンテンツが削除されます。デフォルトで強力なプライバシー保護を導入することで、ユーザーの信頼を維持しながらデバッグエクスペリエンスを向上させることができます。
ヘルスケア企業として、個人情報や個人健康情報/PHIを適切に扱うことは、私たちや従業員にとって非常に重要です。Sentryは、この機密データがSession Replayで簡単に秘匿できるように調整してくれました。- Peppy、スタッフエンジニア デイブ・クリッドランド氏
問題の再現と解決をより迅速に。Replayがいかにエラーのトラブルシューティングに役立つか
実際に、Session Replayが開発者たちをどう支援するかを詳しく見るために、トラブルシューティングが困難なエラークラスの一つであるハイドレーションエラーを見てみましょう。 このクラスの問題は、Next.jsなどのハイブリッドレンダリングフレームワークに共通に見られ、サーバーが生成した HTMLがクライアント側のJavaScript が期待するものと一致しない場合に発生します。これにより、UIでコンテンツの不一致が発生し、本来不要なコンテンツの再フェッチと再レンダリングを引き起こします。
lablab.ai のLaszloがNext.jsプロジェクトでハイドレーションエラーに遭遇したとき、サーバーが生成したHTMLとクライアントのHTMLとが一致しない要素がページに何百もあったため、最初はデバッグが困難でした。またこの問題がユーザーにどう影響するかを理解するのは困難でした。そこでSession Replay の出番です。Laszloは、Replayを 一回見ただけで、コンソールログとリプレイのパンくずリストにハイドレーションエラーが表示され、ユーザーに対し誤って重複した画像が表示されていることに気付きました。
Session Replayは、これらのハイドレーションエラーを解決するのに役立ちました。Replayを使用すると、ページの壊れ具合を確認し、それに関わる要素を特定できるようになるため、手動でデバッグする時間を節約できます。- Laszlo Gaal, lablab.ai
遅さをを素早く修正する。Replayがパフォーマンスに関する問題を解決するためにどのように役立つか
レイテンシは新たな障害です。状態遷移が遅く、ロード中アイコンが無限に続き、不安定なエクスペリエンスの状況下では、エンドユーザーとの信頼関係を築くことはできません。しかし、パフォーマンスの高いアプリを維持しようと思っても、パフォーマンス関連の問題の再現とトラブルシューティングが困難な場合は、それは容易ではありません。
パフォーマンスに関連する一般的な問題は、サイトのページ読み込み速度の主な原因である LCP (最も大きなコンテンツの表示Largest Content Paint)のパフォーマンスの低さです。 通常、開発者がLCPが貧弱なフロントエンドトランザクションイベントを見つけても、そのトランザクションのLCP要素がどれかは分からず、ローカル環境でそれを再現するには時間と当て推量が必要です。Session replayを使用すると、開発者は特定のLCP要素が強調表示されたリプレイで速度低下を視覚的に確認できるため、パフォーマンスの低いLCP要素をすぐに特定し、パフォーマンスの問題を解決できます。
問題のトリアージ。Session Replayを使用してユーザーへの影響を確認する
Sentryは、コード所有者機能や [For Review]タブなどの機能により問題のトリアージを容易にしますが、依然としてトリアージは非常に手作業を要するプロセスになる可能性があります。 圧倒的な数のエラーに直面した場合 (誰もが経験しています)、開発チームは各エラーの重要性を評価し、それに応じて優先順位を付ける迅速な方法を必要としています。
SaRA Healthでは、創設者兼CEO のスティーブン自身が、5人の機敏なチームのために問題のトリアージを担当することがよくあります。Sentryが検知した各エラーの問題の詳細ページに埋め込まれているリプレイを見ることで、スティーブンは各エラーがユーザーエクスペリエンスにどのように影響するか、およびその問題を解決することがどれほど重要かをよりよく理解することができます。
Session Replayは、エラーがカスタマーエクスペリエンスに与える影響をすばやく確認し、重要性に基づいて優先順位を決めるのに役立ちます。私たちは小さなチームなので、迅速に動く必要があります。 Session Replayを使用すると、効果的にトリアージし、より自信を持って開発リソースを割り当てることができるため、時間、ユーザーエクスペリエンス、そして最終的にはお金を節約できます。 UIをシームレスに使用できるユーザーにビジネスモデルを依拠させている人は誰でも、Session Replayが必要になることは間違いありません。- スティーブン・コーエン、SaRA Health社
Session Replayは、再現が困難なエラーやトランザクションの問題の原因を切り分けて解決するための非常に便利なツールです。現在すべてのウェブベースのプラットフォームで利用でき、わずか数分でリプレイのキャプチャを開始できます。Sesion Replayを開始する準備ができたら、最新の Sentryプランを使用していることを確認し、価格ページを確認して必要なリプレイ数を決定してから、サブスクリプション設定に進んでリプレイ数を調整してください。開発者プラン、チームプラン、およびビジネスプランには追加料金なしで利用できるリプレイイベントの割り当てもあります。
まずもっと詳しく知りたいですか？私たちのウェブサイトとこのデモをチェックしてください。GitHub、Twitter、または Discord で私たちに連絡することもできます。また、Sentryを初めて使用する場合は、今すぐ無料で試すか、デモをリクエストして使い始めることができます。
Sentryは、アプリケーションコードの状態を監視するために不可欠なツールです。エラー追跡からパフォーマンス監視まで、開発者たちはフロントエンドからバックエンドに至るまで、より明確な解決策を迅速に確認し、アプリケーションについて継続的に学習できます。世界中の350 万人を超える開発者と 85,000を超える組織に愛されている Sentry は、Disney、Peloton、Cloudflare、Eventbrite、Slack、Supercell、Rockstar Games など、世界で最も有名な企業の多くにコードレベルの可観測性を提供しています。
IchizokuはSentryと提携し、日本でSentry製品の導入支援、テクニカルサポート、ベストプラクティスの共有を行なっています。Ichizokuが提供するSentryの日本語サイトについてはこちらをご覧ください。またご導入についての相談はこちらのフォームからお気軽にお問い合わせください。
