A TEXT POST

How to avoid crashing your AJAX Web app

During a couple of weeks i have been developing an issue tracking system. We decided to build it with HTML5, CSS3 and AJAX since it’s a in-house only product. Basically, in comes down to nothing fancier than jQuery-magic.

Eventually, i started to notice a bug, where everything kind of crashed after leaving the page idle for a while. After refreshing the page, everything worked. I’ve spent approximately a week on debugging this issue, due to interference from some other bugs. The Console said: Object [Object object] is not a reference to a  function -  when trying to execute a jQuery Plugin. After tinkering with the plugin, jQuery and a lot of other javascript it finally hit me.

It wasn’t javascript the screwed me over (actually, well yeah, it kinda was) - my session simply timed out. My Ajax call were redirected to the login page, whom recognized my cookie and signed me back in. The login page contained additional jQuery instances and javascript - so my javascript backfired.

Solution:

How did i solve it? Since my server side session would be refreshed by simply interacting with the page, i.ex. by making a GET request i decided to do exactly that.

I made sure i was polling my server after 5 minutes idle time and reload the list of current issues to see any updates. Which was nice, since auto refreshing was on my todo-list.

The polling is a simple setTimeout(fn, interval) plus a clearTimout which was triggered on user interaction.

…. And me and my code lived happily forever on!