센트리(sentry) 구축하기

센트리가 무엇인지 궁금하신 분은 이전 포스팅 먼저 읽고 오시면 훨씬 도움이 됩니다 ^.^

https://hyermione.tistory.com/5

프론트엔드에서 에러 처리하기 - SENTRY

 

---

이 전에 센트리에 대하여 포스팅을 하였다. 백문이 불여일견. 백번 보는 것보다 한 번 시도를 할 때 더 많이 남는다는 말에 십분 공감하며, 테스트용 리엑트 프로젝트를 하나 생성하였다.

 

하단에 나오는 모든 정보는 https://sentry.io/ 센트리 공식 홈페이지를 참고하였다.

 

 

센트리 설치하기

 

센트리에는 여러 종류의 회원방식(?)이 있다. 나는 홀로 테스트용이니 Developer 버전으로 진행할 것이지만 한 명의 유저만 사용 가능하며, 에러는 14일까지만 저장되는 등의 여러 제약이 있으니 혹 팀 외의 여러 단위가 필요하신 분은 공식 홈페이지를 참고하시면 좋을 것 같다.

https://sentry.io/pricing/?gclid=Cj0KCQiAzMGNBhCyARIsANpUkzO_0_AYuKPKtall-l1ZxrfCSS30ELn5ZEsXZ1Is7-DmUqnjaLltJEMaAkHzEALw_wcB&utm_campaign=9575834316&utm_content=g&utm_medium=cpc&utm_source=google&utm_term=sentry 

Plans and Pricing

 

 

1. 센트리 가입하기

https://sentry.io/signup/?gclid=Cj0KCQiAzMGNBhCyARIsANpUkzO_0_AYuKPKtall-l1ZxrfCSS30ELn5ZEsXZ1Is7-DmUqnjaLltJEMaAkHzEALw_wcB&utm_campaign=9575834316&utm_content=g&utm_medium=cpc&utm_source=google&utm_term=sentry 

Sign up for Sentry to start your free trial.

상단 url을 클릭하면 다음과 같은 폼이 나오는데, 각자의 사정에 맞게 계정을 생성한다. 계정을 가입하는 것은 오래 걸리지 않으며, 환영을 받았다면 센트리 구축의 반은 완료한 것이다.

 

정말 많은 플랫폼에서 센트리를 사용할 수 있는데, 나는 상단에 언급한 것처럼 리액트용 센트리를 선택하여 구축할 예정이다.

 

 

2. 센트리 설치하기

 

터미널에 센트리를 설치하면 80% 완성이다!

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

 

3. 센트리 연결하기

 

이제 설치한 센트리를 @import 하여 프로젝트에 연결할 차례이다.

 

리액트가 최초로 그려지기 전 센트리를 불러오는 것을 권고하고 있어 나는 index.js에서 import 시키는 예제를 작성할 것이다. 아마 가장 처음부터 에러를 수집하기 위하여 권고하는 것 같다. 다른 테스트에서 index.js 외 다른 파일에서 실행시켜보았는데, 전혀 문제없이 잘 동작하였다.

 

각자가 원하는 엔트리 포인트라고 여겨지는 파일에 들어가 센트리를 import 시켜준다.

 

init 시에 sentry dsn 코드가 필요한데, 프로젝트별로 부여받는 것이기 때문에 반드시 회원가입이 필요하다. 아니면 에러가 섞이는 불상사가 일어날 수도... 개인적으로는 dsn 코드를 env 파일로 관리하였다.

https://hyermione.tistory.com/8

환경변수를 설정하여 api key 숨기기.

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

Sentry.init({
  dsn: "각자 부여받은 dsn",
  integrations: [new Integrations.BrowserTracing()],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
});

 

이로써 모든 구축이 끝났다. 단 3단계로 모두 끝나는 구축... 짜릿하다. 내가 마치 뭔가를 해낸 것 같다. 이제 제대로 되었나 확인을 하기 위하여 임의로 오류를 생성하였다.

 

리액트 초기 설치 시, app.js에 넣어주는 기본 리액트 로고이다. 해당 로고에 클릭하면 없는 이벤트를 주입하였다.

<img onClick={sentryTest} src={logo} className="App-logo" alt="logo" />

sentryTest가 없다는 에러를 확인하고 센트리에 들어가게 되면

그래프가 생기기 시작했다.

---

우오오우오아 재밌따!!