Error Handling Strategy with Streamlit and FastAPI Implementation

Effective capturing and displaying of error messages with the Streamlit and FastAPI stack

Codenamewei

May 14, 2024

Created on: Mar 26, 2024

Last updated on: May 14, 2024

Background

Building a machine-learning application often includes choosing the infrastructure stack to present the innovative offering as a whole. A go-to choice is Streamlit as the User Interface and FastAPI as the web framework due to the nature of the Python-based data science community.

This article outlines how Streamlits handles REST error responses in the Streamlit application and displays them intuitively.

Context

Errors can occur due to multiple causes. Let’s take the most common errors and lay out some possible causes in the context of data science applications.

404 not found error: The resources required in the application are not found, such as the dashboard URL, dataframe table, or machine learning model file.
500 internal server error: The server overloads processing the inference request or unexpected data input has been provided.

In these situations, the REST API Client/Server works in the workflow as shown on the diagram to the right.

Step 1: Streamlit application sends a REST request to the FastAPI server.
Step 2: FastAPI server processes the API request and invokes an error.
Step 3: The error is returned as a REST response to the Streamlit application.
Step 4: The Streamlit application captures the error and presents it to the user.

The rest of the article elaborates on Step 4 to display the error messages in an explanatory manner to the users.

Content

Note: The source code is provided in the GitHub repository. Clone the repository and run with the commands below to see it in action.

git clone https://github.com/codenamewei/technical-posts.git
cd technical-posts/streamlit/error-handling
chmod +x ./build-script.sh
./built-script.sh

The video shows the application routes to the corresponding error page to illustrate the error codes. Under the hood, the multipage feature of Streamlit is utilized for the navigation between pages.

Implementation details

The file layout below shows the files required in the Streamlit application based on the example shown.

📦 
├─ ...
├─ frontend.py
├─ pages
│  ├─ 404.py
│  └─ 500.py
└─ public
   ├─ 404.jpg
   └─ 500.jpg

The pages directory contains the pages to switch to from the main Streamlit page. In this case, the 404 and 500 error pages are saved in the corresponding folder. The directory name has to be in the name of pages, else it would not work as intended.
For the application to display images, these images have to be navigated relative to the main Streamlit page (frontend.py). In this example. the images are stored in the public folder. The scripts 404.py and 500.py refer to these images as elaborated below.

#404.py
st.image('public/404.jpg', use_column_width = True)

#500.py
st.image('public/500.jpg', use_column_width = True)

As the error pages are displayed by leveraging the multi-page feature, a sidebar page will appear with the default Streamlit configuration (as shown in the diagram above). To hide the sidebar, toggle showSidebarNavigation to false in <path-to>/.streamlit/config.toml. Note that the modified config.toml has to be copied when deployed to the Docker environment.


[client]

showSidebarNavigation = false

To fully display the error image on the Streamlit page, set the parameter use_column_width to true.

st.image('public/404.jpg', use_column_width = True)
st.image('public/500.jpg', use_column_width = True)

Conclusion

With the implementation in this article, you can customize it to fit your data science application. This assures the application to be not only responsive when it works as intended, but to be explanatory as well when unexpected behaviors happen.

Thanks for reading.