Debug an app
When you develop an app, you're likely to encounter different types of issues which require troubleshooting. Some common issues include:
- A component or connection that is not working as expected.
- An unexpected component configuration that propagates incorrect data to the next component, or no data at all.
- Errors from API requests.
- Failure to publish an app.
These issues can occur during development, user-acceptance testing, or when your app is in use by end users.
To help you debug and resolve such issues, use the following tools:
When connecting components to propagate data, Uiflow displays a
{...} link beside each output and input node. Click the link to show a preview of the data being sent or received, or an error message when API errors occur.Note: The
{...} links are only available after you preview the application in a new tab or refresh the Preview panel.This example shows a REST API component named GET All Products that propagates information about available retail products to a Console component. Click
{...} beside the val node in the Console component to show the data that was received from the connection.
This example shows a REST API component named GET All Products that fails to pass information to the Console component. Click the
{...} beside the val node to view the error message.
To expand or collapse the data in a data preview, click the arrows on the left of the data preview pop-up. This example shows the same set of data expanded and collapsed.
The Console component outputs information to Uiflow's Log Details panel when you preview your application. This section provides overviews of the following topics:
The Log Details panel displays the following log filters:
Note: When you select a log type, the Log Details panel displays only logs of that type.
- All: Displays all logs.
- Information: Displays only informational logs (e.g. data received).
- Errors: Displays only error logs.
- Warnings: Displays only warning logs.
- Clear: Clears the Log Details panel.
Note: By default, the Log Details panel displays logs from current and past application previews. To ensure you only view current log information, clear the the log before triggering a new application preview.
Errors can come from many sources including third-party APIs. To help you identify the source of an error, select the error in the Log Details panel. This highlights the component that triggered the error in the Logic panel.
You can then work backward through each component in the flow to find the underlying source of the issue.
Note: CORS errors are a common source of API request errors. When they occur, CORS errors typically appear in your app’s error log. To learn more about a logged error, research it in your web browser.
To help identify error messages in the logs, you can change the label property of the console component. This feature is helpful for complex apps, especially when debugging them in a production environment.
To create a custom error message:
- 1.Select the Console component.
- 2.Open the quick selection Actions menu and select an error value type.
- 3.Input a custom error message.
To open the Log Details panel, click View Logs at the bottom-right of the Logic panel.
You can use your browser's console and network log features to troubleshoot bugs in your apps.
For example, if an API call invoked by your app fails, Uiflow's logs may not help to find the cause. Browser developer tools enable you to run a post-mortem on the API request.
The following subsections provide information about using browser developer tools to debug apps:
The browser's Console log displays a general log of information and errors produced by your app.
To view the logs from your app, open your browser's Developer Tools and select the Console tab. The console log displays similar levels of detail to those available in Uiflow's Log Details pane:
You can also access the browser's console window by right-clicking in the Preview panel and selecting Inspect.
The browser's Network log displays all of the API requests invoked by an app:
Note: API requests are only recorded after opening the browser's developer tools.
Click an individual request in the Network tab to display additional information about that request.
Last modified 1mo ago