Quick Filter:

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
Baljeetsingh Sucharia

Baljeetsingh Sucharia

Founder & Chief AI Strategist at Sucharia Strategic Solutions. Ex-Microsoft Software Architect who constructs custom AI workflows and bespoke software for growing businesses.

README.md

Engineering & Leadership Logbook

Hey, welcome! I'm Baljeet.

This space is where I write down what I learn, build, and rethink while solving software and architectural challenges. Rather than keeping thoughts scattered across the web, I brought everything together into three open streams:

๐Ÿ“ Personal Blog
Long-form notes, code & design patterns
๐Ÿ’ผ LinkedIn Feed
Field notes on tech & engineering leadership
๐ŸŸง Stack Overflow
Hands-on solutions I've shared with developers

I love working fast with shortcuts, so I built this site to be browsed completely with your keyboard. Feel free to explore, filter what interests you, and make yourself at home!

Stream Switching
All Streams1
Blog Only2
LinkedIn Thoughts3
Stack Overflow4
Vim & Card Controls
Next CardJ / ↓
Prev CardK / ↑
Expand / Mini CardV / E
Toggle All Compact/FullX
Open SelectedEnter / O
Paging & Navigation
Older / Next PageN / >
Newer / Prev PageP / <
Prev / Next Article[ / ]
Scroll Top / BottomHome / End
Quick Tools
Trending ReadsT
README GuideR / M
Search TopicsS / /
Close / EscapeEsc
☕ Say hi, share feedback, or talk tech with Baljeet ↗