앞서,
현재 프로덕트에서 서버는 에러로그를 기록하기 위한 cloudwatch가 연동되어 있는데,
프론트에는 에러 로그를 남기는 로직이 없었다.
하나의 액션에서 에러가 계속 발생되는데 이 액션이 디벨롭에서는 확인이 안되었고,
생기는 경우가 파악이 안되어서 기록되는 로그를 보면서 에러를 추적해야했는데
이러한 로그를 확인할 수 있는게 서버 로그밖에 없었고 그 과정에서
프론트에도 필요한 부분에는 로그를 확인할 수 있도록 수정해야겠다는 생각이 들었다.
순서
우선 로직 중 하나의 이벤트에서 에러나는 경우를 여러분기로 쪼개고
각 에러분기에다가 sentry 코드를 심어놓았다.
Sentry란 ?
프론트엔드에서 발생하는 에러에 대한 로그와 기록들을 남겨서 확인할 수 있는 툴(?)이다.
전체적으로 지원해주는 기능이 굉장히 많지만 위 기능만 사용할거기에 깊게는 알아보지는 않았다.
로그화면을 보면 에러가 발생한 플랫폼, 헤더내용, 에러가 발생하기까지의 api 요청, url에있는 query들 등 많은 내용을 전달해준다.
사이트에서는 성능문제를 추적할 수 있는 방법도 전달해준다고 한다.
사이트 : https://sentry.io/for/full-stack/
🩹 붙여보기
우선 첫번째로 프로젝트를 생성하라고 안내해주는데 프로젝트는 이전에 생성해 놓아서 스킵
https://docs.sentry.io/product/sentry-basics/integrate-frontend/create-new-project/
1. 생성 된 프로젝트와 코드 연결하기
생성 된 프로젝트에 들어가게 되면 package 설치 방법과 초기세팅방법을 안내해준다.
This is a quick getting started guide. For in-depth instructions on integrating Sentry with React, view our complete documentation.
2. 설치 명령어
yarn add @sentry/react @sentry/tracing3. _app.tsx 세팅
import * as Sentry from '@sentry/react';
import { BrowserTracing } from '@sentry/tracing';
useEffect(() => {
Sentry.init({
dsn: 'dsn 내용 ',
integrations: [new BrowserTracing()],
tracesSampleRate: 0.2,
});
}, []);이 옵션은 에러가 발생하기까지의 발생한 모든 트랜잭션을 전달할지 정하는 옵션이다.
1로 설정한다면 모든내용들이 다 전달되게되는데 이렇게되면 전달받는 내용이 많아질 수도있기때문에
에러 추적에 도움이 될 수도 있지만, 과한 정보때문에 에러확인에 오래 걸릴수도있다.
비교적 최근에 발생한 내용만 싶다면 0부터 1까지 숫자에서 조정하면 된다.
(잘못 된 내용일 경우 피드백 주시면 감사하겠습니다)
공식문서에 나와있는 안내대로 위와 같이 세팅해놓았는데
app 로직중에서 init 하는 로직들만 모아놓은 useEffect가 있어서 utils 함수로 빼내놓고 effect안에 내용을 추가해놓았다.
4. ⚡️ sentry utils 함수로 빼기
utils/sentry.ts
import * as Sentry from '@sentry/react'; import { BrowserTracing } from '@sentry/tracing'; const sentry = { init: () => { Sentry.init({ dsn: 'blahblah', integrations: [new BrowserTracing()], tracesSampleRate: 0.2, }); }, }; export default sentry;
app.tsx
useEffect(() => { authCheck(); blahblah.init(); // 다른패키지 sentry.init(); // sentry 연결 }, []);
세팅 후 로그 찍어보기
공식홈페이지 샘플코드를 제공해주어서 테스트 해볼 곳에서 코드를 추가해서 로그가 찍히는지 확
인 하면된다.
만들어둔 프로젝트에 위와 같이 샘플에러코드가 찍히는걸 볼 수있다!
상세내용과 이전에 어떤 행동을했는지 로그가 남아있기때문에 정보는 많이 전달받을 수 있을거 같아 활용하기 좋은것같으나 내용이 너무 많아 다 파악하는데는 시간이 조금 오래걸릴 것 같다.
사용한 handler (https://docs.sentry.io/platforms/javascript/guides/react/usage/)
captureMessage
여기서 users는 이벤트가 발생한 유저의 수고 events는 발생한 이벤트 수이다.
체크된 부분에는 에러가 발생한 url이 띄워지고 그 위에 색칠되어 있는 부분은 아래와 같이
메세지로 전달할 내용들이 찍힌 모습이다.
captureMessage(`${code}, ${message}`);
captureException
excption으로는 에러를 전달하도록 해놓았고 콘솔내용들과 에러가 발생한 api 주소를 확인할 수 있다.
마무리
붙이는데 생각보다 오랜시간이 걸리지 않았고 테스트를 하며 찍히는 로그들을 보니 나중에 디버깅 할 때 유용할거 같다는 생각이 들었다.
개발 초기에는 에러핸들링을 할 때 습관적으로 console.log만 찍도록 처리를 해놓았었다.
에러가 발생 될 수 있다는 사실을 간과하고 습관적으로 에러처리를 하다가
실제로 사용되는 서비스에서는 에러가 발생했을 때 유저에게 안내를 해주고 그에 따른 행위도 같이 해주도록 핸들링 해야된다는 피드백을 받았었었다.
당연히 해야되는 것들이였지만 당시에는 에러핸들링에 대해 깊게 생각하지 못했었는데 그 후로는 어떠한 에러가 발생했을때 어떠한 이벤트를 줘야할지 고민하고 분기처리를 해주었는데,
그것에서 더 나아가 센트리를 붙이면서
캐치해야되는 중요한 이벤트에서는 이렇게 로그를 남겨 계속 관리를 해주어야겠다는 생각이 들었다.
앞으로도 센트리를 자주 활용하면서 알게되는 내용들을 기록 해 놓는것도 좋을거 같다 😌
