GET_SHEETS and GET_PARAMETERS timed out

[MirandaDora]

When embedding quicksight into my simple React app, I am trying to use getSheets to obtain the sheets id, which cannot be easily find in console. However, it always gave me timed out error within a few second without further information. The dashboard always embedded successfully, and the IAM use I used have admin access. Node version: 18.19.0 NPM version: 10.2.3 amazon-quicksight-embedding-sdk: 2.5.0

My react code: `const embed = async () => {

const options = {
  url: dashboardUrl,
  container: dashboardRef.current,
  height: "500px",
  width: "600px",
};
try {
  const newEmbeddedDashboard = await embeddingContext.embedDashboard(options);
  const sheets = await newEmbeddedDashboard.getSheets();
  console.log(sheets)
  setEmbeddedDashboard(newEmbeddedDashboard);

} catch (error) {
  console.log(error)
}

}`

Console output:

[bwelkin]

I see that you are calling getSheets right after calling embedDashboard

const newEmbeddedDashboard = await embeddingContext.embedDashboard(options);
const sheets = await newEmbeddedDashboard.getSheets();

embedDashboard resolves when the embedding iframe is created and attached to the DOM, however, does not wait for the completion of the content loading.

Thus, CONTENT_LOADED message should be waited before invoking any data requesting action.

You could try something like

const contentOptions = {
    onMessage: async (messageEvent, metadata) => {
        switch (messageEvent.eventName) {
            case 'CONTENT_LOADED': {
                const sheets = await newEmbeddedDashboard.getSheets();
                console.log(sheets);
                setEmbeddedDashboard(newEmbeddedDashboard);
                break;
            }
            // ...
        }
    },
};

const newEmbeddedDashboard = await embeddingContext.embedDashboard(options, contentOptions);

or something like

const newEmbeddedDashboard = await embeddingContext.embedDashboard(options);

// Waiting for content to be ready
await new Promise(resolve => {
    const {remove} = newEmbeddedDashboard.addEventListener('CONTENT_LOADED', () => {
        resolve();
        remove(); // Stop listening to CONTENT_LOADED
    });
});
console.log('CONTENT_LOADED!!!');

const sheets = await newEmbeddedDashboard.getSheets();

Let us know if this helps resolve the issue.