I made a mistake implementing a React Hook and got a denial of service from my backend

This seemingly simple usage of React's useEffect hook on a Firebase endpoint accidentally ran through my 50k reads/day quota in minutes.

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>
  )
}

The effect isn't dependent on any state changing so I omitted the second parameter. What I failed to realize was that everytime setMeeting was called the body of the function would be executed again, causing a loop in the data fetching.

So yeah. Firebase's free tier offers a 50k reads/day quota that I exceeded in a few minutes of development work. It was a pain to trace down too. Once I realized that the Net tab in Chrome devtools was pounding out requests to firebase I had to hurry over to the perf tab and move into "offline mode". Then I had the time to take a look at the payload of one of the requests and figure out what data was being requested.

The fix is simply to add an empty square brace to indicate that this should only be run once, kind of like only componentDidMount and componentWillUnmount (the return from the firebase call is a listener we want to unmount).

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

After I fixed it though I paused and thought about the underlying problems.

1. It is really easy to overlook the second parameter in an effect hook.

2. There is no server side rate-limiting implementation for firebase / firestore. So any malicious user, or a bug in the code, can take down a free tier or charge a ton of money to a paying user. There wasn't even a great way to visualize what endpoint was being hammered, or when, by the quota management tool in Google's console.

3. When your usage quota is exceeded in Firebase you can't even access your admin panel.

4. Error handling doesn't catch this kind of thing.

Happy Hacking,

References

• Photo by Andrew Gaines on Unsplash
• Firebase is a Backend as a Service providing a generous free-tier for a realtime data storage solution