コンテンツにスキップ

SentryでAstroサイトを監視する

Sentry は、開発者がリアルタイムで問題を特定、診断、解決するのに役立つ包括的なアプリケーション監視とエラー追跡サービスを提供します。

AstroとSentryのパートナーシップと、Astro開発環境に豊富なデバッグオーバーレイをもたらすSentryのSpotlight開発ツールバーアプリについて、ブログで詳しく説明しています。Spotlightは、ローカル開発中にエラー、トレース、重要なコンテキストをブラウザに直接表示します。

SentryのAstro SDKにより、Astroアプリケーションでエラーとトレースデータの自動レポートが可能になります。

前提条件の包括的なリストは、Astro向けSentryガイドに記載されています。

Sentryは、アプリケーションのランタイム内でSDKを使用してデータをキャプチャします。

Astro CLIで選択したパッケージマネージャー用の次のコマンドを実行して、SDKをインストールします。

ターミナルウィンドウ
npx astro add @sentry/astro

astro CLIはSDKパッケージをインストールし、Sentryインテグレーションを astro.config.mjs ファイルに追加します。

Sentryインテグレーションを設定するには、astro.config.mjs ファイルで次の認証情報を提供する必要があります。

  1. クライアントキー (DSN) - Sentryプロジェクト設定の Client keys (DSN) でDSNを確認できます。
  2. プロジェクト名 - Sentryプロジェクト設定の General settings でプロジェクト名を確認できます。
  3. 認証トークン - Sentry組織設定の Auth tokens で認証トークンを作成できます。
astro.config.mjs
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に送信します。

次の <button> 要素を .astro ページのいずれかに追加します。これにより、手動でエラーをトリガーして、エラーレポートプロセスをテストできます。

src/pages/index.astro
<button onclick="throw new Error('This is a test error')">Throw test error</button>

記録されたエラーを表示して解決するには、sentry.io にログインしてプロジェクトを開きます。

その他のバックエンドサービスガイド

貢献する コミュニティ スポンサー