## Overview

UI debugging is used to identify errors/issues in retrieving and visualizing metric data in widgets. By showing the entire path i.e. from fetching the metric data from the time series database, collecting it from different instances and then merging this data so as to visualize it in widgets, UI debugging is an important troubleshooting feature that you can utilize.

Users can click on the widget menu and select the debug option to start or view the debugging session.

## Home Page

The interface includes a table on the left, displaying IDs for specific requests . Users can click on an ID to view the corresponding request and response times across the different components on the right panel.

## Request Table

As mentioned above, the table present on the left side includes the list of the latest 10 requests sent by the dashboard to visualize the metric data. The table constitutes of the following:

- ID: A unique ID assigned for each request to fetch metric data for visualization. Clicking on an individual request ID displays the request/response received from across different components like NodeJS process, Tomcat process and TSDB (time series database).
- Req Time: It is the time when a request is sent from a widget to fetch the metric data.This time is driven by the server time of the machine on which you are accessing the metric.
- RespTime(ms): Response time is the total time taken to get the metric data from all components i.e Node Js,Tomcat and TSDB.

## NodeJs

The NodeJS section displays the request/response data from the NodeJS process. In case of large deployments, metrics are collected from the target and stored at different nodes. The NodeJS process is responsible for collecting metric data from different nodes and consolidating it to make it easier to visualize the data from multiple sources in a single widget. NodeJS contains two subsections.

- Request: It will display the request that is sent to multiple nodes to fetch the metric data from each node. It shows important data like widget ID, time period for which metric data is required, whether any aggregation and formula is applied along with the user details via which the user is logged in.
- Response: It shows the response received by the NodeJS process which displays the important information like time taken by NodeJS to respond , user details, and the status of the response. Primary objective of the NodeJS process is to combine the metric data from different nodes.

## Tomcat

The Tomcat process of each instance receives requests from the Node.js process to fetch the corresponding metric. These metrics are then forwarded to the time series database (TSDB), where the actual metric is stored and a response is generated. Tomcat receives the response from TSDB and sends it back to the Node.js process.

For example, let us consider there are three different instances which contain the metric data therefore under Tomcat you will be able to see the request and response of all these three instances in different tabs.

- Request: This shows the request that is being sent from the Tomcat process to fetch the metric data and contains all the information that is received from the NodeJS request along with the data based query that will be used to fetch the metric data.
- Response: It contains the corresponding response received against the request made by the Tomcat process and it contains information like metadata and the actual metric data that Tomcat process retrieves from the TSDB. Additionally, it contains the status codes and response time for each request.

Note: Both the request and response section contains the timestamp of when the request is sent and response received.

## TSDB

The TSDB or Time Series Data Base is the actual database where the metric data is stored. The original request to retrieve the metric data is served by TSDB. Currently both the request and the response received from TSDB is encrypted and hence we don't show it as it is not in a readable format.

Note: Both the request and response section contains the timestamp of when the request is sent and response received.

## Export

Users will have an option to export the data to a file as download where all the json files of a particular request will be downloaded into a file to be analyzed later.