Creating the frame timed out - error

[theRealJeffWebber]

Getting a "Creating the frame timed out" error after a few seconds loading a dashboard into an angular page using the embedding SDK.

[theRealJeffWebber]

This error is also present

[sonals-amazon]

Please make sure you are only embedding QuickSight's embeddable URLs i.e. the ones that contain /embed in the path. You can get an embed url using QuickSight's embedding APIs https://docs.aws.amazon.com/quicksight/latest/user/embedded-analytics-api.html or with 1-click embed code https://docs.aws.amazon.com/quicksight/latest/user/embedded-analytics-1-click.html

[theRealJeffWebber]

Thanks for the response. This is the api that I am using to get the embed URL. Is this the correct api?

response = qs.get_dashboard_embed_url( AwsAccountId = accountId, DashboardId = dashboardId, Namespace = quicksightNamespace, IdentityType = 'QUICKSIGHT', UserArn = user_arn, SessionLifetimeInMinutes = 600, UndoRedoDisabled = undoRedoDisabled, ResetDisabled = resetDisabled )

[theRealJeffWebber]

I did verify that the URL returned from that call does have the "embed" in it.

[bwelkin]

Creating the frame timed out is supposed to be thrown when the creation of the iframe is failed within 60 seconds (code ref). It may be happening around this line in v2.0.3 or here in v2.1.0. Could you please try placing a breakpoint and share the error message?

[theRealJeffWebber]

Thanks for the response, I set that breakpoint, but it was never hit, however, I do see something that may be contributing to the problem? There are multiple iframes in the page.

[bwelkin]

It looks like you are calling createEmbeddingContext method multiple times. It should only be called once. This is often due to

• state changes causing calling it multiple times in React like frameworks, or
• calling it for each dashboard being embedded instead of calling it once per page.

[bwelkin]

It may not be your use case, but just as a reference info: if you are using React and React.StrictMode, in development mode React.StrictMode causes the component to mount-unmount-mount, causing useEffect() => {...}, []); trigger twice and potentially initializes embedding twice.

[Martina-B]

I know throwing this error is probably wanted when the dashboard takes more than 60 secs to load... It is reproducible with slower internet such as slow 3G. But how do you catch it? Standard ErrorBoundary we use in our React app doesn't catch it and neither does wrapping the embed logic with try catch...

[pushpesh-cometchat]

It looks like you are calling createEmbeddingContext method multiple times. It should only be called once. This is often due to

• state changes causing calling it multiple times in React like frameworks, or
• calling it for each dashboard being embedded instead of calling it once per page.

@bwelkin If I am loading 3 dashboards in 3 tabs on a single page, will it still need to be called only once or once per tab? The tabs are a component unto themselves which are integrated on the page.

[kuehnmic]

@pushpesh-cometchat are you still facing this issue?

[pushpesh-cometchat]

@kuehnmic No, I modified the code as per your suggestion, to ensure the embedding context is created only once, which fixed the issue. Thanks.