Any ideas on "Your app is having trouble loading the st_aggrid.agGrid component"?

Hi! I would appreciate any thoughts regarding the following issue.


The issue is related to streamlit - aggrid component. It never happens while running an app on localhost. It happens sometimes while running an app on EC2 instance. This happens not only when the grid big. It is happening with small grids also. I am not able to figure out steps to reproduce the issue. It happens randomly.

I am not able to understand the second item from the screenshot. I mean the point related to complied frontend. I installed streamlit - aggrid component using pip. I am able to see that ag-grid component has static files.

Does it mean that I have the compiled frontend or not? This is my first question.

I would appreciate any ideas regarding addressing the issue in general. I am able to see that it is hard for @ PablocFonseca to come up with any solution so far. The issue was discussed here and here

2 Likes

Hey! Ag-grid component has static files and is compiled. My guess is that this issue is happening at the streamlit side of the component. I’m having trouble to debug this, because I cannot reproduce the issue. Maybe you can share a link where the bug happens often?

The issue may be this line in streamlit/frontend/src/components/widgets/CustomComponent/ComponentInstance.tsx :

52: port const COMPONENT_READY_WARNING_TIME_MS = 3000

Since the timeout is just 3000 ms, component may be timing out due to this hardcoded configuration.

I think manually changing the file in your deploy environment to raise the COMPONENT_READY_WARNING_TIME_MS const won’t work because the tsx file needs to be recomplied. Maybe some streamlit dev that commited this file (@kantuni, @tim , @AustinC) may help us.

I suggest opening a ticket on streamlit tracker

Yeah, this is a somewhat arbitrarily-chosen timeout. It measures the amount of time between a Component’s iframe being mounted and the component sending its “hello I’m ready to receive data” message back to Streamlit.

We show this error message if that timeout is exceeded. The error message will disappear if the component eventually does finish loading. It sounds like the message never goes away for you, which may mean the component is throwing an error that’s preventing it from loading. If you look at the error console in your browser’s developer window, do you see any errors?

In the component. Does this happen when the line

export default withStreamlitConnection(AgGrid)

is executed on my custom.tsx?

export default withStreamlitConnection(AgGrid) constructs a wrapper class that manages the Streamlit connection for your component. The creation of the wrapper class doesn’t actually do any Streamlit handshaking - the handshaking occurs when the wrapped component is mounted.

(In other words, this particular line is unlikely to be the source of an errors - but if the wrapped component has on error in its mounting or rendering logic, then that error could be causing this issue?)

Having a reproducible case would help us get to the bottom of the issue - @p0povaalesi, is there a link you can share with us?

@tim @PablocFonseca

Thank you for the comments. I am sending you a video to showcase the issue in action.

I am sending you streamlit app that I used while recording the video.
I am sending you [Test File] (test - Google Drive) that I used while recording the video.

I was not able to notice nothing special in chrome console. I believe that the issue is related somehow to the quality of internet connection. I was using weak internet connection while recording the video.

It looks like you will not be able to catch the issue while using fast internet connection with good ping. I am not able to catch it all the time even while using weak internet connection.

Please let me know if I need to do anything else.

Hi all,

I am having the same issue with the ‘trouble loading st_aggrid component’, and I get the following error in the console:

Refused to display ‘<MY_URL>/component/st_aggrid.agGrid/index.html?streamlitUrl=<MY_URL>’ in a frame because it set ‘X-Frame-Options’ to ‘deny’

Any idea how to resolve this @tim or @PablocFonseca ?

2 Likes