Sentry 장점
- 이메일 또는 메신저(Slack) 연동을 통한 실시간 알림
- 에러가 발생하게 된 타임라인 추적
- IP 주소
- 브라우저, 디바이스, 운영체제 정보
- 에러 이벤트 발생 시간, 횟수
- 깃허브(Github) 연동으로 이슈 해결 및 버전 관리
- 시간지연 퍼포먼스 모니터링
위에서 제공해 주는 내용 만으로도 에러를 해결 하는데 상당한 도움을 얻을 수 있고 관련 내용을 버전 별로 관리도 가능하기에 프로젝트 안정성을 높이는데 유용하다.
Sentry install
# yarn
yarn add @sentry/react @sentry/tracing
# npm
npm install --save @sentry/react @sentry/tracingInit in React
import * as Sentry from "@sentry/react"
import { Integrations } from "@sentry/tracing"Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
release: "my-project-name@" + process.env.npm_package_version,
integrations: [new Integrations.BrowserTracing()],
tracesSampleRate: 1.0,
})
Sentry 에서 프로젝트를 생성하고 위와 같이 코드를 추가 해주면 에러 추적이 가능하다.
Sentry 에서 테스트 이벤트를 발생 시킬수도 있지만 Sentry를 초기화 해준 프로젝트에서 간단히 아래와 같이 에러를 발생시켜 보자.
throw new Error('Test error !!!')
이미지와 같이 Issues 목록에서 에러가 나타난다면 성공이다. 테스트 에러 내용을 확인해 보면 아래와 같은 정보를 확인 할수 있다.
IP, 브라우저, 운영체제, 태그 정보, 에러 정보
이슈 타임라인, 헤더 정보
브라우저 이름/버전, 단말기 정보, 운영체제 이름/버전, 추가 정보, SDK
Performance
웹 사이트 퍼포먼스 모니터링도 가능하다. API, javascript, image 와 같은 시간 지연이 높은 요소와 사용자 환경에 대한 정보를 알려 준다.
Github와 Slack 연동
Settings > Intergrations 에서 추가 할 수 있다.
