This Ridiculous Bug Cost Me Thousands of Dollars!!

I couldn't believe these bugs ruined my newsletter!
*Newsletter*
Newsletter 🗞 - www.jamesqquick.com/newsletter
*DISCORD*
Join the Learn Build Teach Discord Server 💬 - / discord
Follow me on Twitter 🐦 - / jamesqquick
Check out the Podcast - compressed.fm/
Courses - jamesqquick.com/courses
*QUESTIONS ABOUT MY SETUP*
Check out my Uses page for my VS Code setup, what recording equipment I use, etc. www.jamesqquick.com/uses
*TIMESTAMPS*
00:00 - Intro
01:00 - Broken Astro Route
02:00 - String Interpolation Error
03:00 - What Could I Have Done?
06:00 - Incorrect HTTP Status

[@ajzack983]

after carful considerations I've decided that the best prevention for this bug is a good vs code color theme

[@JamesQQuick]

lol i'll keep that in mind

[@uscjake868]

Dang dude thats brutal. Proof that the smallest of things can have such an impact.

[@PieterWigboldus]

I think it can help if you start defining first the input and output, of the system and methods. The system can be defined in OpenAPI, methods with tests (TDD)

[@thegrumpydeveloper]

Lots of code solutions here but also monitoring subscriber counts and their source could help if something drops off. Observability and logging could have helped identify this issue earlier.

[@JamesQQuick]

Yeah paying more attention is something I'll do better this year!

[@elmalleable]

logging is important, since they dont return http status codes for errors , you'd have to check the the response is not successful (opposite of proving the subscription was successful) and log failures, or equally another request to validate that the subscriber exists and the log that response for monitoring, if you are not monitoring issues and errors, then you can't see sometimes play dumb with the code too and see what it does

[@eqprog]

Yep, came here to say this. Logging and also some sort of reporting dashboard and/or alert system would go a long way.

[@lukecartwright613]

Thank you for sharing this for others to learn. With Astro, does it generate Client or server code? Can you add logging and monitoring too?

[@JamesQQuick]

You can do both client and server code with Astro. and yes definitely need to add some monitoring and logging

[@naterpotatoers]

You’re brave for putting this out there, respect. This makes me more zealous about TDD

[@JamesQQuick]

Yeah I definitely need to look into testing

[@WebDevCody]

Does podia have rest api docs? It feels like their api is a backend for a frontend but you might be calling it think it’s an actually well crafted public api. The only reason I’d think they return JavaScript on an error is because they run it on their frontend to show an error message? Anyway sorry to hear about that bug. Sucks no one reached out sooner

[@JamesQQuick]

Nope! That's what sucks. They don't have an API at all. I just tried to reverse engineer their form submission. Ughhh lol

[@jelilabudu]

3:10 Yeah, linter couldn't catch the error because it sees the last closing bracket as a mere string character.

[@jordancalhouncom]

I hope this video blows up and gets you a nice influx in your newsletter, you're content is great!

[@JamesQQuick]

Thanks! Looks like signups are failing again even with the redirect and I have NOOOO idea why. UGH!

[@0xO2]

Finaly statement block is being executed always: only try or try+catch. So, why there's the error setup?

[@webcoderph]

thanks for sharing

[@JamesQQuick]

Thanks for watching!

[@omomer3506]

You shoulve tried switching it off and back in again, works wonders. Loool . Thanks for the teaching moment and will subscribe

[@JamesQQuick]

haha how did I not do think of that 🤣

[@aribasiebel]

I worked for a Unicorn. Their Saas backend endpoints broke all possible restful api best practices you can think of. The validation error is a property of the response wth a response status of 200 instead of 404. As their API is not public the bad code is still there ... offshore coders

[@ChristianKolbow]

damn. thanks for sharing

[@developerpranav]

I had subscribed this way, gonna subscribe again! :D Thanks for putting this out in public!

[@JamesQQuick]

THANK YOU!

[@MrRuudvane]

It still gives an error when signing up tp the newsletter today on 9th januari

[@JamesQQuick]

Yeah what the hell?!?! It's throwing an error even on the redirect too. What is GOING ON?!??!!

[@jordan4220]

I see so many situations where web developers just willy nilly expect a payload to be json. You have to check the content type in the header before doing this, especially if you don't control the API. This is why standards exist

