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/)