Debug an app

Sometimes, the app may not work as you expect during the development or after published. A functionality could behave differently or not work at all. How would you go about finding what is happening or where is it happening?
You can fix the issue only if you find the root cause of the issue. So, it is important to consider these debugging perspectives in the initial development phase such that it helps you when things break.
Let’s learn how you can help yourself with easier debugging techniques.
First, let’s look at the types of issues that might occur and would require troubleshooting.
  1. 1.
    The expected functionality not working as expected.
  2. 2.
    Unexpected configuration in one of the components leads to no or wrong data passing through the other components.
  3. 3.
    Error from the API requests and additional platform features.
  4. 4.
    Failure to publish or install the app.
These issues could occur during the app development, user-acceptance testing, or when in use by the users. Specific methods are used for easier debugging for each of these levels.
Now, let’s look at the debugging features.

Data previews in Uiflow Studio

When connecting the data connection with another component, the data node at both components shows the preview of the data that flew through them in the recent run.
Let’s see how it can be viewed.
In this example flow, we have used a Console component. What is it?

Console component

The Console component is available in Uiflow Studio to print the output of any component into logs.
These logs are printed both in the Uiflow Studio logs tab and in the browser developer tools console.
Let’s see how the Console component can be used in a flow.
This Console component captures and prints the logs. But where do we see them?

Logs window

The View Logs button at the right-bottom of the Uiflow Studio opens up this Log Details tab. This Logs will cover logs from the entire flow that has been run since the Studio opened in a session.
When testing a particular flow, clear previously printed logs to view only the new ones to avoid confusion.

Browser developer tools

So far, we have seen the log usage and how to view them in the Uiflow Studio. Since the Freshworks app runs in the browser, the browser also captures these logs when run.

Console logs

To view the logs printed in a session, go to the Developer Tools (Inspect) and select the Console tab. These would be similar to the Logs tab in the Uiflow Studio capturing all the logs in a flow.
Since the Freshworks app loads within Freshdesk. Logs from Freshdesk will also appear in this Console logs.
Let’s see how to open this browser developer tools and console tab in it.
If an API fails, just the logs may not help find what exactly went wrong. It would be great if we could run a post-mortem on the API request. Browsers can enable you with that.

Networks logs

In the browsers, the API requests can also be checked in the logs.
Select the Network tab in the developer tools of the browser on the Freshdesk tab. It would have recorded all the API requests that happened in a session. Choose the particular API request that has been triggered from the Freshworks app built with Uiflow. Now, the API’s actual request and response can be viewed.
The API requests will be recorded only after opening the developer tools in the browser.
Let’s see how these API requests can be viewed for a particular request the app made.
We have gone through all the available debugging mechanisms. If you have noticed, error messages are one of the most useful provisions when a negative situation occurs and the issue has to be found.

Understanding the error messages

The error messages on the logs are important. The error message will often come from third-party APIs and the Freshworks platform. While these error messages can be understood from the documentation, they have to map to the scenario happening in the app and where are they sourcing from in the Uiflow components.
Uiflow Studio makes it easier to click on an error log, and the relevant component will be highlighted in the Flow panel. The issue can then be identified within the component’s inputs based on the error message and changed to fix the issue.

Custom error messages

To identify the error message better from the logs, the label of the Console component can be changed to the desired message to identify the scenario and where it is occurring.
It will be helpful when the app becomes complex and errors have to be debugged from the production environment.

The Beyond everything

Beyond a certain point, we might need help. It could be from a colleague, peer developers, support, or just a rubber duck.
When you need help with your Uiflow apps, you could always reach out for help.