Skip to content
Spotlight

Using Spotlight with Astro

By Adding Spotlight to your Astro application, you can get deep insights into errors and performance issues across your entire stacks. On this page you’ll learn how to install and add Spotlight to your Astro Dev Toolbar with just one command.

1. Installation

Start by adding the @sentry/astro and @spotlightjs/astro dependencies:

Terminal window
npx astro add @sentry/astro @spotlightjs/astro

2. Configuration

The Astro CLI should have already added the Sentry & Spotlight integration to your astro.config.mjs file during installation. It should look similarly to the example below. Otherwise, import and register the Sentry and Spotlight integrations:

import { defineConfig } from 'astro/config';


import sentry from "@sentry/astro";
import spotlightjs from "@spotlightjs/astro";


// https://astro.build/config
export default defineConfig({
  // Order matters here!  `sentry()` should come before `spotlightjs()`
  integrations: [sentry(), spotlightjs()]
});

3. Configure Other Sentry SDKs

If your Astro application is interacting with other services, such as a Python API, you can also configure those SDKs to work with Spotlight. You don’t need to be using the Sentry service to take advantage of Sentry’s SDKs to power Spotlight.

Web platforms

In the Browser you don’t need to set spotlight: true, Spotlight.init() will automatically detect if Sentry is available and if so, hook into the SDK.

Sentry.init({
  dsn: '___DSN___',
});
// In the frontend it's important that you init Spotlight after Sentry
Spotlight.init();