[@theplaintech]

Admire the accountability and professionality... props.

[@JamesQQuick]

Always learning from mistakes :)

[@theplaintech]

@@JamesQQuick And passing along the experience to help the rest of us live our best [coding] life!

[@ClaudioBernasconi]

It hurts to see the bug/issue being so costly and non-trivial to fix. I hope you'll find a long-term solution for custom subscriptions for your email provider.

[@JamesQQuick]

Yeah maybe I need to look even more seriously. It's just a lot of work to move

[@codeSTACKr]

oh no! 🤯

[@eleah2665]

Wow. Quite a story. Thanks.

[@JamesQQuick]

Thanks for watching!

[@Cap10Chunks]

Thanks for sharing. It was nice to see a real costly mistake and how you debugged/fixed it. The fact that you don't have any testing around that is crazy. I do QA for a living. Hit me up. I'd be glad to help build some regression tests for you.

[@JamesQQuick]

So glad you enjoyed it! Definitely going to add some things to help with this. Thanks for the offer!

[@xWe2s]

as the saying goes: "ALWAYS VALIDATE THE INPUT", whether it's by end user or yourself in this case 😅🙌 but yeah, terrible play podia 😭👊

[@coffeeintocode]

Transparency for the win 👌 sorry for the opportunity loss though

[@JamesQQuick]

Glad you appreciated it!

[@DamonMedekMusic]

I've had to build backend Stripe and PayPal API endpoints but my computer burst into flames and I woke up 2 weeks later in a North Korean ditch.

[@jfprizzy]

Great content. After watching your video, I think the most pragmatic way to avoid these bugs in future, is to just not code at all at this point. How daunting... But thanks for sharing.

[@JamesQQuick]

So glad you got something out of it!

[@coder4liberty]

I would have tried to do some discovery on what Podia returns when it's 200. Then again accounting for the content of all possible error messages from a third party service might not be a road to go down

[@JamesQQuick]

Yeah the struggle is that they didn't used to return the gibberish. I tested it originally but at some point they must have changed things :(

[@dupre7416]

I'm going to link this video in my team' s Teams chat. There are a lot of good gotchas and troubleshooting on evidence.

[@JamesQQuick]

Hope it's helpful!

[@cduhn]

Tip: One other habit that will save you from tricky future bugs is to treat all responses < 300 and >= 200 as a potential success. Some services will respond to a successful POST with 201 Created, for example.

[@adampielach4942]

I think it's better to check what was returned from the response, because we can't be so sure about that. One of the quirks I've discovered in one of my company's projects was a silent bug with 201 success returning no data which was considered as a false result and ended up in a catch.

[@hohohotreipatlajele2044]

the importance of testing :)

[@JamesQQuick]

I knowwww!!

[@JohnWilliams-gy5yc]

Podia Backend Policy : Ah, ah. Not so fast, Mate.

[@fngkarp492]

Why do you even use regular fetch at first place?

[@JamesQQuick]

What do you use?

[@adampielach4942]

@@JamesQQuick There's nothing wrong with fetch, but it just lacks some additional error handling and some bells and whistles that, for example, axios has.

[@JamesQQuick]

Yeah that's fair. I kinda just go with whatever at the time.@@adampielach4942

[@guzcampos]

So, 8 months of not getting newsletter subscribers, weren't you regularly checking your subscriber stats on Podia to notice something? I'm not familiar with that platform but I assume they provide them? (New subscribers, bounces, unsubscribes, etc) In any case, great video and content, specially for JS beginners.

[@JamesQQuick]

I didn't pay a ton of attention. I just assumed I wasn't doing a good job of sending people to the newsletter

[@jasondunken]

I've run into the 200 status but with an error issue before, truly unhelpful.

[@JamesQQuick]

THE FREAKING WORST! lol

[@Arashi1138]

"without testing.... obviously" I felt that in real life =/

[@JamesQQuick]

I mean... 🤣

[@ste-fa-no]

Oooh, the old 200 with an error message or even empty 🤪🆘

[@oksen1990]

True, too many use the HTTP status codes in a wrong way, fx. returning 200 instead of 400 or whatever appropriate status fits when an error happens....

[@JamesQQuick]

Yeah it really screws things up!

[@dupre7416]

too many mustaches

