Surveillez votre site Astro avec Sentry

Sentry offre un service complet de surveillance des applications et de suivi des erreurs, conçu pour aider les développeurs à identifier, diagnostiquer et résoudre les problèmes en temps réel.

Pour en savoir plus, consultez notre blog sur le partenariat entre Astro et Sentry et la barre d’outils Spotlight de Sentry, qui apporte une riche couche de débogage dans votre environnement de développement Astro. Spotlight affiche les erreurs, les traces et le contexte important directement dans votre navigateur pendant le développement local.

Le SDK Astro de Sentry permet de signaler automatiquement les erreurs et les données de traçage dans votre application Astro.

Configuration du projet

Titre de la section Configuration du projet

Une liste complète des prérequis est disponible dans le guide Sentry pour Astro.

Installation

Titre de la section Installation

Sentry capture des données en utilisant un SDK dans le runtime de votre application.

Installez le SDK en exécutant la commande suivante pour le gestionnaire de paquets de votre choix dans le CLI Astro :

npm

npx astro add @sentry/astro

pnpm

pnpm astro add @sentry/astro

Yarn

yarn astro add @sentry/astro

Le CLI d’Astro installe le paquet SDK et ajoute l’intégration Sentry à votre fichier astro.config.mjs.

Configuration

Titre de la section Configuration

Pour configurer l’intégration de Sentry, vous devez fournir les informations d’identification suivantes dans votre fichier astro.config.mjs.

1. Client key (DSN) - Vous trouverez le DSN dans les paramètres de votre projet Sentry sous Client keys (DSN).
2. Project name - Vous trouverez le nom du projet dans les paramètres de votre projet Sentry sous General settings.
3. Auth token - Vous pouvez créer un jeton d’authentification dans les paramètres de votre organisation Sentry sous Auth tokens.

Note

Si vous créez un nouveau projet Sentry, sélectionnez Astro comme plateforme pour obtenir toutes les informations nécessaires à la configuration du SDK.

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,
      },
    }),
  ],
});

Une fois que vous avez configuré votre sourceMapsUploadOptions et ajouté votre dsn, le SDK capturera et enverra automatiquement les erreurs et les événements de performance à Sentry.

Testez votre installation

Titre de la section Testez votre installation

Ajoutez l’élément <button> suivant à l’une de vos pages .astro. Cela vous permettra de déclencher manuellement une erreur afin de tester le processus de rapport d’erreur.

src/pages/index.astro

<button onclick="throw new Error('cIl s'agit d'une erreur de test')">Lancer une erreur de test</button>

Pour visualiser et résoudre l’erreur enregistrée, connectez-vous à sentry.io et ouvrez votre projet.

Plus de guides sur les services backend

• 

  Appwrite

• 

  Firebase

• 

  Sentry

• 

  Supabase

• 

  Turso

• 

  Xata