javascript 의 try-catch, React 에서는 불필요할까?

대세가 되어버린 React 에서 컴포넌트를 ErrorBoundary 로 감싸는 것 말고

try - catch 는 어떻게 사용하면 좋을까에 대한 의견이다.

 

React 에서는 ErrorBoundary 가 try-catch 와 매우 유사하게 작동한다.
하지만 try-catch는 명령형 프로그래밍에 보다 적합하고 React 와 같은 선언형 프로그래밍에는 ErrorBoundary가 보다 포괄적이다.

ErrorBoundary에서 포착하지 않는 것

1. 이벤트 핸들러
2. 비동기적 코드 (예: setTimeout 혹은 requestAnimationFrame 콜백)
3. 서버 사이드 렌더링
4. 자식에서가 아닌 에러 경계 자체에서 발생하는 에러

일반적인 에러처리

일반적인 상황에서는 그냥 ErrorBoundary 클래스를 선언하고 에러처리를 하면 된다.

ErrorBoundary 는 공식적으로는 아직 함수형으로 선언할 수 없고 클래스형으로 선언해야한다.

 

import * as React from 'react';

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

  static getDerivedStateFromError(error) {
    // 에러가 발생한 경우 변경할 state를 처리한다. state 처리 후 fallback UI를 보여준다.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
	// 아래는 리액트 공식문서의 예시이다. 본인이 사용하는 서비스의 로그처리를 하면 되겠다.
	// 직접 만든 로그 기능, Sentry 등
    logErrorToMyService(
      error,
      // Example "componentStack":
      //   in ComponentThatThrows (created by App)
      //   in ErrorBoundary (created by App)
      //   in div (created by App)
      //   in App
      info.componentStack,
      // Warning: `captureOwnerStack` is not available in production.
      React.captureOwnerStack(),
    );
  }

  render() {
    if (this.state.hasError) {
      // 에러 발생 시 보여줄 컴포넌트를 fallback 으로 컴포넌트 전달하여 사용할 수 있다.
      return this.props.fallback;
    }

    return this.props.children;
  }
}

 

이벤트 핸들러 내 에러처리

ErrorBoundary의 경우 이벤트핸들러에 대해 처리하지 않으므로 이벤트 핸들러의 경우 try-catch를 사용한다. 

 

정리

특정 컴포넌트에서 Error 시 클라이언트단에서 UI 처리나 에러처리가 필요한 경우 ErrorBoundary를 커스터마이징하여 적용하고,

일반적으로는 ErrorBoundary 클래스를 하나 선언하여 적용할 수 있겠다.

이벤트 핸들러의 경우에는 try-catch 를 적용해주면 보다 안정적인 운용이 간으하겠다.