Princess Program and the Pea
Sep 08, 2022

Princess Program and the Pea

If programs were people, they’d be like that one annoying princess who couldn’t fall asleep because of the pea under her 5 million mattresses.

When I was a kid I was told a version of the story where the prince would sneak into her room in the middle of the night and replace the pea with a bowling ball so she was sure to notice it. That makes the princess way less crazy and would make programs more like people with a split personality disorder, where one personality replaces all the peas with bowling balls, and the other complains about them and refuses to sleep. That makes this analogy a bit more complicated than it needs to be though, so never mind.

A program's sensitivity is a personality trait that every programmer wrangles with. I ran into one of these scuffs yesterday while I was adding a captcha to the comments form on this site. There are great walkthroughs online that made it pretty straightforward, like this one by Prateek Surana and this one by hCaptcha. Everything was working great locally, so I deployed, and then it exploded.

I worked on what I thought was the problem for over two hours. Unfortunately, those hours were wasted chasing several red herrings that happened to pop up at the same time without any correlation. I took a break, and after another hour of redeploying and googling and package updating and despairing, the red herrings magically disappeared on their own. I screamed into my hands for a little while then did what every programmer does in similar situations. I begrudgingly thanked the tiny spirit that lives in my computer for giving up on its terrible prank, and I soldiered on.

(Disclaimer: ignoring errors, even most transient ones, isn't a good long-term strategy because it adds to the technical debt that will inevitably come back and bury you alive if you're not careful)

The real bug had been hiding in the noise created by all those magic evil fish (the red herrings) and was easier to solve, but still quite baffling. I was getting the below error when I tried to submit a comment, but only on the web deployments. The local builds (dev and prod) wouldn't throw the error.

ClientError: GraphQL Error (Code: 401): {"response":{"error":"{\"errors\":[{\"message\":\"token verification failed: illegal base64 data at input byte 0\"}]...

This made it infuriating to debug. I experimented with the format of environment variables on Vercel, triple-checked secrets, recreated env variables, reverted commits, and googled every permutation of the issue I could think of. Finally, this stack overflow answer inspired the idea of sticking the auth header in a const variable instead of using a fancy template literal. And that did it. The princess's pea was a stupid, totally legitimate template literal.

template-literal-to-const-bug-fix.jpg

The comments form currently works, so I guess the princess program lived happily ever after.

I, on the other hand, am very much over it.

Leave a Reply

Related Posts

All Categories

© 2022 - 2024