The Caching Conundrum: A Tale of a Web App's Buggy Adventure

Image by storyset on Freepik 

Caching in web applications can be a powerful tool for improving performance and user experience, but it can also lead to some serious bugs if not handled properly. In this blog post, we'll explore one such bug that can occur when using caching in combination with client-side business logic and a service worker.

Let's Understand via this story

Once upon a time, 

there was a team of developers working on a web application that was designed to display currency values in different formats. The values were stored in a database and were displayed on the frontend in INR, USD, and GBP. The frontend logic for displaying these values was simple and everything was working smoothly.

One day, 

the team received a request to change the way the currency was stored in the database. Instead of storing the values in INR, it was decided to store them in USD. The developers made the necessary changes to the backend and deployed the new version to production.

However, as soon as the new version was live, 

the team started receiving complaints from users that the values displayed on the frontend were incorrect. The developers were confused and didn't understand what could have gone wrong.

After some investigation, 

they discovered that the problem was caused by the caching of client-side files and the use of a service worker. The frontend logic was still expecting the values to be in INR, but they were now in USD. The cached files were not updated and the service worker was not able to refresh them.

The team realized that 

they needed to come up with a solution to fix the problem. They tried different approaches but none of them seemed to work. They were about to give up when one of the developers had an idea.

Let's Check Fundamentals

That's when one of the team member - Baljeet asked team to relook at how we are displaying the values on frontend, on close examined he found one interesting solution.

So, Baljeet suggested that 

instead of sending the value from DB.Money, they start sending the value as DB.USDMoney. This would break the old contract and force the frontend to use the updated values. The team was hesitant at first but decided to give it a try.

To their surprise, 

it worked! The frontend was now displaying the correct values and the users were happy. The team was relieved and learned a valuable lesson about the importance of being careful when using caching in web applications.

From then on, they made sure to test thoroughly and have a plan in place to handle these issues if they arise again.

The end

- Baljeetsingh