Astro

Astro is a web framework for building content-driven websites including blogs, marketing, and e-commerce sites. Learn how to set it up with Sentry.

Sentry's Astro SDK enables automatic reporting of errors and performance data in your Astro application. Our Astro integration instruments both the client as well as the server side of your Astro application. This page walks you through adding Sentry to your Astro project, configuring it, adding readable stack traces, and verifying your setup.

Before we get started, make sure you have the following:

  • A Sentry account.
    • Don't have an account yet? Head over to sentry.io, then return to this page.
  • An Astro project that uses Astro 3.0.0 or newer.
  • A Node runtime:
    • This SDK currently only works on Node runtimes (e.g. Node adapter, Vercel with Lambda functions). Non-Node runtimes, like Vercel's Edge runtime or Cloudflare Pages, are currently not supported.
  • If you're using Astro's Netflify adapter (@astrojs/netlify), you need version 5.0.0 or newer.

Don't already have an account and Sentry project established? Head over to sentry.io, then return to this page.

Sentry captures data by using an SDK within your application’s runtime.

Install the SDK by using the astro CLI:

Copied
npx astro add @sentry/astro

The astro CLI installs the SDK package and adds the Sentry integration to your astro.config.mjs file.

To finish the setup, configure the Sentry integration.

Get started by adding your DSN to your Astro config file:

astro.config.mjs
Copied
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,
      },
    }),
  ],
});

Once you've added your dsn, the SDK will automatically capture and send errors and performance events to Sentry.

To get readable stack traces in your production builds, set the SENTRY_AUTH_TOKEN environment variable in your build environment. You can also add the environment variable to a .env.sentry-build-plugin file in the root of your project.

.env.sentry-build-plugin
Copied
SENTRY_AUTH_TOKEN=sntrys_YOUR_TOKEN_HERE

This, in combination with your sourceMapsUploadOptions configuration, will upload source maps to Sentry every time you make a production build.

This snippet includes an intentional error, so you can test that everything is working as soon as you set it up.

Trigger a test error somewhere in your Astro app, for example in one of your pages:

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

Errors triggered from within Browser DevTools are sandboxed and won't trigger an error handler. Place the snippet directly in your code instead.

Learn more about manually capturing an error or message in our Usage documentation.

To view and resolve the recorded error, log into sentry.io and open your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved.

Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").