Follow along stream of a side project

DrKnoxy — Tue, 06 Aug 2019 22:40:41 +0000

Hey i'm thinking of doing a live stream while I build out an idea for a side project.

stack: nextjs, react, firebase

concept: a travel journey focused on writing
set apart: not focused on image only, focus on wysiwyg experience over twitter style limit.

not sure how far i'll get tonight

50 replies and i'll start a live stream!

About me: 10y dev experience, 3y with react 😁 arright

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

DrKnoxy — Thu, 20 Dec 2018 01:53:55 +0000

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.

It is really easy to overlook the second parameter in an effect hook.
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.
When your usage quota is exceeded in Firebase you can't even access your admin panel.
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

Are you left with any proprietary advantage when building a Javascript app?

DrKnoxy — Thu, 20 Dec 2018 00:00:02 +0000

I'm using firebase to build a client side app that I intended to monetize. It occurred to me though that if source maps are accessible then I'm essentially publishing the entire source minus config, build, db rules, and a handful of cloud functions.

Has anyone thought much about this?

DEV Community: DrKnoxy

Follow along stream of a side project

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

Are you left with any proprietary advantage when building a Javascript app?