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

Custom Components streamlit-aggrid
1

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

Screenshot 2021-02-16 at 09.23.07
Screenshot 2021-02-16 at 09.23.072590×430 54.2 KB

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

4 Likes
2

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

3 Likes
3

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?

1 Like
4

In the component. Does this happen when the line

export default withStreamlitConnection(AgGrid)

is executed on my custom.tsx?

1 Like
5

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?

1 Like
6

@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.

1 Like
7

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 ?

3 Likes
8

I sent a Pull request with the fix Fix: re-render iframe after custom component timeout by lekev · Pull Request #3306 · streamlit/streamlit · GitHub

2 Likes
9

Thanks for the PR @kev_r! This is now merged into develop.

1 Like
10

@tim
Any idea in which version I can find this fix?

Thanks

1 Like
11

Hey @erezrot - the fix is in 0.83.0, the latest version. (Normally, this release would’ve come a bit faster after 0.82, but we had some big under-the-hood stuff happening that delayed it a bit.)

1 Like
12

Hi All,
We had the same issue/error (it was actually when we tried to deploy an app in Kubernetes).
After weeks of troubleshooting - we eventually solved it by adding the following response headers to nginx:

X-Frame-Options: SAMEORIGIN

Seems like by default this is set to deny in Ingress controller.

So if used in K8s - the following annotation needs to be added to the Ingress:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    nginx.ingress.kubernetes.io/configuration-snippet: |
      more_set_headers "X-Frame-Options: SAMEORIGIN";

Happy Streamliting :slight_smile:

1 Like
15

Hi Adam, thank you for your feedback; could you please illustrate in detail how to effectively change those configuration settings?

2 Likes
16

@tim, Am using streamlit-aggrid==0.2.3.post2 version and am facing this issue still. Which version should I use as I don’t see 0.83.0 version for streamlit-aggrid?
TIA

1 Like
17

@Adam_12 cAN you please illustrate in detail how to effectively change those configuration settings?

1 Like
18

@Adam_12 would be super helpful, as we’re still running into this problem as well, including after the k8s reverse proxy reconfig.

1 Like
19

I used to have the very same problem with the streamlit-option-menu component [1]:

image
image1024×230 72.5 KB

Nothing helped of what has been shared here in this thread or anywhere else.

What did work for me was to execute import streamlit_option_menu very early during the Streamlit app loading process. I expected this to allow for successfully registering the component with Streamlit before it gets too busy :wink:

I already had a python script launching my Streamlit application (because of using python-dotenv) so I added to that a simple mechanism to import streamlit-option-menu early enough.

After removing the dotenv specific stuff, here is what remains:

# run.py
import sys
from streamlit.config import on_config_parsed
from streamlit.web.cli import main

def register_options_menu():
    import streamlit_option_menu

on_config_parsed(register_options_menu)

sys.argv.extend(["run", "path/to/homepage.py"])
main(prog_name="streamlit")

Then starting my app with python3 run.py 
 and Viola! - I haven’t seen the dreaded “Your app is having trouble
” anymore :smiley:

Hope this helps someone.
(Streamlit 1.12.2, streamlit-option-menu 0.3.2.)

4 Likes
20

@bpiv400, @Nom_ji, does this :point_up: approach help in your cases?

1 Like
21

We have deployed app in Kubernetes getting same issue. did we get the root cause of this issue or any fixes(Nothing worked for me in given suggestions)

1 Like
22

I’m experiencing the same issue after the deployment and none of the suggested workarounds helps me.

1 Like