Article by: Steven Eubank
本番環境で問題をデバッグする際に大切なのは、その瞬間のコンテキストです。
Sentry はすでにスタックトレースやパンくずリスト、ユーザー情報などの豊富なエラーデータを提供していますが、エラーが発生した時点でアプリケーションがどんな状態だったのかまでが分かれば、再現手順や修正方法が迅速に得られ、リリースに大きく役立ちます。
Sentry の Pinia 統合は、まさにそれを実現してくれる機能です。エラーが発生した時点で Pinia の状態を自動的にキャプチャするため、Vue または Nuxt アプリケーションでどんな問題が発生したのか詳細まで把握できます。
それでは、Vue および Nuxt アプリケーションで実際に導入する手順を確認していきましょう。
Sentryでショッピングカートの不具合も素早くデバッグ
Pinia のパイナップルロゴ🍍にインスパイアされた「Pineapple Paradise」というオンラインストアを例に挙げてご紹介します。
この Vue アプリでは、Pinia を使ってショッピングカートの状態を管理しています。
オンラインストアが期待通りに動作する方法を模倣していて、ユーザーは商品を閲覧し、ショッピングカートに追加します。アプリの状態管理は全て Pinia が担っています。
以下はショッピングカートの状態を管理するコードのシンプルな例です。
Vue アプリに Sentry と Pinia の統合を追加する
Sentry のPinia統合をセットアップするのは、他のフレームワークと同様にとても簡単です。
main.js ファイルで、Sentry Vue SDK をインポートし、必要なオプションで init メソッドを呼び出し、次に pinia.use(createSentryPiniaPlugin()) を呼び出すように追加すれば完了です。
以下はその例です。
アプリの状態から不具合のコンテキストを見つける
例えば今、ユーザーが好きなパイナップル関連の商品でチェックアウトしようとした瞬間、サイトがクラッシュして購入を諦めてしまったとします。
このとき関連するすべてのコンテキストと共にエラーイベントが Sentry に自動送信され、次のような情報が記録されます。
- スタックトレース
ソースマップを使ってエラーに関連するソースコードを直接開けるようになっており、根本的な原因を迅速に特定できます。
- Pinia の状態
エラーが発生した瞬間のアプリケーションの状態も自動的に問題に添付されているため、どのような操作や状態が不具合に影響したのかが深く理解できます。
エラーが発生し、関連する問題を Sentry でデバッグすると、次のようになります。
コードと状態の両方が揃っていれば、原因特定とその修正がスムーズに行え、同じ状況を再現することも可能です。その確認が迅速に行えることで、解消したかどうかの確認もしやすくなります。
「必須モーダル」が引き起こす複雑な不具合
今やほとんどのWeb サイトに使われているモーダルですが、時にはこれがユーザー操作フローに欠かせない存在になることもあります。次にユーザーが利用規約に同意しないと予約できないシンプルな Nuxt アプリケーションをご紹介します。
この例では、訪問者が利用規約に同意したかどうか、そして（それにより）予約が可能かどうかという状態を管理するために Pinia が使用されています。
以下はその状態を管理するコードの簡易版です。
Nuxt アプリに Sentry と Pinia を統合する
Nuxt アプリケーションにPiniaを統合するのも、Vue と同様に簡単です。Pinia の状態データをキャプチャするには、クライアント側の Sentry 設定で integrations 配列に piniaIntegration を追加し、usePinia() を呼び出すように追加します。
Sentry タグの設定で、状態の追跡を簡単に
この例では、Sentry に送信するイベントにタグも設定しています。タグを活用することで、不具合が起きた際のイベントをフィルタリングしたり、トレース分析、Sentry でパフォーマンスデータを分析することが可能です。
Pinia の状態管理に基づいてタグを設定する方法をご紹介します。
ここでは、以下のようなユーザーの操作に基づいてタグを設定しました。
- モーダルウィンドウを見た
- 利用規約に同意した
- 利用規約を拒否した
この例においてタグを使用している理由は、アプリケーション全体にとってユーザーのすべての操作が重要であり、デバッグ中にどの情報が役立つかが常に明確でないためです。
これらのタグは、ユーザーが利用規約に同意したか拒否したかに応じて、どこでさらにデバッグを行う必要があるかを知るために十分な情報を提供してくれます。
Pinia の状態と Sentry タグを活用してフローを可視化する
このシナリオでは、Sentry を使って問題をデバッグする際に、エラーが発生した時点でユーザーがどのような状態だったかを確認することができます。
特に今回の例の問題をデバッグした際、以下の情報を活用しました。
- Sentry の問題とスタックトレース
先述と同様、Sentry が Nuxt SDK 経由で自動的にソースコードと不具合をリンク付し、ソースマップがアップロードされます。 - カスタムタグ
カスタムタグを使用するとイベントの整理や分類がしやすくなり、ダッシュボードを作成したり、アラートを設定したりできます。 - Pinia の状態
その瞬間のユーザー状態が添付され、何が起きていたのかが正確に把握できます。
エラーが発生し、関連する問題を Sentry で開いてデバッグを開始すると、次のように情報が整理されて表示されます。
Vue と Nuxt 開発をサポートする機能たち
最後に、Sentry が Vue や Nuxt で提供している他の機能についてもご紹介します。
アプリケーションの監視に役立つ機能が、Sentry にはまだまだあります。
- パフォーマンス監視とインサイト
パフォーマンスの問題から、フロントエンド、バックエンド、モバイル、AI向けの専門的なインサイトまで、Sentry はすべてをキャプチャします。 - セッションリプレイ
セッションリプレイは、ユーザーの操作をビデオのように再現し、さらにユーザーフィードバックと組み合わせるとさらに強力です。 - ユーザーフィードバック
アプリ内で直接ユーザーフィードバックを受け取る仕組みが、これまでになく簡単に実装できます。 - Vue に特化した機能
Sentryは、Pinia 以外にも Vue コンポーネントの追跡や Vue Router との連携、複数アプリ対応など機能に応じたサポートをしています。詳細はそれぞれの Vue および Nuxt のドキュメントをご覧ください。
Pinia 統合、はじめてみませんか？
準備ができたら、以下のドキュメントからぜひ導入を始めてみてください。
どちらのガイドにも、統合をカスタマイズするための設定オプションが含まれており、機密情報がキャプチャされないように保護する機能もあります。もし React と Redux を使っている場合は、Redux 統合 にも対応しています。
是非お試しください。フィードバックがあれば、Discord で連絡をいただくか、GitHub の Sentry の JavaScript SDK で問題を作成してお知らせください。
IchizokuはSentryと提携し、日本でSentry製品の導入支援、テクニカルサポート、ベストプラクティスの共有を行なっています。Ichizokuが提供するSentryの日本語サイトについてはこちらをご覧ください。またご導入についての相談はこちらのフォームからお気軽にお問い合わせください。
