A scheduled Podcast episode, broke my website

This is a case study on what happened to my personal portfolio, when I uploaded a podcast on Spotify and scheduled it for later.

Let’s jump into it.

Context:

I recently started my own tech podcast - Tech Bytes with Pratyay, a short, crisp podcast consisting of aha moments and bug stories to listen on the go!

• I decided to use the Spotify Web API to fetch metadata for my podcast and display the podcast episodes on my Portfolio website - pratyaydhond.github.io/.

  • This would be a better time investment as I wouldn’t be hard-coding the podcast episodes and they would be updated automatically every time a new episode was released.

  • Already having this done for the blogs, I knew the process on the high level.

    1. Create an account for Spotify Developers.

    2. Create an Application and give desired API permissions - Web API for my use case.

    3. Get the required tokens - ClientID, showId, ClientSecret.

    4. Write code to fetch podcast data from Spotify API and display on the website.

The above process seemed very neat. It was working on my machine post coding, and even on deployment.

I was being able to render the podcast and it’s episodes on the website.

While I uploaded the first episode - Pilot, I decided to schedule the next episode a week away. That’s when the trouble began.

Discovering the Problem

• I was about the post the podcast on my Whatsapp status to distribute it to my peers, I thought of opening the link once, and boom, the website was not working, the console was full of errors.

• I tried running the same on localhost instance, and it was crashing as well. The website was not opening at all.

  • There was one error → Failed to render image, image is null.

  • Spotify’s web api was sending metadata for scheduled episode that was not published yet!

This was interesting, as I was getting data from Spotify, I had assumed it will be of the podcasts that have been published, but Spotify was sending me data for all my podcasts, even the scheduled ones.

Patching this up

• Fixing the problem was easier than its identification. It was fixed by writing code to filter out null values i.e. the scheduled or draft podcasts from the display arrray and to only show the already released ones on the website.

• return data.items?.filter(episode => episode && episode.id) || [];

  • The above line made sure that no episode that is unpublished would be returned.

• This one line of code change fixed the website. I ran the deployment for production and it was fixed. ;)

Learnings

• Read API Documentation for the usecase, do not directly have full faith in what AI does..

• If something breaks, it’s okay don’t panic.

  • Try to find out what changed since the last working version. Is it input? Data? Output? The process? External API?

  • Often the problem would be a single line of code that needs to change. Spend time to figure out what that line is.

Have you faced similar API surprises? Share your story in the comments!