[NextJs] 프로젝트 Sentry 초기 세팅하기

     

목차

 

 

 

 

 

1. Sentry.io 회원가입

Sentry는 애플리케이션에서 오류가 발생하면 알려주는 에러 트래킹 서비스입니다.

클라이언트 오류 발생 시 메일을 보내주고, 슬랙과 연동해서 슬랙 메시지를 통해 오류에 대한 정보 파악이 가능합니다. 

• Sentry.io 사이트에서 회원가입, 프로젝트 생성

 

 

 

nextjs 문서 참고

https://docs.sentry.io/platforms/javascript/guides/nextjs/#step-1-install

Next.js | Sentry for Next.js

 

 

2. cli 명령어 실행

npx @sentry/wizard@latest -i nextjs

 

 

 

프로젝트 이름과 함께 프로젝트가 생기는 것을 볼 수 있다.

 

 

3.sentry logging 확인하기

그러면 아래와 같이 api router와 example error 페이지가 생긴 것을 볼 수 있다.

 

그래서 sentry-example-page로 url을 이동하면 다음과 같은 오류 발생 해주는 페이지가 보인다.

 

 

버튼을 누르면 다음과 같이 오류가 정상적으로 로깅되는 것을 볼 수 있다.

 

 

클라이언트 측 오류 에러 바운더리로 잡기

 

Sentry.tsx

'use client';

import React, { ReactNode } from 'react';
import * as Sentry from '@sentry/nextjs';
import SentryFallback from './components/SentryFallback';

type Props = {
  children: ReactNode;
};

function SentryProvider({ children }: Props) {
  return (
    <Sentry.ErrorBoundary fallback={SentryFallback}>
      {children}
    </Sentry.ErrorBoundary>
  );
}

export default SentryProvider;

 

 

SentryFallback.tsx

'use client';

import React, { useEffect, useState } from 'react';

interface Props {
  error: unknown;
  resetError: () => void;
}

export default function SentryFallback({ error, resetError }: Props) {
  const [message, setMessage] = useState('예기치 못한 오류가 발생했습니다.');

  useEffect(() => {
    if (
      error instanceof Error ||
      (typeof error === 'object' && error !== null && 'message' in error)
    ) {
      setMessage((error.message as string) || '알 수 없는 오류 발생');
    }
  }, [error]);

  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-red-50 px-4 text-center text-red-900">
      <h1 className="mb-4 text-3xl font-bold">🚨 오류가 발생했습니다</h1>
      <p className="mb-2 text-lg">{message}</p>
      <p className="mb-6 text-sm text-gray-600">
        오류가 지속되면 관리자에게 문의해 주세요.
      </p>
      <button
        type="button"
        onClick={resetError}
        className="cursor-pointer rounded bg-red-600 px-4 py-2 text-white transition hover:bg-red-700"
      >
        🔄 다시 시도하기
      </button>
    </div>
  );
}