왜 Sentry를 선택하게되었는가?
web app으로 프로젝트 업무를 맡게 되면서 app 내부에서 오류가 발생할 경우 캐치를 잘 못하기도 하고 에러가 올 경우 텔레그램을 활용했는데 조금더 자세히 에러 로그를 정리하고 싶어서 에러 로그에 대해서 찾아보게 되었고
Sentry에 대해서 알게 되었다.
처음 접해보기 때문에 개발자 팀과 논의해본 결과 Sentry는 자체 DB를 쓰기 때문에 민감한 정보가 노출될수 도 있다라는 판단 하에 개인 브랜치를 적용해서 테스트만 해보고 정식으로 배포하지는 않았다.
조금더 공부하면서 개인 DB로 설정하는 방법에 대해서 공부하고 있다면 적용해 볼 생각이다.
참고한 내용은 아래와 같다.
카카오 개발 팀에서도 활용하고 있어서 신뢰가 가는 라이브러리 라고 생각해서 적용하고자 마음 먹었었다.
nextjs를 활용하는 분의 글을 봤는데 12버전 을 사용하고 있기에 app디렉토리를 활용하는 13버전과 약간 달라서 조금 참고 형식으로 사용했고 12와 달라서 조금 적용하는데 시간이 걸릴것 같다고 생각이 들었지만 처음 세팅 방법은 쉬웠다.
세팅은 쉬웠지만 사용하면서 애를 좀 먹어서 그것은 이글을 작성하면서 뒤에 따로 정리해둘 예정이다.
일단 세팅 방법이다.
참고로 nextjs사용하는 분이 처음 시도 방법에 대해서 잘 정리해두어서 이분것을 참조하면 좋을것 같다.
세팅
나는 간략하게 글로써 방법에 대해서 정리해본다.
- snetry 홈페이지에서 가입을 한다. (토큰을 받아야 하기 때문) - 테스트 해볼것이기 때문에 개인용으로 가입을 했다.
- 패키지 설치 (공식 홈페이지에서도 자신의 프레임워크를 선택하면 자세히 알려주기 때문에 이것을 참고해도 좋다. (단, 영어로 적혀있다. )
next js 일경우 아래 명령어를 입력하자
처음으로 패키지를 설치해준다.
yarn add @sentry/nextjs
npm install --save @sentry/nextjs
그다음 wizard로 세팅방법이 있는데 아래 명령어를 입력하면 위자드 형식으로 세팅이 가능하게 된다.
npx @sentry/wizard@latest -i nextjs
터미널에서 위자드를 사용하면 하나씩 질문해서 적용할수 있다.
위자드를 활용하고 나면 root폴더에 sentry.client.config.js , sentry.server.config.js, sentry.properties 가 생성되어 있다.
하지만 나는 .sentryclirc가 생성이 안되어 있어서 직접 만들어 주었다.
next.comfig.js안에도 withSentryConfig가 자동으로 설정되어 진다.
사용
사용 법은 간단하다. 에러 로그를 찍을때 Sentry로 찍으면 된다.
captureException 와 captureMessage API를 활용하여서 에러를 찍을수가 있다.
카카오 테크에서 작성한 글을 참고하여 활용해보았다.
import * as Sentry from '@Sentry/next’;
try {
aFunctionThatMightFail();
} catch (err) {
Sentry.captureException(err);
}- 카카오 테크에서 가져온 코드로 약간 변형했다.
위처럼 err 객체를 받을수 있고
Sentry.captureMessage('에러가 발생하였습니다!');이처럼 문자열로 받을수 있다.
sentry-example-page가 생겼을텐데 페이지에 접근하면 에러를 테스트 해볼수 있다.
onClick={() => {
Sentry.startSpan({
name: 'Example Frontend Span',
op: 'test'
}, async () => {
const res = await fetch("/api/sentry-example-api");
if (!res.ok) {
throw new Error("Sentry Example Frontend Error");
}
});
}}이런 형식으로 테스트 코드가 작성되어 있는데 에러를 뿜을 수록 span 형태로 에러를 넣는것 같다.
에러들은 sentry페이지에서 볼수가 있다.
이슈 들에서 볼수가 있는데.
각각 테스트로 에러를 뿜어낸 것들이었다.
에러를 여러번 내었는데 중복되는 것은 알아서 걸러지는것 같다.
에러를 클릭하여 상세 페이지로 접근하게 되면 (만약 sentry설정때 코드를 전달하는 옵션을 선택했다면) 내부에서 어떤 파일에서 몇번째 줄에서 오류가 발생했는지 볼수가 있다.
또한 replay로 자동으로 구현때 영상이 촬영되어 있다.
브라우져 정보와 , 디바이스 정보까지 볼수가 있는데 정확하지 않은것은 덤이다.
brave 브라우져를 활용했는데 chrome과 비슷한 형태이니 chrome으로 찍힌것은 잘된것 같은데
디바이스에서 LG Nexus 5는 왜 찍혔는지 모르겠다.
그래도 처음 에러 로그를 관리하는 것을 접해봤는데 활용하면 좋을것 같다 라는 생각이 들었다.
다만 걸리는것이 회사 코드가 유출 될수 있다 라는 점이 단점으로 꼽힐수 있는데 회사내부 DB에 적용하는 방법을 조금더 찾아볼 예정이다.
후기는 여기까지이고 아래는 사용하면서 만났던 에러와 에러 처리 글이다.
직면한 에러 핸들링
1. ad block 사용시 sentry로 전송이 막히는 경우
에러 당시 캡쳐는 못해두었지만. 콘솔에 block이라는 에러가 뜨고 통신 오류가 나타나 있었다.
네트워크 상에서는 (차단됨) 이라고 상태가 나타나 있었다.
어찌저찌 문제를 찾아보다가 공식문서에서 config 설정에 코드를 추가하라는 것을 발견하게 되었다.
next.config 파일에서
tunnelRoute: "/monitoring-tunnel",
를 활용하면 되었는데
공식문서에서 작성한 제목도 Configure Tunneling to avoid Ad-Blockers 이것이다.
활용하니 문제가 해결되었다. 차단됨이 없어지고 잘 작동되어서 문제를 해결할수 있었다.
단, 활용시 유의할 사항은 이 명령어를 활용시
Please note that this option will tunnel Sentry events through your Next.js application so you might experience increased server usage.
서버 사용량이 증가될수 있다는 것을 유의 해야 한다.
2. github action yml 파일 문제
자주 직면하는 문제 .. 그렇다. 빌드와 배포에서 문제를 직면하게 되었다. yml파일에 대해서 공식문서에서 잘 나와 있지 않아서. (혹은 내가 발견하지못해서) chatGpt에게 물어봐서 yml파일을 작성할수 있었다.
- name: "Sentry Release"
run: sentry-cli releases new ${{ github.sha }}
- name: "Sentry Upload Source Maps"
run: sentry-cli releases files ${{ github.sha }} upload-sourcemaps --url-prefix '~/static/js' ./build이 코드를 넣으면 된다고 한다.
문제없이 실행되면 좋으련만 빌드 에러를 직면하게 되었다.
내용은 Sentry-cli를 찾을수 없다 (undefiend) 오류를 직면하게 되었다.
그래서 npm 으로 snetry-cli을 설치해주고 다시 빌드를 실행했는데도 찾을수가 없다고 나왔다.
그래서 yml파일 내부에서 install하도록 코드를 수정해주었다.
빌드 하고 배포 이후에 sentry 로직을 실행하는데 배포 할때마다 시간이 너무 오래걸려서
빌드 이후에 Sentry를 실행하도록 로직을 수정했다.
코드를 전격 수정해서
- name: Set up Sentry
run: |
npm install -g @sentry/cli
sentry-cli releases new ${{ github.sha }}
sentry-cli releases set-commits --auto ${{ github.sha }}
sentry-cli releases finalize ${{ github.sha }}이렇게 코드를 수정했다.
token은 github 빌드 세팅때 변수값으로 저장해서 secrets 로 접근을 했는데
빌드 실패 에러를 보니 Did you copy your token correctly? 라고한다..
여기서 토큰값이 처음 세팅할때 widzard에서 준 토큰 값과 홈페이지 설정에서 보이는 토큰값이 달라서 어떤 토큰을 써야 할지 고민을 많이 했었다. 그래도 widzard에서 준 토큰값으로 세팅을 했다.
또 같은 에러를 만나서 뭐가 문제일까 고민해보다가 토큰이 잘 넘겨지는가 의심하게 되었다.
그래서 echo로 찍어보니 빈값이다.
세팅은 잘되어 있는데 왜 문제일까 생각하면서 토큰이 위에서 말했던것처럼 홈페이지 토큰인지, widzard토큰인지 알고 싶어서 일단 yml파일에서 env환경을 만들어서 token을 세팅해 주고 빌드를 시작했다.
또 에러를 직면하고 말았다.
에러를 읽어보니 projcet 값이 필요하다고 한다. 세팅할때 config값으로 project랑 ,token 이랑 세팅을 했는데 왜 못읽는지 이해를 할수가 없다..
아무튼 일단 배포가 되는 것을 보고 싶어서 (또다른 에러를 만날수 있어서 ) 임시방편으로 해달라는 것을 해주었다.
sentry-cli releases new ${{ github.sha }} --auth-token ${{ env.SENTRY_AUTH_TOKEN }} --org personal-0lj --project javascript-nextjs --log-level=debug코드를 이렇게 달라는것 다 주는 방향으로 수정했다.
토큰, org, project 다 이미 sentrycilrc 파일에서 선언을 해주었는데 위에서 snetrycilrc가 생성안된것이 문제인것 같긴 하였다.
이를 수정해주고 나니 배포에 성공할수 있었다.
결과적으로 성공한 yml 파일 코드이다.
- name: Set up Sentry
run: |
npm install -g @sentry/cli
sentry-cli releases new ${{ github.sha }} --auth-token ${{ env.SENTRY_AUTH_TOKEN }} --org personal-0lj --project javascript-nextjs --log-level=debug
sentry-cli releases set-commits --auto ${{ github.sha }}
sentry-cli releases finalize ${{ github.sha }}배포 과정에서 실행해주었다.
해결을 위해 sentry 팀에서 운영하는 github에서 사람들이 올린 이슈들과 댓글들을 확인하면서 수정해보기도 하고, 직접 부딪치며 해결을 한결과 반나절의 시간을 소요해서 문제를 해결할수 있었다..
만약 더 도움을 얻고 싶다면 Sentry에서 운영하는 github이슈 글을 확인해보자.
https://github.com/getsentry/sentry-webpack-plugin/issues/236
다른 업무도 있어서 급하게 해결한 것도 없지 않아 있었지만 공식문서도 쭉 읽어보면서 공부가 되었다 라고 생각이 된다. 이전 next 13 버전 초기때 sentry 를 사용하고 문제를 남긴 분이 있는데.. 미리 구현하고 문제를 해결해주는 선임 개발자 는 역시 갓..이다
2023년 4월 경에 쓰여진 글로 nextjs 13을 사용하면서 논의 해보는것 같다..
댓글에서도 참여해주신 많은 분들 덕분에 많은 도움이 되었읍니다.
만약 sentry에서 회사에서 사용하는 DB를 사용하도록 세팅할수 있다는 것을 찾게 되면 또 작성하게 될수도 있지만 이번에는 이렇게 줄인다.
