In this blog I’m going to talk through debugging an application with a JavaScript frontend and a Ruby on Rails backend. I recently made an application with this setup, and it was the first application I made where the front and backend were separated. This involves many benefits, but also its own unique set of challenges.
My debugging process in the broadest terms goes something like this: Identify the problem, identify possible causes, find the cause(s) of the problem, identify possible solutions, choose and implement a solution, repeat.
Identify the Problem (bug)
The bug I’ll be discussing involved re-rendering a value on my html page. The application was supposed to work as follows: the user clicks a button after filling out a form to make a ‘building’, then a JS event listener sends the information from the form to create a ‘building’ object in rails and JS and render the object on the page. At the same time it should add the cost of the building to a running tally kept by a ‘property’ object the building belongs to, and render the new tally on the page in place of an old value.
The building object was being created and running properly, but the tally was not updating properly. I would add a building to a property and see no change in the cost tally. Then I would remove the building and the cost would update to what it should have been with the building. I could add or remove a building and again the cost would update, but to the value it should have been one change before. Refreshing the page would always give me the correct values.
Identify Possible Causes
My method in the property class to reRender could have been broken, my eventListener callback function could have been wrong or the problem could have been with the rails method the reRender method was using to get the new cost. I determined quickly that my eventListener callback function was working correctly. I logged some of my values to the console and found that my server was passing on the old values instead of the correct ones. To examine my rails methods I used the pry gem to pause my code and let me debug in the console. This is where I found something odd. When using pry I was getting the correct values in the console, and then those correct values would be passed to the JavaScript. So it seemed that my debugging tool had actually fixed the problem, but not identified it.
Identifying and Implementing a Solution
Well, after some head scratching I came to the conclusion that my reRender method was fetching the cost value from the server before it was updated. Things were happening in the wrong order. So what could I do to get rid of this bug for good? I decided I could either force things to happen in a certain order, or I could force the reRender method to wait a small amount of time before fetching. I decided the best option was to force a short timeout using the setTimeout method. Even a half of a second provides more than enough time for javascript to send the information about the new building to the server and for the server to commit the new information to the database. Just like that my bug was fixed.
Thanks for reading this post, I hope it was enlightening!
Top comments (0)