Sentry と Pinia との組み合わせで、Vue と Nuxt のエラートラッキングを強化する方法
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 に自動送信され、次のような情報が記録されます。 […]