[번역] Sentry.io 및 React를 사용한 프런트엔드 모니터링

원문: https://blog.openreplay.com/front-end-monitoring-with-sentry-io-and-react

이 글에서는 프런트엔드 모니터링이 무엇인지, 왜 중요한지, Sentry를 사용하여 모니터링을 시작하는 방법에 대해 자세히 살펴보겠습니다.

프런트엔드 모니터링이란

간단히 말해서 프런트엔드 모니터링은 웹 사이트 또는 앱의 성능을 추적하는 데 사용되는 일련의 프로세스 및 도구입니다.

프런트엔드 모니터링은 주로 사용자가 최종적으로 보는 부분에 중점을 둡니다. 여기에는 다음과 같은 문제가 포함됩니다.

• 느린 렌더링
• 일관되지 않거나 응답하지 않는 사용자 경험
• 네트워크 요청/API 오류
• 프레임워크 관련 문제

프런트엔드 모니터링의 중요성

웹 사이트가 더욱 강력해지고 복잡해짐에 따라 성능 유지 관리가 점점 더 어려워지고 있습니다.

프런트엔드 성능은 사용자 경험의 일부입니다. 때때로 사용자는 웹사이트에서 처음 보고 경험하는 것을 기반으로 그 기업의 품질을 평가합니다. 사이트가 중단되거나 오류가 발생한다면 웹사이트의 신뢰와 신뢰성이 상실될 수 있습니다. 따라서 프런트엔드 모니터링은 견고한 웹 사이트와 앱을 개발하는 데 필수적인 부분입니다.

React에서 Sentry 시작하기

다행스럽게도 현재 프런트엔드 성능을 추적, 기록 및 모니터링하는 Sentry와 같은 몇 가지 강력한 도구가 있습니다. Sentry는 Java, PHP, Ruby, React, Rust, Unity 등 다양한 언어와 프레임워크를 지원하는 오픈 소스 오류 추적 도구입니다.

이 튜토리얼에서는 React 앱에서 Sentry를 사용하여 모니터링 구성 및 시작에 대해서 알아보겠습니다.

1단계. Sentry 프로젝트 설정

sentry.io에서 무료 Sentry 계정을 만드세요. 계정 생성 후 프로젝트 생성 버튼을 클릭합니다.

이제 프로젝트의 플랫폼으로 React를 선택하고 프로젝트 이름을 입력합니다. 프로젝트 생성을 클릭하여 새 Sentry 프로젝트 설정을 완료합니다.

2단계. Sentry SDK 설치

React 앱에서 다음 명령어로 SDK를 설치하여 Sentry를 통합할 수 있습니다.

npm install @sentry/react @sentry/tracing

다음과 같이 React 앱의 index.js 파일에 설치된 패키지를 가져옵니다.

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

import { Integrations } from "@sentry/tracing";

3단계. React 앱에서 Sentry 구성

Sentry가 React 앱에 연결하려면 Sentry DSN(데이터 소스명) 이라고 하는 클라이언트 키로 SDK를 구성해야 합니다.

클라이언트 키를 얻으려면 아래 스크린샷과 같이 설정 > 프로젝트 > {내 프로젝트 이름}으로 이동하면 됩니다.

그런 다음 클라이언트 키(DSN)를 클릭하고 DSN 값을 복사합니다.

앱의 index.js 파일로 돌아가서, import문 아래에 Sentry.init() 메서드를 추가하여 앱을 Sentry 프로젝트에 연결합니다. index.js 파일은 다음과 같아야 합니다.

import React from "react";
import ReactDOM from "react-dom";
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";
import App from "./App";

// 아래 코드를 추가하세요.
Sentry.init({
  dsn: "Your DSN here", // 복사한 DSN 값을 여기에 붙여넣으세요.
  integrations: [new Integrations.BrowserTracing()],

  tracesSampleRate: 1.0, // 프로덕션 환경에서는 수치를 더 낮춰야 합니다.
});

ReactDOM.render(<App />, document.getElementById("root"));

샘플 비율(SampleRate) 정보

테스트하는 동안, tracesSampleRate를 1.0으로 유지해도 됩니다. 이것은 브라우저에서 수행된 모든 작업이 Sentry에 트랜잭션으로 전송됨을 의미합니다.

