Add Sentry Integration as a Recipe

src/content/docs/en/guides/backend.mdx

@@ -5,7 +5,7 @@ i18nReady: true
 ---
 import BackendGuidesNav from '~/components/BackendGuidesNav.astro';
 
-**Ready to add features like authentication, storage or data to your Astro project?** Follow one of our guides to integrate a backend service.
+**Ready to add features like authentication, monitoring, storage, or data to your Astro project?** Follow one of our guides to integrate a backend service.
 
 :::tip
 Find [community-maintained integrations](https://astro.build/integrations/) for adding popular features to your project in our integrations directory. 
@@ -29,3 +29,4 @@ You might want to consider a backend service if your project has complex server-
 - user-uploaded asset storage
 - API generation
 - realtime communication
+- application monitoring

src/content/docs/en/guides/backend/sentry.mdx

@@ -0,0 +1,71 @@
+---
+title: Monitor your Astro Site with Sentry
+description: How to monitor your Astro site with Sentry
+type: backend
+service: Sentry
+stub: false
+i18nReady: true
+---
+import ReadMore from '~/components/ReadMore.astro';
+import { Steps } from '@astrojs/starlight/components';
+
+[Sentry](https://sentry.io) offers a comprehensive application monitoring and error tracking service designed to help developers identify, diagnose, and resolve issues in real-time.
+
+Read more on our blog about [Astro's partnership with Sentry](https://astro.build/blog/sentry-official-monitoring-partner/) and Sentry's Spotlight dev toolbar app that brings a rich debug overlay into your Astro development environment. Spotlight shows errors, traces, and important context right in your browser during local development.
+
+Sentry's Astro SDK enables automatic reporting of errors and tracing data in your Astro application.
+
+## Project Configuration
+
+A full list of prerequisites can be found in [the Sentry guide for Astro](https://docs.sentry.io/platforms/javascript/guides/astro/#prerequisites).
+
+## Install
+
+Sentry captures data by using an SDK within your application’s runtime.
+
+Install the SDK by running the following command for the package manager of your choice in the Astro CLI:
+
+```bash
+npx astro add @sentry/astro
+```
+The astro CLI installs the SDK package and adds the Sentry integration to your `astro.config.mjs` file.
+
+## Configure
+
+To configure the Sentry integration, you need to provide the following credentials in your `astro.config.mjs` file.
+
+1. **Client key (DSN)** - You can find the DSN in your Sentry project settings under *Client keys (DSN)*.
+2. **Project name** - You can find the project name in your Sentry project settings under *General settings*.
+3. **Auth token** - You can create an auth token in your Sentry organization settings under *Auth tokens*.
+
+:::note
+If you are creating a new Sentry project, select Astro as your platform to get all the necessary information to configure the SDK.
+:::
+
+```js title="astro.config.mjs" ins={2, 6-12}
+import {defineConfig} from 'astro/config';
+import sentry from '@sentry/astro';
+
+export default defineConfig({
+ integrations: [
+ sentry({
+ dsn: 'https://[email protected]/0',
+ sourceMapsUploadOptions: {
+ project: 'example-project',
+ authToken: process.env.SENTRY_AUTH_TOKEN,
+ },
+ }),
+ ],
+});
+```
+Once you've configured your `sourceMapsUploadOptions` and added your `dsn`, the SDK will automatically capture and send errors and performance events to Sentry.
+
+## Test your setup
+
+Add the following `<button>` element to one of your `.astro` pages. This will allow you to manually trigger an error so you can test the error reporting process.
+
+```astro title="src/pages/index.astro"
+<button onclick="throw new Error('This is a test error')">Throw test error</button>
+```
+
+To view and resolve the recorded error, log into [sentry.io](https://sentry.io/) and open your project.

src/data/logos.ts

@@ -91,6 +91,7 @@ export const logos = LogoCheck({
  zerops: { file: 'zerops.svg', padding: '.2em' },
  apostrophecms: { file: 'apostrophecms.svg', padding: '.15em .15em' },
  db: { file: 'db.svg', padding: '.1em' },
+ sentry: { file: 'sentry.svg', padding: '.1em' },
  umbraco: { file: 'umbraco.svg', padding: '.05em' },
 });