コンテンツにスキップ

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 で認証トークンを作成できます。

:::note新しい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に送信します。

セットアップのテスト

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

<button onclick="throw new Error('This is a test error')">Throw test error</button>

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

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

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