Mario's team had a nasty stutter in the UI of their web application. Frequently, when going back to the server for data, the UI would just hang. The requests themselves were happening asynchronously, and it wasn't just network lag anyway- the server was able to serve up large JSON responses well within any reasonable timelines. Certainly nothing in the timing justified such a nasty UI hang. So what was going on?

Well, in many of the places where they were handling JSON responses, specifically large JSON responses, this code was copy-pasted in multiple places:

// Note: Use group key as directory name to allow loadUploads to reconstruct the correct payload structure let uploadGroups = JSON.parse(JSON.stringify(payload)); for (let group of Object.keys(uploadGroups)) { Object.entries(uploadGroups[group]).map(([key, value]) => { … } }

payload, at this point, is already parsed into a JavaScript object. So this code takes an actual object, serializes it back out to a JSON string, and then parses that string one more time to turn it back into an object.

All of these choices are wrong.

Why was this being done? No one knows, not even the developer responsible. Since it's copy/pasted, it's likely someone made the mistake once, and then it just reproduced its way through the codebase.

Mario adds: "Suffice to say, most of the stutters and hanging disappeared after we just used the object."

The fact that there are other things in this code causing stutters hints at many more bad choices to be uncovered.

[Advertisement] Keep the plebs out of prod. Restrict NuGet feed privileges with ProGet. Learn more.