We are encountering an issue while embedding Quicksight Q search bar in our application. The error message shown on inspect is “Failed to load resource: the server responded with a status of 500 ()” and message displayed is " We’re sorry, an error occurred on our end when we tried to process your request.
Rest assured, we’re working to resolve the problem as soon as possible. Please try your request again shortly. We apologize for the inconvenience."
<head>
<title>Q Search Bar Embedding Example</title>
<script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.0.0/dist/quicksight-embedding-js-sdk.min.js"></script>
<script type="text/javascript">
const embedQSearchBar = async() => {
const {
createEmbeddingContext,
} = QuickSightEmbedding;
const embeddingContext = await createEmbeddingContext({
onChange: (changeEvent, metadata) => {
console.log('Context received a change', changeEvent, metadata);
},
});
const frameOptions = {
url: "<%= @quicksight_embed_url %>",
container: '#experience-container',
height: "700px",
width: "1000px",
onChange: (changeEvent, metadata) => {
switch (changeEvent.eventName) {
case 'FRAME_MOUNTED': {
console.log("Do something when the experience frame is mounted.");
break;
}
case 'FRAME_LOADED': {
console.log("Do something when the experience frame is loaded.");
break;
}
}
},
};
const contentOptions = {
hideTopicName: false,
theme: '<YOUR THEME>',
allowTopicSelection: true,
onMessage: async (messageEvent, experienceMetadata) => {
switch (messageEvent.eventName) {
case 'Q_SEARCH_OPENED': {
console.log("Do something when Q Search content expanded");
break;
}
case 'Q_SEARCH_CLOSED': {
console.log("Do something when Q Search content collapsed");
break;
}
case 'Q_SEARCH_SIZE_CHANGED': {
console.log("Do something when Q Search size changed");
break;
}
case 'CONTENT_LOADED': {
console.log("Do something when the Q Search is loaded.");
break;
}
case 'ERROR_OCCURRED': {
console.log("Do something when the Q Search fails loading.");
break;
}
}
}
};
const embeddedDashboardExperience = await embeddingContext.embedQSearchBar(frameOptions, contentOptions);
};
</script>
</head>
<div id="experience-container"></div>
and go to the Manage QuickSight view, you will see some options. Under the Domains and Embedding tab you will need to add the URL for your application and the localhost url for development testing.