프로덕션에서 Sentry의 트랜잭션 할당량에 도달하지 않고 균일한 샘플 데이터 크기를 수집하려면 이 값을 낮춰야 합니다. 또는 샘플 데이터를 동적으로 수집하기 위해 traceSampler를 사용하여 이러한 트랜잭션을 필터링할 수 있습니다.

샘플링 옵션에 대한 자세한 내용은 여기 문서에서 찾을 수 있습니다.

4단계. 테스트 통합

앱을 구성하고 나면 간단한 버튼으로 성공적으로 통합되었는지 테스트할 수 있습니다.

return <button onClick={methodDoesNotExist}>Bad Button</button>;

앱을 실행하면 다음 오류가 발생합니다.

이제 Sentry 대시보드에서 오류가 제대로 추적되었는지 확인하겠습니다. 아래 이미지에서 볼 수 있듯이 ReferenceError가 있습니다.

5단계. 사용자 지정 오류 캡처

React에서 오류를 캡처하는 것 외에도 Sentry는 앱 내에서 지정된 오류도 캡처할 수 있습니다.

예를 들어 Color Organizer React 앱에서 사용자가 같은 색상을 두 번 추가할 경우 오류를 발생시키고자 합니다. 현재는 아래 클립에서 볼 수 있듯이 경고 창만 표시합니다.

중복 색상이 있을 때 오류를 발생시키기 위해 addColor 함수에 throw 문을 추가해 보겠습니다.

const addColor = (title, color) => {
    if (colors.some((c) => c.color === color)) {
      throw "Color already exists"; // throw 문을 추가하세요.
    } else {...}

그런 다음, 이 함수를 호출할 때 try-catch 문을 추가하기만 하면 됩니다. 반드시 Sentry.captureException()을 사용해야 트랜잭션으로 캡처되어 Sentry로 전송됩니다.

먼저, App.js 파일에서 Sentry를 사용하기 위해 패키지를 가져옵니다.

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

addColor 함수가 호출되는 함수에서 다음과 같이 try-catch 문을 추가합니다.

try {
    addColor(title.value, color.value);
} catch (e) {
    Sentry.captureException(e);
    console.error(e);
}

이제 동일한 색상 코드로 새 색상을 추가하면 오류가 발생하고 Sentry로 전송됩니다.

Sentry 대시보드의 이슈에서 캡처한 사용자 지정 오류를 볼 수 있습니다.

성능 모니터링 활성화

오류 추적 외에도 export문에서 App 컴포넌트에 Sentry.withProfiler()를 감싸주어 Sentry 대시보드에서 성능 모니터링을 활성화할 수 있습니다.

export default Sentry.withProfiler(App);

성능 탭으로 이동하여 FCP(최초로 컨텐츠를 볼 수 있는 페인트 단계), API 요청의 대기 시간 또는 중단되는 시간 등과 같은 중요한 항목을 모니터링하고 측정합니다.

Session replay 오픈소스 소개

OpenReplay사용자가 웹 앱에서 수행한 작업을 볼 수 있는 세션 다시보기 제품군입니다. 오픈소스이며 발생한 문제를 더 빨리 해결할 수 있도록 도와줍니다. OpenReplay는 데이터를 완벽하게 제어할 수 있도록 자체 호스팅됩니다.

OpenReplay를 무료로 사용하며 디버깅 경험을 즐기세요.

결론

프런트엔드 모니터링은 오늘날 웹 개발 관행에서 서서히 보편화 되었습니다. Sentry와 같은 강력한 도구는 유용한 통찰력과 오류 관리 기능을 제공하여 사용자 경험을 풍부하게 할 수 있습니다.

더욱 강력한 것은 OpenReplay가 Sentry와 통합되어 더 빠르고 쉬운 디버깅을 위해 재생된 활동을 보낼 수 있다는 것입니다. OpenReplay를 Sentry와 통합하는 방법에 대해 자세히 알아보려면 이 링크를 방문하세요.

읽어 주셔서 감사합니다. 이 글이 프런트엔드 모니터링과 Sentry를 시작하는 데 도움이 되었기를 바랍니다.