React에서 에러 추적 및 로깅 설정하기

 

React 애플리케이션을 개발하면서 에러는 피할 수 없는 요소입니다. 하지만 에러를 무시하거나 단순히 콘솔에 출력하는 것만으로는 문제를 완벽히 해결할 수 없습니다. 효과적인 에러 추적 및 로깅 시스템을 구축하면, 문제를 빠르게 파악하고 사용자 경험을 개선할 수 있습니다. 이 글에서는 React에서 에러를 효율적으로 추적하고 로깅하는 방법을 단계별로 알아보겠습니다.

---

1. 에러 추적 및 로깅의 중요성

React 애플리케이션은 복잡한 상태와 동적인 UI를 다루기 때문에 에러가 발생할 가능성이 높습니다. 에러를 추적하고 로깅하면 다음과 같은 이점이 있습니다:

• 문제 진단: 발생한 에러의 원인을 빠르게 파악할 수 있습니다.
• 사용자 경험 개선: 사용자에게 영향을 미치는 문제를 최소화할 수 있습니다.
• 예방적 유지보수: 패턴화된 에러를 발견하고 사전에 해결할 수 있습니다.

---

2. React에서 에러 추적의 기본: Error Boundary

React는 컴포넌트 트리에서 JavaScript 에러를 감지하고 복구하기 위해 Error Boundary를 제공합니다. 이는 React 16에서 도입된 기능으로, 컴포넌트 트리를 보호하고 사용자에게 친화적인 에러 화면을 제공할 수 있습니다.

Error Boundary의 구현

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 에러 발생 시 상태를 업데이트
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 에러 로깅
    console.error("Error Boundary Caught an Error:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>문제가 발생했습니다. 잠시 후 다시 시도해주세요.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

사용 방법

ErrorBoundary를 사용하여 특정 컴포넌트를 보호할 수 있습니다.

import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

주의사항

ErrorBoundary는 렌더링, 이벤트 핸들러, 비동기 코드, 서버사이드 렌더링에서 발생하는 에러를 처리하지 못합니다. 이를 보완하기 위해 추가적인 도구가 필요합니다.

---

3. 로그 관리 도구 통합하기

현대 웹 애플리케이션에서는 로깅 도구를 사용하여 에러 정보를 효율적으로 수집하고 관리합니다. 아래는 대표적인 로깅 도구와 React 연동 방법입니다.

(1) Sentry

Sentry는 에러 및 성능 모니터링 도구로, React 애플리케이션에서 자주 사용됩니다.

설치 및 설정

npm install @sentry/react @sentry/browser

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

Sentry.init({
  dsn: "<YOUR_SENTRY_DSN>",
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0, // 성능 추적 샘플링 비율
});

Error Boundary와 통합

Sentry에서 제공하는 ErrorBoundary를 사용할 수도 있습니다.

import { ErrorBoundary } from "@sentry/react";

function App() {
  return (
    <ErrorBoundary fallback={<h1>문제가 발생했습니다.</h1>}>
      <MyComponent />
    </ErrorBoundary>
  );
}

(2) LogRocket

LogRocket은 에러 로그뿐만 아니라 사용자 세션 기록도 제공합니다.

설치 및 설정

npm install logrocket

import LogRocket from "logrocket";
LogRocket.init("your-app-id");

LogRocket은 사용자 세션과 연결된 에러를 확인할 수 있어 디버깅에 유용합니다.

---

4. 콘솔 로그를 대체하는 커스텀 로깅 시스템

에러를 콘솔에 출력하는 대신, 사용자 정의 로깅 함수를 만들어 서버로 전송하거나 다른 저장소에 저장할 수 있습니다.

예제: 로깅 함수 구현

function logErrorToService(error, errorInfo) {
  // 에러 정보를 외부 서비스로 전송
  fetch('/log', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ error, errorInfo }),
  });
}

class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    logErrorToService(error, errorInfo);
  }
}

---

5. 비동기 코드에서 에러 처리

React의 Error Boundary는 비동기 코드에서 발생하는 에러를 감지하지 못합니다. 따라서 비동기 함수에 추가적인 에러 처리 로직을 구현해야 합니다.

예제: 비동기 에러 처리

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) {
      throw new Error('데이터를 가져오는 데 실패했습니다.');
    }
    return await response.json();
  } catch (error) {
    console.error(error);
    // 에러 로깅 서비스 호출
    logErrorToService(error);
  }
}

---

6. 결론

React 애플리케이션에서 에러 추적 및 로깅은 안정성과 사용자 경험을 위해 필수적인 요소입니다. Error Boundary를 활용해 UI를 보호하고, Sentry나 LogRocket 같은 도구를 통합하여 에러를 체계적으로 관리하세요. 또한, 커스텀 로깅 시스템을 구축하거나 비동기 에러 처리를 구현해 더욱 완벽한 에러 관리 환경을 만들어보세요.

이 모든 과정을 통해 React 애플리케이션의 신뢰성과 유지보수성을 한층 높일 수 있을 것입니다.