Sentry란?
Sentry는 어플리케이션에서 발생하는 에러를 자동으로 감지하고 추적합니다. 에러는 매일 감지되며 ip, 브라우저 정보, os정보 등 세부적인 정보를 제공합니다.
Sentry공식문서에서 볼 수 있듯이 여러 언어, 프레임워크를 지원합니다.
왜 사용할까?
지금 진행 중인 moadong 프로젝트가 얼마 전 사용자에게 배포되었습니다. 배포하고 나서 문득 그런 생각이 들었습니다. "사용자에게 보이는 에러는 어떻게 방지하지?"
로컬에서 발생한 에러는 개발자 눈에 보이기 때문에 바로 고칠 수 있습니다. 반면 사용자에게 에러가 났을 때 언제 에러가 발생했는지, 무슨 에러인지 파악할 수 없습니다.
Sentry는 로컬 환경이 아니어도 배포 주소만 설정하면 사용자에게 뜨는 모든 에러를 추적할 수 있습니다. 더 세세한 에러에 대처하고, 사용자에게 최대한 편한 UI/UX를 제공하기 위해 저희 프론트엔드 팀은 Sentry를 적용하기로 하였습니다.
적용하기
시작하기
Sentry에 먼저 접속해줍니다.
여기서 GET STARTED 를 눌러줍니다.
로그인
여기서 저는 깃허브 계정으로 로그인하였습니다.
Organization 만들기
Sentry내에서 쓸 Organization을 만듭니다. 이름은 자유롭게 지어주시면 됩니다.
Data Storage Location은 US로 설정해주었습니다.
플랫폼 설정
React를 클릭해줍니다.
아래 설정은 자유롭게 해주세요. 그 다음 Create Project를 합니다.
라이브러리 설치
위 사진처럼 자신의 프로젝트 폴더에서 npm install --save @sentry/react를 합니다.
SDK 설정
주의 : dsn에 나와있는 key는 자신의 sentry 프로젝트에 부여된 고유한 key이기 때문에 노출하면 안 됩니다.
해당 키를 .env파일에 설정해 주세요.
추가로 제 프로젝트에서는 여러 sdk를 사용하고 있었기에 initSDK.ts 파일을 따로 생성한 다음 각각 함수로 묶어주었습니다.
// initSDK.ts
export function initializeSentry() {
if (process.env.NODE_ENV === 'development') {
return;
}
Sentry.init({
dsn: process.env.SENTRY_DSN,
sendDefaultPii: false,
release: process.env.SENTRY_RELEASE,
tracesSampleRate: 0.1,
});
}
// index.tsx
import {
initializeSentry,
} from './utils/initSDK';
initializeSentry();
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement,
);
root.render(<App />);error 테스트
로컬에서 에러를 테스트하기 위해 먼저 if (process.env.NODE_ENV === 'development') 를 주석처리 해 둡니다.
그리고 나서 임시로 error 코드를 작성합니다.
import React from 'react';
import * as Styled from './Footer.styles';
const Footer = () => {
return (
<>
<Styled.FooterContainer>
<Styled.Divider />
<Styled.FooterContent>
<Styled.PolicyText>개인정보 처리방침</Styled.PolicyText>
<Styled.CopyRightText>
Copyright © moodong. All Rights Reserved
</Styled.CopyRightText>
<Styled.EmailText>
e-mail:{' '}
<a href='mailto:pknu.moadong@gmail.com'>pknu.moadong@gmail.com</a>
<button
onClick={() => {
throw new Error('test');
}}
>
test
</button>
</Styled.EmailText>
</Styled.FooterContent>
</Styled.FooterContainer>
</>
);
};
export default Footer;당연하게도 로컬에서는 에러가 발생할 것입니다.
예상대로 에러가 잘 나옵니다. 그럼 이제 Sentry에 해당 에러가 추적되었는지 확인해봅시다.
Sentry 이벤트 화면
이벤트 목록에서 에러가 잘 뜨는 것을 확인할 수 있습니다. 
이벤트 수, 유저 수를 보여줍니다. 브라우저 정보, 릴리즈(개발 및 배포 환경), URL, environment(어떤 환경에서 발생했는지) 등을 볼 수 있습니다.
여기선 어떤 동작이 에러를 발생시켰는지 볼 수 있습니다. 문자가 이상하게 나오는 것은 소스맵 문제입니다. 해당 내용도 추후에 추가할 예정입니다.
배포 서버 설정
저는 netlify에서 배포하고 있었기 때문에 deploy settings의 environment에 새로운 variables로 dsn을 설정해주었습니다. 환경변수를 추가하지 않으면 배포 사이트 에러를 추적할 수 없기에 꼭 해주셔야 합니다.
디스코드 웹 훅 연동
저희 팀은 디스코드와 깃허브를 연동하여 작업 시 활발하게 사용 중이었습니다. sentry에도 웹 훅 연동 기능이 있어서 겸사겸사 연동을 해 보았습니다.
organization settings -> Integrations -> Discord 순입니다.
Add Installation을 누르면 아래와 같은 창이 나옵니다.
여기서 프로젝트 Discord를 선택하고 승인을 눌러줍니다.
승인이 완료되면 알람 세팅을 할 수 있습니다. 어차피 개발 서버에서 실행되지 않기에 All Environments로 설정해 줍니다.
저는 간단하게 이슈 생성 시(에러 발생)에 알람을 주도록 하였습니다.
두번째 설정은 자유롭게 해 주시면 됩니다. 중요한 것은 세 번째 설정인데, 여기서 알림을 받을 디스코드 채널 Id를 입력해야 합니다. 
나머지 설정도 완료한 다음 Save Rule을 합니다. 이제 디스코드 알림이 오는지 확인하겠습니다.
잘 오는 것을 볼 수 있습니다. Assign은 해당 에러를 팀원에게 할당하는 기능입니다.
에러를 해결했다면 Resolve를 합니다.
마치며
이상으로 Sentry 설정과 디스코드 연동까지 해 보았습니다. 지금까지 에러는 개발자에게만 일어나는 것이라 생각했습니다. 사용자에게 배포하고 나서 에러에 대한 시각이 더 넓어진 느낌이 들었습니다. 이제부터 사용자에게 불편함 없이 서비스를 제공하기 위해 한 층 더 나아가 보려고 합니다.
