Getting insights into your users experience as well as into your real users behaviour is key within designing, implementing and delivering web applications as well as mobile applications.
It’s common practice to monitor your web applications or mobile applications performance in production, to gain valuable insights about how well your application performs within your users’ browsers or mobile devices.
As there are ten thousands of different browser and mobile device variants out in the wild, it’s just not enough to test your app on your local machine.
Naturally, the same level of observability and user behaviour monitoring is necessary while building data analysis apps with Streamlit!
Now the question is how to add your own observability support for your own Streamlit app?
Building your own monitoring solution is far beyond reach, especially if you want to capture detailed Waterfall analysis along with backend full stack tracing support.
Therefore, observability platform vendors such as Dynatrace are offering convenient JS agents along with full stack agents to out-of-the-box track any of your web or mobile applications.
Now, the question is how to add a Dynatrace JS agent tag to your own Streamlit application, so that you can follow your real users performance and sessions in real time?
The minimal tracking approach
Streamlit applications are automatically generated by adding widgets that result in rendered HTML snippets.
See my example Dynatrace dashboard below:
The advantage of that minimal approach is that you work with standard Streamlit components and that you are easily able to gain some first usage statistics about all the real users that are accessing your app.
The huge downside of that minimal tracking approach is that the JS tag is rendered into the custom components iframe, which means it’s not able to track all your apps activity.
The iframe is used to sandbox the code that was added by a custom component and therefore your tracking JS tag is not able to access all the activity.
This is unfortunate, as you typically should add your agent include as one of the first includes within the HTML head tag.
The not-so-clean approach
Instead of manually changing that template file, which resides in the folder ‘/usr/local/lib/python3.7/site-packages/streamlit/static/index.html’, we will add a tiny Python function that automatically performs that job for us.
Find this Python routine below:
The screenshot below shows a typical Dynatrace waterfall analysis of my running Streamlit app, where all the resource loading times and user actions are measured in terms of performance and errors:
Observability and real user application monitoring is crucial in order to understand how your customers are experiencing the performance and stability of your application.
It does not matter if you are implementing and deploying a traditional web application, a native mobile app or a Streamlit data app, gaining insights into your applications performance and stability helps to improve its usability and to push adoption.
Thanks a lot for reading, I hope my article helped to gain observability into your own Streamlit data app.