Debugging Wo(e)ws
Debugging might be boggling, yet most thrilling too!
Prelude
It feels great to write my first blog in Hashnode! What better way to start, than sharing my own experience of diving deep into the code, that was not mine? I am an engineer who helps people on board with the product that I advocate for, right from the solution design till they get finally integrated with it.
I code, I code for fun, and I code to empathize with what others think. In the quest to make this even funnier, I try to run and debug others' code. That quest is where the plot for this post lies. In this post, I am sharing with you how I ended up debugging some other person's code, learned a new technology on the way and defended my product for its correctness. (Wow, I feel so relieved, #PatOnTheBack) Let's dive in to see what is there in store.
Plot
A customer, who wants to integrate with the fintech product that I advocate, IHelpYou, has gotten a tech vendor to help them with the integration. This would enable them to collect the fees for the courses they offer from the pupils. Well, there's the spaghetti situation here. This vendor, instead of having a direct integration, goes via a custom homemade soup (literally it is!), another product, to get on board with mine. The story revolves around the bug that was uncovered in the soup of the tech vendor, a missing ingredient ☺️
Prima Facie
The tech vendor's product, IamGreat, is built on an Angular JS stack (which I wasn't familiar during the time of the fateful incident). They were trying to verify the card payment from the users, by initiating a 3D Secure (3DS) Transaction. When the pop-up for 3DS comes up after the card details are entered by the pupil, the submit button doesn't work and the transaction keeps failing. This was happening only in Safari Browser for iPhone (iOS 13.3.1). After the 3DS prompt, submit, it takes back to the card details page with an Active Loading button. On clicking that Loading Button Again, the 3DS prompt comes again, and after entering the OTP again, successful redirection and transaction completion happens. This issue is happening intermittently. As the likelihood wins, IHelpYou was being blamed for some broken components and I was asked to rectify it. Based on the evidence provided (screenshots, logs), nothing could point to an error in IHelpYou.
Investigation Begins
I was intrigued by the missing pieces. Something deep in my heart said, Just do It! I started to debug their code using the safari code inspector. It wasn't that easy to begin with because:
I was not a front-end developer and to top it off, I was not familiar much with the Mac/Apple ecosystem.
I don't have access to the backend code of the vendor.
In my work scope, I m strictly advised not to code for the customers 😂
The best way to get a solution is to dive deep or ask for help. This blog post on debugging iOS code from Safari MacBook was quite handy. Further work led to these series of actions:
Borrowed a MacBook to set up the debug environment - ✔️
Pull out the old thunderbolt cable to connect iPhone 12 to the Mac - ✔️ (wireless chargers rock!)
Get a cup of tea 🍵 - ✔️
While debugging, I found that there was a race condition that was happening when IamGreat was calling the 3DS window. In XXXX.html, L297, a nonce (one-time authentication) value is obtained from the response of 3DS and stored correctly in BTNonyce element. Submit button for 3DS prompt works fine. After that, a button evntBTnoyce element is clicked using an explicit click() call in L299.
This button has an angular click event registered "GeNoyce()" that is available in PaymentController.js (L254). This method takes care of the redirection and does Confirm Payment(L261).
In case of a failure scenario: this method doesn't get called the first time. When the Loading button is triggered again, an OTP request is fired again and then this method is correctly called.
In case of success scenario: this method is called correctly in the first attempt itself.
What I found
This is not a IHelpYou product issue or a submit button issue of the 3DS frame (Yaay! 👏✌️). What could be done is something that could be investigated as to why the event call GeNoyce() is not being called on the click event in L299. It is the issue of Angular code event handling. One possible reason could be the lazy loading of the PaymentController.js script by Angular. In a failure case, the script doesn't get loaded and the function is not found. And once it gets subsequently loaded, it works fine the second time. While certain browsers are smart to correctly handle the multiple loading of scripts, maybe safari on iPhone has some restrictions around multiple loading.
Climax
The tech vendor got convinced of the findings. The fix came finally in the IamGreat product. This debugging helped me:
to isolate the problem, understand the flow and systematically conquer it,
to learn a new skill,
to understand debugging the right way, for the right cause, can be a wow instead of woe. 😎
The Aftermath
When debugging, one needs to go with an open mind. It is better not to have any prejudice about the complexity of the problem before even trying it out.
Whenever you see an issue, don't jump into the code directly. A systematic approach of looking at the logs, and getting familiar with the code base helps to solve the problem and save time.
Every debugging opportunity is a milestone in getting better at it. Always try to find a pattern from your experience and learn from peer experience.
Epilogue
This blog is dedicated to my dear friend Gordon who helped answer my queries about the Mac environment and his experience in debugging. A special shout out to my blogging sensei, Victoria, for sharing Hashnode's Debugging February Writeathon initiative and motivating me to come up with this article and share my experience. Thanks, Hashnode for coming up with this initiative to share and learn from experiences.