Bugs From Hell: Web Developer Edition

Every now and then I have the pleasure to encounter bugs which leave me absolutely clueless even after thinking about all sane possibilities. Here's one of those:

We have a landing page where the user has to enter his zip code (which is stored in cookies) and is forwarded to the webshop afterwards. In the webshop we read the zip code from the cookies at page load and fetch data accordingly (some products are not available in some areas). Every now and then no data was fetched. Why? Because the zip code was not set in cookies. Wait what? I made sure the cookie was set correctly after entering the zip code, but after page load it was not there anymore. As soon as I set a breakpoint before the cookie was accessed the problem disappeared, so I knew it was some timing-problem. The cookie was always accessible after the page was fully loaded. Was it the browser persisting the cookie "too slow"? No way, it's all synchronous.
Suddenly the solution struck me (it was one of those Matrix-moments where I was not in control of my mind)! On the landing page we're using prerender. This had to cause the problem (I still had no clue how exactly at this point)! Some googling revealed: yes it does. The browser tries to resolve cookie conflicts for you, but in that case it only made things worse it seems.

Here's some thoughts from the Chrome developers on that topic.

And here's someone else experiencing a similar (the same?) issue.

While debugging this insanity I came across a really cool library which allowed me to cross out some possibilities quite fast. It allows you to halt your code whenever a variable is accessed or modified (without changing your code!). This way I ruled out that some third-party code was modifying my cookies.

Generally speaking when debugging the most important thing is to reproduce the problem yourself. You might not be able to reproduce it consistently (I couldn't either), but you get a good idea of what could possibly be wrong. Afterwards you have to come up with possible causes for that error. Make sure not to rule something out because you think "it's impossible". Everything is possible, it's an unforeseen bug after all! Next you focus on one after another of the possible problems you came up with. Using a lot of knowledge about the parts being involved (libraries, browser, etc) you will eventually come up with a solution. :)

PS: In case you have a similar problem but don't use prerender it's probably someone who is reading the whole cookie-string (, potentially modifying it) and writing it all at once afterwards, instead of adding / modifying just his own cookie. Again, the above library quickly ruled that possibility out for me.