dosubot[bot] commented on issue #30402:
URL: https://github.com/apache/superset/issues/30402#issuecomment-2379198072
<!-- Answer -->
The issue where the Superset dashboard gets stuck on the Loader logo when
embedded into an Angular application using the Public role, even when using the
Embedded SDK with Superset version 4.0.1, could be due to several factors. Here
are some specific conditions and configurations to check:
1. **Invalid `supersetDomain`**: Ensure that the `supersetDomain` does not
end with a trailing slash and is a valid URL format.
2. **Failure to Fetch Guest Token**: Verify that the `fetchGuestToken`
function is correctly implemented and returns a valid guest token. If the guest
token is invalid or not fetched correctly, the dashboard will not load properly.
3. **Incorrect `mountPoint`**: Ensure that the `mountPoint` HTML element is
correctly specified and exists in the DOM.
4. **Misconfigured `dashboardUiConfig`**: Check that the `dashboardUiConfig`
contains valid configurations and parameters.
5. **Iframe Sandbox Configuration**: Ensure that the `iframeSandboxExtras`
contains valid sandbox attributes.
6. **Message Channel Initialization**: Verify that the message channel
between the host window and the iframe initializes correctly.
7. **Unauthorized Embedding**: Ensure that the page is embedded in an origin
authorized by the curator.
Additionally, specific error messages or logs generated by Superset can help
diagnose the issue. Look for errors such as `DashboardInvalidError`,
`DashboardNotFoundError`, `DashboardAccessDeniedError`, and others in the
Superset logs.
Here is a detailed code snippet for embedding a dashboard and handling guest
tokens:
```ts
import { embedDashboard } from "@superset-ui/embedded-sdk";
const fetchGuestToken = async () => {
const response = await
fetch('https://your-backend-api.com/get-guest-token', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) {
throw new Error('Failed to fetch guest token');
}
const data = await response.json();
return data.guestToken;
};
embedDashboard({
id: 'your-dashboard-id',
supersetDomain: 'https://superset.example.com',
mountPoint: document.getElementById('your-mount-point'),
fetchGuestToken: fetchGuestToken,
dashboardUiConfig: {
hideTitle: true,
filters: {
expanded: true,
},
urlParams: {
foo: 'value1',
bar: 'value2',
}
},
iframeSandboxExtras: ['allow-top-navigation',
'allow-popups-to-escape-sandbox']
});
```
Ensure that your backend correctly creates and provides the guest token by
making a `POST` request to `/security/guest_token` with the necessary
parameters
<sup>[[1]](https://github.com/apache/superset/blob/master/superset-embedded-sdk/src/index.ts)</sup><sup>[[2]](https://github.com/apache/superset/blob/master/superset-embedded-sdk/README.md)</sup><sup>[[3]](https://github.com/apache/superset/blob/master/superset/security/api.py)</sup>.
If the issue persists, it might be helpful to look into potential
performance issues or limitations when embedding multiple dashboards on a
single page, as this could also contribute to the problem.
This is a tough nut to crack, could really use your help on this, @rusackas.
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
