Unable to embed Q search bar: (Failed to load resource: the server responded with a status of 500 ())

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>


Screenshot 2024-07-10 at 1.37.30 PM

1 Like

Hello @Zarmeen.mustafa, this looks like it may be a permissions issue. If you go into the QuickSight console, and select the person icon image 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.

Let me know if this helps resolve the issue!

we have already added url of our application

1 Like

Hello @Zarmeen.mustafa, was the above error discovered when running the deployed application or when running it locally during development? You would need to add the localhost url if it isn’t deployed.

Also, did the embedded Q search bar work at one point and then stop working, or has it always failed to load?

The embedded Q search bar hasn’t functioned at all for us. We’ve been working locally on our development domain, which is: https://***.ngrok.app