(Update WIP) Debug an app
When you develop an app, you're likely to encounter different types issues which require troubleshooting. Examples of 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.
You can use the following facilities to help you debug and resolve such issues:
When connecting components to propagate data, Uiflow displays a
{...} link beside each output and input interface. Click the link to show a data preview where you can see the data being sent or received:
The example above shows a Connection named Get Order that propagates information about sales orders along with API errors, to a Console component. Clicking on
{...} beside val in the Console component shows the data that was received from the connection.Note: You must first preview or refresh an existing preview of the app before the
{...} links are available.If the Connection encountered an error when trying to acquire information, click
{...} to reveal details about the error:
To expand or collapse the data, click the arrow in the data preview:
The following screenshot shows how the data preview appears when collapsed:
The Console component outputs information to Uiflow's Log Details pane when you preview or refresh a preview of your app. Display the pane by clicking View Logs near the bottom-right of Uiflow:
Uiflow opens up the Log Details pane:
The Log Details pane provides the following options:
- All: Displays all logs.
- Information: Displays only informational logs (e.g. data received).
- Errors: Displays only error logs. See Understanding error messages below for additional information about errors.
- Warnings: Displays only warning logs.
- Clear: Clears the Log Details pane. By default, the pane displays logs from current and past previews of your app. It can be useful to first clear the log before triggering your next preview, to ensure you're not confusing output from previous previews.
Errors can come from many sources including third-party APIs. To help you identify the source of an error, hover your mouse over an error in the Log Details pane to highlight the component in the Logic view that triggered the error. You can then investigate that component further and trace backwards through other connected components if necessary, to find the underlying source of the issue.
To help identify error messages in the logs, change the label property of the console component to a more descriptive value:
This feature is helpful for complex apps, especially when debugging them in a production environment.
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:
The example below shows how to access the browser's console window by right-clicking directly in an app and selecting Inspect:
The browser's Network log displays all of the API requests invoked by an app:
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. The screenshot below, shows how you can inspect the request's headers, cookies, and other details from the respective subtabs to the right of the selected request:
