Sentry로 오류 추적을 빠르게 추가하는 방법 — 관련 코드

Sentry은 기존 프로젝트에 빠르게 연결할 수 있는 오류 추적 및 성능 모니터링 라이브러리입니다. 이것은 상당한 양의 버그를 감지하는 데 특히 유용하며 React 앱에 쉽게 통합될 수 있습니다.

시작하자!

설치

먼저 필요한 타사 라이브러리를 설치하겠습니다.

yarn add @sentry/react @sentry/tracing

Sentry는 가능한 한 빨리 Sentry를 초기화할 것을 권장합니다. React 앱에서 이것은 일반적으로 index.jsx/index.tsx입니다.

import * as Sentry from '@sentry/react'; 
import { Integrations } from '@sentry/tracing';

Sentry.init({ 
   dsn: 'APPLICATION_DSN', 
   integrations: [new Integrations.BrowserTracing()], 
   tracesSampleRate: 0.2, 
});

코드를 살펴보면 애플리케이션을 초기화합니다. tracesSampleRate 속성은 Sentry에 대한 트랜잭션 양을 직접 제어합니다. 0 - 1 사이의 값이 될 수 있습니다. 당분간은 0.2로 두겠습니다.

이제 제대로 작동하는 DSN을 얻으려면 Sentry 계정을 만들어야 합니다. 그들의 페이지에서 이것은 매우 간단한 과정입니다. React에서 설정하는 방법을 자세히 설명하는 간단한 섹션도 제공합니다. 플랫폼을 선택하는 동안 새 프로젝트를 생성할 수 있는 옵션이 제공됩니다.

센트리 플랫폼 선택

반응을 선택합시다. 다음 화면에서 DSN과 Sentry를 초기화하는 방법이 포함된 위와 유사한 코드 스니펫을 볼 수 있습니다.

테스트

이제 Sentry가 초기화되었으므로 계속해서 테스트할 수 있습니다. 내가 선호하는 통합 방법은 대체 구성 요소를 사용하여 내 구성 요소 주위에 Sentry Error Boundary를 래핑하는 것입니다.

import * as Sentry from '@sentry/react'; 

<Sentry.ErrorBoundary fallback={<p>This is a fallback</p>}> 
    <MyComponent /> 
</Sentry.ErrorBoundary>

강제로 오류를 발생시키려면 구성 요소에 다음 코드를 작성해 봅시다.

const errorMethod = () => { throw new Error('Error'); }; 

return ( 
<button onClick={errorMethod} type="button"> 
    Break the world 
</button> );

버튼을 누르면 오류가 발생하고 바로 Sentry로 전송됩니다.

참고로, 광고 차단기(uBlockOrigin/Brave 브라우저)가 있는 경우 Sentry가 오류 및 성능 모니터링을 추적하기 위해 쿠키를 사용하므로 비활성화해야 합니다.

버튼을 누르면 Sentry 대시보드에 다음과 같은 내용이 표시됩니다.

Sentry 문제 항목

그리고 그게 다야! 아래 의견에서 일반적으로 Sentry 또는 오류 추적에 대해 어떻게 생각하는지 알려주십시오.

Relatable Code에서 더 많은 콘텐츠 찾기

2021년 10월 24일 https://relatablecode.com에서 원래 게시되었습니다.