25. componentDidCatch 로 error 잡아내기 / Sentry 연동

# 만일 React 앱에서 에러가 발생한다면 아래와 같은 에러 페이지가 노출된다.

다만, 이 화면은 개발 환경에서만 보여지는 화면이고 실제 사용자에게 보여지는 화면을 보려면 우측 상단의 X 버튼을 클릭하면 된다.

 

https://react.vlpt.us/basic/26-componentDidCatch-and-sentry.html

 

아래 화면처럼 실제 사용자들에게는 빈 페이지만 노출되어 더욱 당황스럽게 할 것이다.

 

https://react.vlpt.us/basic/26-componentDidCatch-and-sentry.html

 

Null Checking

 

props 로 전달되는 user 가 존재하지 않는 경우를 분리하여 null 을 렌더링해주는 것이다.

 

function User({ user }) {
  if (!user) {
    return null;
  }

  return (
    <div>
      <div>
        <b>ID</b>: {user.id}
      </div>
      <div>
        <b>Username:</b> {user.username}
      </div>
    </div>
  );
}

이렇게 Null Checking 을 해주면 빈 페이지가 노출되는 것은 동일하지만, 에러는 발생하지 않는다.

이렇게 네트워크 요청을 통해 데이터를 받아오는 경우에는 Null Checking 을 하여 null 을 반환하거나 <div>Loading...</div> 와 같은 화면을 렌더링해야한다.

 

defaultProps 설정

 

function Users({ users, onToggle }) {
  if (!users) return null;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id} onClick={() => onToggle(user.id)}>
          {user.username}
        </li>
      ))}
    </ul>
  );
}

Users.defaultProps = {
  onToggle: () => {
    console.warn('onToggle is missing!');
  }
};

 

componentDidCatch 로 에러 잡아내기

 

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  state = {
    error: false
  };

  componentDidCatch(error, info) {
    console.log('에러가 발생했습니다.');
    console.log({
      error,
      info
    });
    this.setState({
      error: true
    });
  }

  render() {
    if (this.state.error) {
      return <h1>에러 발생!</h1>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

 

# componentDidCatch 메서드의 첫 번째 파라미터는 에러의 내용, 두 번째 파라미터는 발생한 위치이다.

따라서 해당 메서드에서는 error 값을 true 로 설정해주고, render() 에서 error 가 true 면 에러 발생! 문구를 노출시키고

아니라면 this.props.children 을 렌더링하도록 설정하였다.

 

// App.js
function App() {
  const user = {
    id: 1,
    username: 'velopert'
  };
  return (
    <ErrorBoundary>
      <User />
    </ErrorBoundary>
  );
}

 

Sentry 연동

 

# componentDidCatch 를 사용해서 에러가 발생했을 때 사용자에게 에러가 발생했음을 인지시켜주었지만,

componentDidCatch 가 호출되는 일은 없어야 할 것이다.

​

만일 개발자가 발견하지 못한, 사용자가 발견하게 되는 오류들은 Sentry 라는 서비스를 연동해주면

componentDidCatch 에서 error 와 info 값을 네트워크를 통하여 Sentry 서비스로 전달하여 볼 수 있다.

---

출처 : https://react.vlpt.us/basic/26-componentDidCatch-and-sentry.html

26. componentDidCatch 로 에러 잡아내기 / Sentry 연동 · GitBook