SentryでAstroサイトを監視する
Sentry は、開発者がリアルタイムで問題を特定、診断、解決するのに役立つ包括的なアプリケーション監視とエラー追跡サービスを提供します。
AstroとSentryのパートナーシップと、Astro開発環境に豊富なデバッグオーバーレイをもたらすSentryのSpotlight開発ツールバーアプリについて、ブログで詳しく説明しています。Spotlightは、ローカル開発中にエラー、トレース、重要なコンテキストをブラウザに直接表示します。
SentryのAstro SDKにより、Astroアプリケーションでエラーとトレースデータの自動レポートが可能になります。
プロジェクト設定
Section titled “プロジェクト設定”前提条件の包括的なリストは、Astro向けSentryガイドに記載されています。
インストール
Section titled “インストール”Sentryは、アプリケーションのランタイム内でSDKを使用してデータをキャプチャします。
Astro CLIで選択したパッケージマネージャー用の次のコマンドを実行して、SDKをインストールします。
npx astro add @sentry/astro
pnpm astro add @sentry/astro
yarn astro add @sentry/astro
astro CLIはSDKパッケージをインストールし、Sentryインテグレーションを astro.config.mjs
ファイルに追加します。
Sentryインテグレーションを設定するには、astro.config.mjs
ファイルで次の認証情報を提供する必要があります。
- クライアントキー (DSN) - Sentryプロジェクト設定の Client keys (DSN) でDSNを確認できます。
- プロジェクト名 - Sentryプロジェクト設定の General settings でプロジェクト名を確認できます。
- 認証トークン - Sentry組織設定の Auth tokens で認証トークンを作成できます。
新しいSentryプロジェクトを作成する場合は、プラットフォームとしてAstroを選択すると、SDKを設定するために必要なすべての情報が取得できます。
import { defineConfig } from 'astro/config';import sentry from '@sentry/astro';
export default defineConfig({ integrations: [ sentry({ dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0', sourceMapsUploadOptions: { project: 'example-project', authToken: process.env.SENTRY_AUTH_TOKEN, }, }), ],});
sourceMapsUploadOptions
を設定し、dsn
を追加すると、SDKはエラーとパフォーマンスイベントを自動的にキャプチャしてSentryに送信します。
セットアップのテスト
Section titled “セットアップのテスト”次の <button>
要素を .astro
ページのいずれかに追加します。これにより、手動でエラーをトリガーして、エラーレポートプロセスをテストできます。
<button onclick="throw new Error('This is a test error')">Throw test error</button>
記録されたエラーを表示して解決するには、sentry.io にログインしてプロジェクトを開きます。