Sentry로 Astro 사이트를 모니터링하세요

Sentry는 개발자가 실시간으로 문제를 식별, 진단 및 해결할 수 있도록 설계된 포괄적인 애플리케이션 모니터링 및 오류 추적 서비스를 제공합니다.

Sentry와 Astro의 파트너십 및 Astro 개발 환경에 풍부한 디버그 오버레이를 제공하는 Sentry의 Spotlight 개발 도구 모음 앱에 대해 블로그에서 자세히 알아보세요. Spotlight는 로컬 개발 중 발생하는 오류, 추적 및 중요한 컨텍스트를 브라우저에 바로 표시합니다.

Sentry의 Astro SDK를 사용하면 Astro 애플리케이션의 오류 및 추적 데이터를 자동으로 보고할 수 있습니다.

프로젝트 구성

섹션 제목: 프로젝트 구성

필수 구성 요소의 전체 목록은 Astro용 Sentry 가이드에서 확인할 수 있습니다.

설치

섹션 제목: 설치

Sentry는 애플리케이션 런타임에서 SDK를 사용하여 데이터를 캡처합니다.

Astro CLI에서 선택한 패키지 관리자에 대해 다음 명령을 실행하여 SDK를 설치합니다.

npm

npx astro add @sentry/astro

pnpm

pnpm astro add @sentry/astro

Yarn

yarn astro add @sentry/astro

Astro CLI는 SDK 패키지를 설치하고 astro.config.mjs 파일에 Sentry 통합을 추가합니다.

구성

섹션 제목: 구성

Sentry 통합을 구성하려면 astro.config.mjs 파일에 다음 자격 증명을 제공해야 합니다.

1. 클라이언트 키 (DSN) - Client keys (DSN) 아래 Sentry 프로젝트 설정에서 DSN을 찾을 수 있습니다.
2. 프로젝트 이름 - General settings 아래 Sentry 프로젝트 설정에서 프로젝트 이름을 찾을 수 있습니다.
3. 인증 토큰 - Auth tokens 아래 Sentry 조직 설정에서 인증 토큰을 생성할 수 있습니다.

노트

새로운 Sentry 프로젝트를 생성하는 경우 Astro를 플랫폼으로 선택하여 SDK 구성에 필요한 모든 정보를 얻으세요.

astro.config.mjs

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,
      },
    }),
  ],
});

sourceMapsUploadOptions를 구성하고 dsn을 추가하면 SDK가 자동으로 오류와 성능 이벤트를 캡처하여 Sentry에 보냅니다.

설정 테스트

섹션 제목: 설정 테스트

.astro 페이지 중 하나에 다음 <button> 요소를 추가하세요. 이렇게 하면 오류 보고 프로세스를 테스트할 수 있도록 오류를 수동으로 트리거할 수 있습니다.

src/pages/index.astro

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

sentry.io에 로그인하여 프로젝트를 열어 기록된 오류를 확인하고 해결할 수 있습니다.

더 많은 백엔드 서비스 안내서

• 

  Appwrite

• 

  Firebase

• 

  Neon

• 

  Sentry

• 

  Supabase

• 

  Turso

• 

  Xata