[@DigitalKelvin]

Error logging

[@marcoio8742]

Wait, did you use Podia public api? if you expected a 200 from a public api then sorry but it's on you. You should have read the docs, provided they are correct. if you didn't use a public api then again it's on you 😢

[@JamesQQuick]

I reverse engineered it so no official API. And yes, that's risky lol

[@eqprog]

IMO it should have been a 204 response…. It found the end point but there was nothing to return

[@tpurves2006]

If you had a dashboard tracking metrics, you would/should have seen a decline, which would have caused you to look to see why your sub counts dropped.

[@christian-schubert]

If it gives you any comfort, I didn't even get as far as spotting the extra bracket, you had me all confused with 'POST' vs. 'post' 🤪 Still, this seriously has me questioning whether I should even continue pursuing programming altogether... UNBELIEVABLE 🤦 I gotta say though, sending back that 200 status is on the same level as storing passwords in plain text to a point where one could argue that it borders on gross negligence.

[@JamesQQuick]

haha thanks for sharing. and yes the 200 status is TERRIBLE!

[@GiorgioTedesco]

at first view maybe curly bracket... one more than enough...

[@JamesQQuick]

Great catch!

[@Siddharthpandey27]

If you just tested your code or written simple unit test it would have been prevented

[@iPankBMW]

Thats Copilot fault - it usually puts extra curly braces….

[@JamesQQuick]

Yeah it definitely happens sometimes!

[@kirayamato6128]

you don't test that api endpoint? lol? looks like you are not the one who code it.

[@LE8271]

Tested with vs code. It marks the second curly with red.

[@JamesQQuick]

It's just part of a string though. How would it know that that's something wrong?

[@LE8271]

@@JamesQQuick I suppose it marks as unclosed. But it seems pretty unconsistent I admit. Wanted to post you a link but now when I reopen the file it marks red at first render for a few seconds. Once render finishes it turns back to normal string color. :/

[@gabriellevesque2185]

Stop blaming them for not testing your own code! :P

[@th3n3rdman]

TS would catch this.... just saying...

[@JamesQQuick]

This is using TypeScript...how would it catch this?

[@adampielach4942]

It would not. Why would TS or any other linter care for what is inside string?

[@JamesQQuick]

Yeah that's what I was thinking@@adampielach4942

[@deatho0ne587]

3:50 a reason not to use string interpolation. Yes, it is nice but have seen this same mistake, glady it was caught in a day though. Edit: since this has gotten so many replies I do mention testing. I also mention why I might choose one over the other.

[@oksen1990]

I agree. I stay away from string interpolation if I can help it, and in my experience, it also makes the code easier to read.

[@johnm8358]

Nonsense, testing is a must with any code... Interpolation makes code must easier to read

[@deatho0ne587]

I actually do a mix - if variable part + var - if the string + vars are one line then interpolation - else (+ var)'s Saying that though since it is url with params, most frameworks have something to work with them.

[@deatho0ne587]

I agree that testing needs to be done, but string interpolation on multiple lines is hard to read.

[@johnm8358]

@@deatho0ne587 it's easier than reading multiple lines separated by plus signs

[@levyroth]

So the lesson here is to stop using silly third-party services and write your own code instead. As always.... Podia is not necessary imho.

[@JamesQQuick]

Well, that's asking a lot. Podia is an entire platform with TONS of features. That would take me wayyyyy too long to build myself and my code would definitely be error prone. That said, this is pretty shitty on their part. I'm definitely upset lol

[@mateja176]

It’s turtles all the way down. At some point you will have to rely on someone else’s code.

[@thomassynths]

zzzzzzz way to much buildup and hype

[@buddy.abc123]

What even is Podia? In all honesty these 3rd party services are unnecessary but the js influencers keep pushing them so we'll keep hearing about them

[@WebDevCody]

It’s a complete platform for hosting your courses, newsletter, refunds, discount codes, communication with students, etc. building all of this stuff yourself is a waste of time because now all your time is spent building a course platform but all you want to do is sell a course. The drive to implement everything yourself is a good sign of a junior engineer.

[@JamesQQuick]

lol I had someone else say this is the reason to build it all yourself, and I was like...no chance lol

[@omomer3506]

Js is an unnecessary abstraction, we should all just create our version, for every program .................