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

[!이시중] 2021년 10월 23일 23:24에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/39 에서 확인할 수 있음.

 

이직 면접에서 나 스스로가 만족하지 못 한 대답을 하여 아직까지 기억하고 있는 질문이 있다.

 

고객의 에러를 어떻게 수집하는가

 

당시 소속되어있던 회사는 고객의 소리를 듣지도 못 할 정도로 빡빡하고 빠른 기능의 스케줄을 가지고 있었고, 대다수의 사용자가 내부 직원들이었던 관계로 고객의 소리를 놓치고 있었다.

하여 내가 대답에서 할 수 있었던 말은 ‘‘사용자가 직접 문의를 넣어줍니다.’’ 정도였고, 사용자가 문의를 안 하면 어떻게 처리하는가에 대한 재 질문이 들어왔을 때, ‘‘문의사항이 들어오지 않았으며, QA와 개발자 테스트에서 발견되지 않은 이슈는 안타깝게도 현재로써는 알 수 있는 방법이 없다.’’ 라고만 대답할 수 있었다.

 

그 때, 놀라던 면접관들의 모습은 꽤나 생생하게 남아있다.

 

그러다 알게된 SENTRY는 프론트엔드에서 에러 로그를 수집할 수 있는 시스템이라고 하니 어찌 멋지지 않을수가 있을까. 아마 프론트엔드 개발자 뿐 만 아니라 QA, 데브옵스, 여러 다양한 분야의 개발자 분들에게도 엄청난 매력을 가진 시스템이리라.

 

---

sentry의 서막

흔히 서비스의 에러 로그를 수집한다 함은 아마 백엔드의 로그 트래킹을 의미할 것이다. 예를들어 Elasticsearch Logstash Kibana와 같은 것들을 사용한 로그 수집이 그 예이다. 말 그대로 백엔드에서 주관하고 있기 때문에 서버 에러에 대한 로그가 중점으로 기록되게 된다.

 

물론 SSR(server Side Rendering)으로만 이루어진 서비스라면 상단과 같은 방식으로 기록한 로그들로도 충분한 정보를 얻을 수 있다. 하지만 요새 CSR(Client Side Rendering) + SPA (Single Page Application)의 조합 혹은 SSR(Server Side Rendering) + CSR(Client Side Rendering)의 조합을 선택한 서비스가 많아지면서 다양한 사용자들의 환경에서 서비스가 실행되겠고, 클라이언트 단에서 발생하는 이슈가 생길 수 밖에 없는 현실이다.

 

예를들어 각종 브라우저에 관한 이슈, 모바일 기기별 이슈 등이 그 예시가 될 것 같다.

이로써 프론트엔드 개발자들도 사용자들이 어느 부분에서 에러를 맞이하게(?) 되는지에 대한 로그를 수집할 수 밖에 없게 되는데, 이때 사용되는 것이 바로 Sentry.io이다.

 

물론 센트리 말고도 여러 방법들이 있겠지만 가장 간단하고 가장 많이 쓰이는 것 같아 조금 더 알아보기로 했다.

 

sentry 장점

 

1. 인정받은 솔루션이다

센트리를 찾아보며 정말 많은 블로그를 참고하였다. (감사합니다) 그 중 라인 기술블로그, 리디북스 기술블로그 등을 확인 하였는데, 해당 기업들에서도 sentry를 사용한다는 포스팅을 보았다. 국내/외에서 불특정 다수의 대국민 서비스를 개발하는 회사들에서 채택한 것이라면 나와같은 개인보다 더 꼼꼼하게 살펴보았을 것이고, 해당 요건들을 어느정도 충족한다는 의미라고 생각한다.

 

2. 구축이 쉽다
사실 구축과 관련된 부분은 나도 지금 자료수집 정도라서 크게 할 수 있는 말이 없어 쓰기 애매하지만 많은 분들이 입을 모아 말하는 것은 구축이 쉽다는 점이다.
- 리액트 용 센트리 : https://docs.sentry.io/platforms/javascript/guides/react/
- 뷰 용 센트리 : https://docs.sentry.io/platforms/javascript/guides/vue/
상단 링크에 들어가보면 npm과 yarn을 통한 설치 방법이 잘 나와있다. (우리가 흔히 하는 npm install ~~~ 한 줄) 설치가 완료되었으면 https://sentry.io/welcome/ (센트리 공식 홈페이지)에서 회원가입을 한다.(순서가 바뀌어도 상관 없다) 서비스와 맞는 조건을 넣어 회원 가입을 완료하게 되면 DSN코드를 발급해 주는데, 해당 코드를 https://docs.sentry.io/platforms/javascript/guides/react/performance/ 에 나와있는 것 처럼 init 시켜주면 끝! 그리고 엔트리포인트에 sentry를 import 시켜주면 된다고 한다.

 

3. 지원해주는 플랫폼이 많다
공식 홈페이지 기준 지원해주는 플랫폼이 정말 많다. 많아서 다 적기 힘드니까 https://sentry.io/platforms/ (https://docs.sentry.io/platforms/)공식 홈페이지에서 직접 확인하는걸 추천한다.

 

4. 지원해주는 알림이 많다
sentry는 통이 큰지… 한 두 개 지원해주고 지원된다고 하지 않는 스타일이다. 이슈가 체크 되면 깃랩/깃헙/지라/슬랙 등등 다양한 방법으로 알림을 받을 수 있는데, https://docs.sentry.io/product/integrations/ 이 역시 많으니까 공식 홈페이지에서 직접 확인하는걸 추천한다. 알림 받는 서비스의 특성에 따라 지원 정도가 조금씩은 다른 부분이 있다.

 

 

5. 다양한 정보를 제공한다

해당 오류가 디바이스의 문제인지, 브라우저에 대한 오류인지, 유저가 사용하는 OS가 무엇인지, 어느 경로로 접근하였고, 어떤 코드에서 에러를 일으켰는지 등의 정보를 제공해준다고 한다.

 

센트리 단점

단점이 분명 존재할 것이다. 세상에 완벽한 것은 없으니까..! 다만, 나도 아직 사용 전이고 단점에 대한 글이 많이 없어 정리할 내용이 많지는 않다. 앞으로 사용해보고 해당 글을 수정하며, 장/단점을 추가 할 계획이다. 혹 글을 읽으시며 느끼실 부족한 정보력에 대하여 미리 심심한 사과를 드린다.

 

1. 유료서비스

센트리는 무료 서비스와 유료 서비스로 나뉜다. 여느 솔루션들과 마찬가지로 유료 고객을 최대한 많이 유치하여야 하기 때문에 제공되는 서비스의 양과 질에 차이가 있을 수 밖에 없다. 기본적으로 계정과 레포팅 수에 대하여 차이가 압도적일 것이기 때문에 테스트용 혹은 정말 소규모 서비스에서 맛보기용으로는 무료를 추천, 이미 중-대규모 서비스에서는 유료를 사용하는 것이 필수불가결하다고 생각된다.