Sentry.io로 프로젝트 오류 잡아내기

sentry.io

 

이번 시간에는 프로젝트에 오류를 쉽게 정리하고 찾아내는데 유용한 Sentry.io에 대해서 알아보겠습니다.

 

setry.io란 프로젝트 진행중 어떤오류가 발생한지를 정리해주는 사이트인데요 우리가 일반적으로 오류가 발생하는 

 

부분은 console.log나 vs code로 작성된 에디터에서 종종 발견하는데요 이에대해서는 우리가 검색해서 해결해야되는 

 

복잡함도 있습니다. 또한 이 많은 오류들을 정리하는데에도 어렵움이있는데 

 

이런 오류들을 잡기위해서 제일 유용한것이 . sentry.io라고 할수 있습니다.

 

1. Sentry.io를 사용하는 이유

- 우선 Sentry에 대해 알아보자면

 

프로젝트를 운용하는데 있어 발생하는 에러들을 로깅하여 쉽게 파악할 수 있으며, slack 같은 협업 도구들에 연동시 오류들을 쉽게

모니터링 할 수 있는 도구.

sentry에서 지원되는 언어들입니다. 웹개발자의 기본언어들을 지원해줍니다. 

 

---

2. Sentry 적용하기 (React)

우선 Sentry.io 사이트에 들어가 회원가입을 하고 프로젝트를 생성해 줍니다.

 

Application Monitoring and Error Tracking Software

•  Github 로그인으로 연동도 가능하니 참고 바람 

오른쪽 상단 Create Project로 프로젝트를 생성해주세요.

 

---

3. Sentry 적용하기 (프로젝트)

이제 sentry.io 를 적용시켜볼 차레입니다.

 

• Sentry 패키지를 설치한다. 

// Using npm
npm install --save @sentry/react @sentry/tracing

// Using Yarn
yarn add @sentry/react @sentry/tracing

• 프로젝트 index.js 파일에 Sentry 코드 입력 

// sentry 
import * as Sentry from '@sentry/react';
import { Integrations } from '@sentry/tracing';

Sentry.init ({
 
  // 환경 변수 상관 없이 적용
  dsn: "https://projectId.sentry.io/xxxxx,
  // 프로덕션 개발 모들일때만 적용
  dsn: process.env.NODE_ENV === "production" ? "https://projectId.sentry.io/xxxxxxx",
  
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0,

})

이렇게 적용시켜 줍니다. dsn 주소는

프로젝트 내 setting(아이콘 클릭) 에서 받아올수 있습니다.

 

   
   - 위처럼 dns 정보를 그대로 작성하면 dns가 노출될 우려가 있으므로 .env 파일을 직접만들어 암호화 해줍니다.  

REACT_APP_SENTRY_DSN="dns 주소",​

 
  DNS 암호화 

•  우리가 서버로 API 비동기 요청을 하게될 경우, catch나 try-catch 문을 사용하게 되면 이미지 오류를 catch하는 코드를 
   오류를 catch 하는 코드를 짜놔서 그런지 발생한 에러가 Sentry에 로깅되지 않음. 그래서 이럴때는 추가적인 방법으로
   에러를 잡아줘야한다.

// sentry
import * as Sentry from '@sentry/react';


....
....
....
.catch((err) => {
    Sentry.captureException(`Catched Error : ${err}`);
}

이렇게 에러를 잡는 코드를 작성해 주어 API 실행 중 발생하는 에러들을 잡을 수 있게 해주었다.

---

결과 

  결과적으로 훨씬 더 수월하게 에러 Loging을 하여 에러들을 체크할 수 있고

새로고침시 에러사항이 실시간으로 올라오는 것을 확인할 수 있다.

 

참고 자료

Sentry로 Error-logging 해보기