Jehlani Luciano Logo

Sentry

Guidelines for integrating Sentry for error tracking and performance monitoring in Astro projects.

astro
          
            ## Astro Sentry Integration Guidelines

1.  Purpose: Integrates Sentry's application monitoring and error tracking service into your Astro application. Helps identify, diagnose, and resolve issues in real-time.

2.  Installation: Use the Astro CLI to add the Sentry SDK and integration:

    ```bash
    npx astro add @sentry/astro
    # or pnpm add @sentry/astro / yarn add @sentry/astro
    ```

    This command installs the necessary package (`@sentry/astro`) and adds the integration to your `astro.config.mjs`.

3.  Configuration (`astro.config.mjs`): Configure the Sentry integration within the `integrations` array.

    ```javascript
    // astro.config.mjs
    import { defineConfig } from "astro/config";
    import sentry from "@sentry/astro";

    export default defineConfig({
      integrations: [
        sentry({
          // Required: Your Sentry project's DSN
          dsn: "YOUR_SENTRY_DSN_HERE", // Find in Project Settings > Client Keys (DSN)

          // Required for Source Map Uploads (readable stack traces)
          sourceMapsUploadOptions: {
            // Required: Your Sentry project name slug
            project: "your-sentry-project-slug", // Find in Project Settings > General Settings

            // Required: Sentry Auth Token (use environment variable)
            authToken: process.env.SENTRY_AUTH_TOKEN, // Create in Org Settings > Auth Tokens
          },

          // Optional: Add other Sentry SDK options here if needed
          // tracesSampleRate: 1.0,
          // profilesSampleRate: 1.0,
        }),
      ],
    });
    ```

4.  Required Credentials:

    - DSN: Found in your Sentry Project Settings > Client Keys (DSN).
    - Project Slug: Found in your Sentry Project Settings > General Settings.
    - Auth Token: Create an auth token in your Sentry Organization Settings > Developer Settings > Auth Tokens. Store this securely, typically as an environment variable (`SENTRY_AUTH_TOKEN`) and reference it via `process.env`. Do _not_ hardcode the token in your config file.

5.  Functionality: Once configured with the DSN and source map options, the SDK automatically:

    - Captures unhandled errors in both server-side (SSR) and client-side code.
    - Sends performance monitoring data (tracing) to Sentry.
    - Uploads source maps during the build (`astro build`) to provide readable stack traces in Sentry.

6.  Testing: To verify the setup, you can temporarily add a button or code snippet to a page that intentionally throws an error:

    ```html
    <button onclick="throw new Error('Sentry Test Error from Astro')">
      Throw test error
    </button>
    ```

    Click the button, then check your Sentry project to see if the error was captured.

7.  Development Tool: Sentry provides the "Spotlight" dev toolbar app for Astro, which shows Sentry errors and traces directly in the browser overlay during local development.

Reference: [Monitor your Astro Site with Sentry Guide](https://docs.astro.build/en/guides/backend/sentry/)