<aside> 💻

feature/deploy 브랜치 작업 내역

• Sentry 설정 및 에러 모니터링 구축
• Vercel 배포 </aside>

구현 상세 가이드

1. Sentry & 에러 모니터링 구축

1. Sentry 설정

1.1 Sentry 회원가입

• https://sentry.io/signup/ 접속
• GitHub 계정으로 회원가입 가능
• 무료 플랜 선택 (Hobby Plan)

1.2 프로젝트 생성

• Create Project 클릭
• Platform으로 "React" 선택
• 프로젝트 이름 설정 (예: "fe-onboarding-task")

1.3 DSN 확인

• Settings > Projects > [프로젝트명] > Client Keys (DSN)

  

• DSN 값을 복사하여 .env 파일에 추가

VITE_SENTRY_DSN="your-sentry-dsn"

2. Sentry 설정

2.1 기본 설치 및 초기화

1. Sentry 패키지 설치

npm install @sentry/react

1. Sentry 초기화 설정

// src/main.tsx
import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: import.meta.env.VITE_SENTRY_DSN,
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
  ],
// 개발 환경에서는 100%, 프로덕션에서는 10%의 성능 데이터 수집
  tracesSampleRate: import.meta.env.MODE === "development" ? 1.0 : 0.1,
  environment: import.meta.env.MODE,
});

2.2 라우터 통합 설정

// src/main.tsx
import { BrowserRouter } from "react-router-dom";
import * as Sentry from "@sentry/react";

const App = () => {
  return (
    <Sentry.ErrorBoundary
      fallback={<ErrorFallback />}
      showDialog
    >
      <BrowserRouter>
        <QueryClientProvider client={queryClient}>
          <AppRoutes />
        </QueryClientProvider>
      </BrowserRouter>
    </Sentry.ErrorBoundary>
  );
};

3. 에러 처리 컴포넌트 구현

3.1 ErrorFallback 컴포넌트

// src/components/ErrorFallback.tsx
interface FallbackProps {
  error?: Error;
  eventId?: string;
}

const ErrorFallback = ({ error, eventId }: FallbackProps) => {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="max-w-md w-full p-6 bg-white rounded-lg shadow-md">
        <h2 className="text-2xl font-bold text-center text-red-600 mb-4">
          오류가 발생했습니다
        </h2>
        <p className="text-gray-600 text-center mb-4">
          {error?.message || "알 수 없는 오류가 발생했습니다."}
        </p>
        <div className="space-y-4">
          <button
            className="w-full py-2 px-4 border rounded-md hover:bg-gray-50"
            onClick={() => window.location.reload()}
          >
            페이지 새로고침
          </button>
          <button
            className="w-full py-2 px-4 border rounded-md hover:bg-gray-50"
            onClick={() => Sentry.showReportDialog({ eventId })}
          >
            에러 리포트 작성
          </button>
        </div>
      </div>
    </div>
  );
};

export default ErrorFallback;

3.2 에러 테스트 컴포넌트