Debugging is one of the most important and unavoidable aspects of Software Development. There are multiple ways to debug an application. Here is an article written by Hemchander which takes you through the basics of debugging and debugging Freshworks front-end apps using Chrome Devtools.
This article will focus on debugging Freshworks serverless apps using Visual Studio Code’s (VSCode) built-in node debugger. To get started, let us assume a scenario, in which the number of recent posts from the Freshworks developer community (https://community.developer.freshworks.com) will be fetched using request method($request) and printed in the console.
Before we start with the app, let us test if we can fetch the latest posts from the community from the endpoint (https://community.developer.freshworks.com/posts.json) using Postman.
And from the above screenshot, we can see the endpoint returns the latest posts
Here is the app code for fetching the forum posts,
Run the app using fdk run and invoke the onTicketCreate event, the output is as follows
From the screenshot above we can see that there is an error and we do not exactly know what is the root cause, let us debug using the VSCode debugger to debug what is causing the error.
Setting up VSCode debugger
VSCode comes with a built-in node debugger and can be accessed from the highlighted area in the screenshot below
Configure the debugger
Click on the show all automatic debug configurations, select Nodejs in the pop-up and Create a new javascript debug terminal, as shown in the below GIF.
As a result of the previous step, a new debug terminal will be started in the integrated terminal in VSCode
Stop all the instances of the FDK server and start using fdk run in the newly started debug terminal
Add a debugger in the code(Line 10 in the GIF above), save the file to debug and check if the discourse_url is correct since we get a 502 error.
Once the debugger is added, invoke the onTicketCreate event from the event simulator page.
The onTicketCreate will be paused at the point in code where we added the debugger, to continue with the code execution, click the play icon in debug toolbar
In the left pane, the debug variables can be seen and from the value, we can see that the URL is misspelled (https://community.developer.freshworks.com/ instead of https://community.developers.freshworks.com/), let us correct that and invoke the event again.
Now we can make the API call, but we get another error, let us set another debugger to see what went wrong.
Invoke the event again to continue with the debugging process,
From the above screenshot, we can see in the debug console that the response is a JSON string, which we are trying to access like a regular JSON object, fix the bug using a JSON.parse() as shown in the following image. Let’s invoke the event again to continue with the debugging process.
After fixing all the bugs we can see that all the recent posts are fetched and the count is printed in the console.
VSCode’s debugger provides a wide variety of features. Only a subset of those are covered in this topic. Feel free to share with us if you have an interesting or much simpler way to debug Freshworks serverless apps.