Sentry란?
Sentry는 오픈 소스 오류 추적 소프트웨어로, 애플리케이션에서 발생하는 예외나 오류를 실시간으로 모니터링하고 분석하는 데 사용됩니다. 개발자들은 Sentry를 통해 오류를 자동으로 감지하고, 문제의 원인을 신속하게 파악하여 사용자에게 영향을 미치기 전에 수정할 수 있습니다. 웹, 모바일, 서버와 같은 다양한 플랫폼에서 사용할 수 있습니다.
왜 Sentry를 사용하나요?
실시간 오류 추적
애플리케이션에서 오류가 발생하면 Sentry는 즉시 이를 감지하고 알림을 제공합니다. 이를 통해 개발자는 오류가 더 큰 문제를 일으키기 전에 빠르게 반응할 수 있습니다.
문제의 원인 분석
Sentry는 오류 발생 시점의 상황을 자세히 기록하여, 오류의 원인을 빠르게 파악할 수 있도록 도와줍니다. 이 정보에는 사용자의 상태, 실행 중이던 코드 스택, 변수의 값 등이 포함될 수 있습니다.
개선된 사용자 경험
오류를 신속하게 해결함으로써 사용자 경험을 개선하고, 애플리케이션의 신뢰도를 높일 수 있습니다.
팀 협업 지원
Sentry는 팀과 협업하여 오류를 관리하고 해결하는 기능을 제공하여, 작업의 효율성을 높이고 문제 해결을 가속화합니다.
이러한 기능들로 인해 Sentry는 개발자들 사이에서 인기 있는 오류 관리 도구 중 하나로 자리잡았습니다. 오류를 더 빨리 해결하고 애플리케이션의 안정성을 강화하고자 하는 개발 팀에게 권장됩니다.
기본 설정 설명
// main.tsx
import * as Sentry from "@sentry/react";
import { Integrations } from '@sentry/tracing';
Sentry.init({
dsn: "", // 회원가입후 입력
release: packageInfo.version, // 여기서 'release version'을 실제 릴리스 버전으로 바꾸세요.
environment: 'production', // 실행 환경을 설정합니다.
normalizeDepth: 6, // 이벤트 및 객체 정규화 깊이를 설정합니다.
integrations: [
new Sentry.Integrations.Breadcrumbs({ console: true }), // 콘솔 로그를 자동으로 Breadcrumbs에 포함합니다.
new Integrations.BrowserTracing() // 브라우저 트레이싱을 활성화합니다.
],
// 트랜잭션을 추적하는 비율을 설정합니다. (예: 1.0은 100%, 0.1은 10%의 트랜잭션을 추적합니다.)
// 이 옵션을 추가하지 않으면, 트랜잭션 추적 기능이 작동하지 않습니다.
tracesSampleRate: 1.0
});
기본 사용 방법
// 오류 처리 예제: 로그인 로직
onError: error => {
console.error('에러 발생:', error);
setAlertOpen({ open: true, message: '아이디 또는 비밀번호를 잘못 입력했습니다.' });
// Sentry를 통해 예외 사항을 기록합니다.
Sentry.captureException(error); // 기본적인 예외 보고
Sentry.captureException(new Error('로그인 에러가 발생하였습니다: ' + error)); // 추가적인 에러 메시지 포함
},
withScope 사용 이유 및 방법
Sentry.withScope 메소드를 사용하는 이유는 특정 오류 또는 이벤트에 대해 추가적인 컨텍스트를 제공하고자 할 때입니다. 이를 통해 Sentry에 보내지는 오류 보고에 태그, 사용자 정보, 오류 레벨 등을 동적으로 추가할 수 있습니다. 이 방식은 오류 관리를 매우 세밀하게 조정할 수 있도록 해 주어, 오류의 원인과 문맥을 더욱 명확하게 파악할 수 있게 도와줍니다.
// 오류 처리 예제: 로그인 로직
onError: error => {
console.error('에러 발생:', error);
setAlertOpen({ open: true, message: '아이디 또는 비밀번호를 잘못 입력했습니다.' });
// withScope를 사용하여 오류 보고에 추가적인 정보를 포함시킵니다.
Sentry.withScope((scope) => {
scope.setTag("operation", "login"); // 오류가 발생한 작업에 태그를 설정
scope.setLevel("error"); // 오류의 심각도를 'error'로 설정
scope.setExtra("loginData", loginInfo); // 오류 발생 시점의 로그인 데이터 추가
// 오류를 Sentry로 보내어 기록합니다.
Sentry.captureException(error);
});
},Sentry의 configureScope를 사용한 사용자 정보 포함
configureScope는 Sentry에서 제공하는 기능으로, 오류 보고 시 사용자 정보를 포함하도록 설정할 수 있습니다. 이를 통해 발생한 오류에 대한 사용자의 세부 정보를 함께 볼 수 있게 되므로, 오류의 원인을 분석하고 문제를 해결하는 데 매우 유용합니다.
사용 이유
configureScope를 사용하는 주된 이유는 모든 오류 이벤트에 자동으로 사용자 정보를 첨부하여, 오류가 발생했을 때 그 오류가 어떤 사용자에게서 발생했는지 쉽게 파악할 수 있게 하기 위함입니다. 이 정보는 특히 다수의 사용자가 동시에 애플리케이션을 사용하는 환경에서 오류 관리와 모니터링을 효과적으로 수행하는 데 필수적입니다.
기본 설정 방법
configureScope는 Sentry 초기화 코드 또는 사용자의 로그인 로직에 적용할 수 있습니다. 사용자가 로그인할 때 사용자의 정보를 Sentry의 스코프에 설정하고, 사용자가 로그아웃할 때는 이 정보를 제거할 수 있습니다.
// Sentry 설정 파일 또는 사용자 인증 관리 모듈
import * as Sentry from "@sentry/react";
export function loginUser(user) {
Sentry.configureScope(scope => {
scope.setUser({
id: user.id, // 사용자 고유 ID
email: user.email, // 사용자 이메일
username: user.username // 사용자 이름 (선택적)
});
});
}
export function logoutUser() {
Sentry.configureScope(scope => {
scope.setUser(null); // 사용자 정보 제거
});
}
Sentry의 configureScope를 사용한 사용자 정보 포함
configureScope는 Sentry에서 제공하는 기능으로, 오류 보고 시 사용자 정보를 포함하도록 설정할 수 있습니다. 이를 통해 발생한 오류에 대한 사용자의 세부 정보를 함께 볼 수 있게 되므로, 오류의 원인을 분석하고 문제를 해결하는 데 매우 유용합니다.
기본 설정 방법
configureScope는 Sentry 초기화 코드 또는 사용자의 로그인 로직에 적용할 수 있습니다. 사용자가 로그인할 때 사용자의 정보를 Sentry의 스코프에 설정하고, 사용자가 로그아웃할 때는 이 정보를 제거할 수 있습니다.
// Sentry 설정 파일 또는 사용자 인증 관리 모듈
import * as Sentry from "@sentry/react";
export function loginUser(user) {
Sentry.configureScope(scope => {
scope.setUser({
id: user.id, // 사용자 고유 ID
email: user.email, // 사용자 이메일
username: user.username // 사용자 이름 (선택적)
});
});
}
export function logoutUser() {
Sentry.configureScope(scope => {
scope.setUser(null); // 사용자 정보 제거
});
}
사용 예시
사용자가 시스템에 로그인하는 순간, 그리고 중요한 변동 사항이 생길 때마다 사용자 정보를 Sentry 스코프에 업데이트하거나 제거함으로써, 모든 오류 보고에 이 정보가 포함되도록 할 수 있습니다. 이렇게 하면 개발팀은 오류가 발생했을 때 사용자의 세부 정보를 즉시 확인할 수 있으며, 오류의 원인을 더 빠르고 정확하게 진단할 수 있습니다.
