React Hook을 구현하는 데 실수를 저질렀고 백엔드에서 서비스 거부를 받았습니다.

Firebase 엔드포인트에서 React의 useEffect 후크를 간단하게 사용하는 것처럼 보이지만 실수로 몇 분 만에 50,000개의 읽기/일 할당량을 초과했습니다.

function Page() {
  const [meetings, setMeetings] = useState([]);
  useEffect(() => {
    return firebase.firestore().collection('/meetings').onSnapshot(query => {
      setMeeting( query.docs.map(m => m.data()) );
    });
  });

  return (
    <ul>
      {meetings.map(m => <li>{m.title}</li>}
    </ul>
  )
}

효과는 상태 변경에 의존하지 않으므로 두 번째 매개변수를 생략했습니다. 내가 깨닫지 못한 것은 setMeeting가 호출될 때마다 함수의 본문이 다시 실행되어 데이터 가져오기에 루프가 발생한다는 것입니다.

그래. Firebase의 무료 등급은 몇 분의 개발 작업에서 초과한 50,000개의 읽기/일 할당량을 제공합니다. 추적하는 것도 고통이었습니다. Chrome devtools의 Net 탭이 Firebase에 대한 요청을 두드리고 있다는 것을 깨달았을 때 성능 탭으로 서둘러서 "오프라인 모드"로 이동해야 했습니다. 그런 다음 요청 중 하나의 페이로드를 살펴보고 어떤 데이터가 요청되었는지 파악하는 시간을 가졌습니다.

수정 사항은 componentDidMount 및 componentWillUnmount와 같이 한 번만 실행되어야 함을 나타내기 위해 빈 대괄호를 추가하는 것입니다(firebase 호출의 반환은 마운트 해제하려는 리스너입니다).

useEffect(() => {
  // return firebase...
}, []) // this guy

문제를 해결한 후 일시 중지하고 근본적인 문제에 대해 생각했습니다.

효과 후크에서 두 번째 매개변수를 간과하는 것은 정말 쉽습니다.

firebase/firestore에 대한 서버 측 속도 제한 구현이 없습니다. 따라서 악의적인 사용자나 코드의 버그는 무료 계층을 중단하거나 유료 사용자에게 막대한 비용을 청구할 수 있습니다. Google 콘솔의 할당량 관리 도구에서 어떤 엔드포인트가 언제 손상되었는지 시각화하는 좋은 방법조차 없었습니다.

Firebase에서 사용 할당량을 초과하면 관리자 패널에도 액세스할 수 없습니다.

오류 처리는 이런 종류의 것을 포착하지 못합니다.

해피 해킹,


참고문헌

Unsplash에 있는 Andrew Gaines의 사진

Firebase는 실시간 데이터 스토리지 솔루션을 위한 넉넉한 프리 티어를 제공하는 서비스로서의 백엔드입니다

.