How I wasted 10 hours fixing the most disgusting bug I have ever come across

I usually don't do this but today I decided to share a little anecdote from my life as a web dev.

​

I currently work on a project that is used by \~100k people. Our help desk was flooded by a specific bug and it was my task to figure out a solution. The bug can roughly be described as follows:

When executing some steps of the application repeatedly and in a very specific order then something interesting happens. The new repetition was affected by the users previous actions, although they should be completely unrelated. I.e. the user was submitting a form and then immediately started filling out a now form. Weirdly, some of the values of the previous form sometimes found a way into the new form and were hiding there.

I won't got into more details as I feel like they are completely irrelevant for this post, but the most interesting things about it were

1. I could reproduce it sometimes but not consistently, which makes it incredibly annoying to test 2. Every time I was debugging it the issue suddenly completely disappeared

The first part is always a strong indicator that I was dealing with race conditions, which are [notoriously difficult to debug](https://www.reddit.com/r/java/comments/l470e5/can_you_share_your_experience_with_race/). However, the second part was even more annoying. Whenever I started observing what happens at any point in time, I completely changed the codes behaviour. This is what is called *Heisen Bug*, named after similar phenomena in the field of quantum physics. This not only applied to console.logs but also when running the app with a debugging tool active. This happens because "observing" objects in JS can alter the time when they are evaluated.

The fix in the end was a simple one liner. I had to deep copy an object on initialisation instead referencing it. Some async tasks were sometimes delaying the timing when this object was reset, so some properties were silently finding it's way into the new supposedly empty object. The main reason I'm sharing this is because I would have easily saved multiple hours of frustration had I been more aware of [this phenomenon](https://stackoverflow.com/questions/4057440/is-chrome-s-javascript-console-lazy-about-evaluating-objects) that is Chrome specific. A simple `console.log({...obj})` helped me to understand at what point the error started to happen.

Now I know that devtools warns you about it with a small icon, but it's so easy to overlook its significance and I think a surprising number of people are not aware of this at all.

​

**Edit:** as others pointed out `console.log(JSON.parse(JSON.stringify(obj)))` is much better than `console.log({...obj})`