2024年5月24日に、ウェビナー「Webフロントエンドの新定番!?Sentryが攻略するエラーの迷宮 part1」を開催いたしました!

 

ソニックムーブで働く3名のエンジニアメンバーより、 エラーモニタリングツールとしてのSentryの実力を実際の事例を交えてご紹介。

 

  • Sentryの概要
  • Alerts機能
  • Session Replay機能

 

今回は、そのレポートをスライド資料・動画とともにお届けします。

Sentryって何?

まずはじめに、フロントエンドユニットマネージャーの原より、Sentryの概要についてご説明しました。

 

Sentryはアプリケーションのエラー監視やパフォーマンス計測などが行えるアプリ監視ツールです。

Sentryとはアプリ監視プラットフォームで、エラー監視・パフォーマンス計測が主要機能です。

その他、エラー監視、パフォーマンス計測、Session Replayなどの機能があります。
これまでフロントエンドでのエラー監視は困難でしたが、Sentryの導入でそれが可能となります。また、エラーに関するさまざまな情報を収集できるので、エラーの解決に役⽴てられます。まさに「Webフロントエンドの新定番!?」となるかもしれません。

 

Sentryの導入方法は、環境に応じたSentry SDKをインストールして、Sentry上でプロジェクトを作成し、設定を追加するだけというシンプルなものです。Sentryは多くのプラットフォームに対応しており、お客様に安定した価値提供をすることができます!

Senrty SDKをインストールし、Sentry上でプロジェクトを作成し、設定を追加するだけで導入ができます。

スライドはこちら

SentryのAlerts機能を活用しよう

次に、フロントエンドエンジニアの森よりSentryのAlerts機能についてご紹介。

Sentryをさらに活用するためには、「必要なエラー」を「必要な場所」に報告するような設定が不可欠です。不要なエラーも含めて全て報告されていると、いずれ誰も気に留めなくなってしまう…というのは、業務を遂行するエンジニアだからこそ予想できてしまう課題です。
そこで、解決策の一例として、Alerts機能を利用しカスタムエラー通知を作成、Slack上で通知する方法をご紹介しました。

SentryのAlerts機能を使うと、重要度の高いエラーを自由にフィルタリングして報告できます。

SentryのAlerts機能では、エラーの環境や緊急性、報告頻度、タグを自由にフィルタリングして、必要なエラーを必要な場所に報告することができます。カスタムエラー通知を作成することもできます。また、IntegrationとAlertsを併用して、特定の通知をSlackに送ることで、各メンバーに適した情報を送ることができます。例えば、ユーザーに影響が出ない破壊的でないエラーの場合、エンジニアメンバーがいるチャンネルにのみ通知することができます。

IntegrationとAlertsを併用して特定の通知をSlackに送ることで、Sentryのコンソールをわざわざ見に行かなくてもよく、各メンバーに適した情報を送れます。

スライドはこちら

SessionReplays

最後に、フロントエンドエンジニアの荒井よりSession Replay機能をご紹介しました。

エラー発生前後にユーザーが起こした行動が把握できず、エラー挙動の再現が難しい…という問題が、現場でよく起こってはいないでしょうか。Session Replay機能を利用すると、エラーが起きた時の、ユーザーの行動・アプリケーションの挙動の、動画キャプチャのようなものが生成できます。
これにより、再現や再現のためのヒアリングなどに要していた手順ががかなり省略され、工数を大幅に削減することが期待できます。

ユーザーがアプリケーション内で操作した内容を動画キャプチャのようにして生成してくれた結果のスクリーンショット。

また、Dead ClicksやRage Clicks、接続元IPアドレスやエラーの数などが確認できる詳細画面もあります。

sessionreplay詳細画面のキャプチャ

 

スライドはこちら

https://www.docswell.com/s/sonicmoov/KVVG1J-sentry_1-3

まとめ

Sentryとは何か、どういった機能があるのかについて、3名のメンバーよりご紹介いたしました。
当日は、質問やコメントもいくつか頂戴して、活気のある勉強会となりました!

Youtubeにて勉強会の様子を録画した動画を公開しております。

 

 

また、当ブログにも、登壇者の森によるSentry導入についての記事がありますので、ぜひご覧ください。
【Nuxt3】Sentryを使ってフロントエンドのエラー監視を強化しよう!

 

勉強会は継続して実施していく予定です。今後ともどうぞよろしくお願いいたします!

ソニックムーブのconnpassはこちら

 

ソニックムーブは一緒に働くメンバーを募集しています

Wantedlyには具体的な業務内容のほかメンバーインタビューも掲載しております。ぜひご覧ください。

あわせて読みたい記事