벨로퍼트 리액트 - 26. componentDidCatch 로 에러 잡아내기 / Sentry 연동
componentDidCatch 로 에러 잡아내기
새 프로젝트 생성
$ npx create-react-app error-catch
에러가 발생하게 되면 아무것도 렌더링되지 않고 흰 페이지만 나타나게 됨. 실제 사용시에 흰 화면을 나타내는 대신, 에러가 발생했다는 것을 알려주도록 해야함.
if (!user) {
return null;
}
// user 값이 존재하지 않을 시 null 을 렌더링
// => 아무것도 나타나지 않음 = null checking
// 아무것도 나타나지 않지만 에러는 발생하지 않음.
데이터를 네트워크 요청을 통해 나중에 받아오게 되는 상황이 발생하는 경우 null을 보여주거나 <div>로딩중<div> 과 같은 결과물을 렌더링 하면 됨.
예제)
function Users({ users, onToggle }) {
if (!users) return null;
// users에 값이 없을 경우, 렌더링 과정에서 오류가 발생할수 있으므로
// 다른 결과물을 반환하도록 함
return (
<ul>
{users.map(user => (
<li key={user.id} onClick={() => onToggle(user.id)}>
{user.username}
</li>
))}
</ul>
);
}
// onToggle을 props로 넣어주는것을 까먹지 않기 위해서 defaultProps로 메시지 출력 설정
Users.defaultProps = {
onToggle: () => {
console.warn('onToggle is missing!');
}
};
componentDidCatch 로 에러 잡아내기
사전에 예외처리를 하지 않은 에러가 발생했을 경우
import React, { Component } from 'react';
class ErrorBoundary extends Component {
state = {
error: false
};
componentDidCatch(error, info) {
// error : 에러의 내용, info: 에러 발생 위치
console.log('에러가 발생했습니다.');
console.log({
error,
info
});
this.setState({
error: true
// 에러가 발생한 경우 error가 true로 변경
});
}
render() {
if (this.state.error) { // error가 참이라면
return <h1>에러 발생!</h1>;
}
return this.props.children; // 그렇지 않다면 하위 컴포넌트 출력
}
}
export default ErrorBoundary;
Sentry 연동
componentDidCatch 를 사용해 에러가 발생했을때 사용자에게 인지시켜줄수는 있지만 실제로 호출되는 일은 없어야 한다. 만약 놓친 에러가 있다면 개발자가 예외 처리를 해야 한다.
만약 사용자가 발견하게 되는 오류가 있다면 componentDidCatch에서 error 와 info 값을 네트워크를 통해 다른 곳으로 전달을 해주면 된다. ⇒ Sentry 라는 상용 서비스 사용! (장기적인 프로젝트에 사용 권장)
벨로퍼트 리액트 - 27. 리액트 개발 할 때 사용하면 편리한 도구들 - Prettier, ESLint, Snippet
** VS Code와 연동가능한 도구들
- Prettier - 자동으로 코드 스타일을 관리. JS, HTML, CSS 및 React, Angular, Vue 등도 지원.
- ESLint - 자바스크립트 문법 확인. 터미널에서만 보이는 경고를 에디터상에서도 확인 가능.
- Snippet - 에디터 내장 기능. 자주 사용되는 코드에 대해서 단축어를 만들어 코드를 빠르게 생성해내는 것.
