QuickSight Q Search Bar Error - React Navigation - Uncaught (in promise) undefined

[bbShannonHoffman]

Issue

Hello--we are successfully embedding the QuickSight Q Search Bar in our React application. However, whenever we navigate to another page after having loaded the Search Bar, we get "Uncaught (in promise) undefined" errors. While this doesn't seem to affect the functionality of the Search Bar or any other QuickSight embed functionality, it does pollute the log with errors. We are currently using embedded Dashboards in the app in addition to Q, however the error doesn't seem to be a product of the two assets being embedded in the same app; it happens whenever the app navigates away from the Q Search Bar component. We are using only one instance of the embedding context, as recommended here: https://github.com/awslabs/amazon-quicksight-embedding-sdk/issues/153#issuecomment-1581283347

Version

We are currently using: amazon-quicksight-embedding-sdk@2.2.2 react@17.0.2

Error

Uncaught (in promise) undefined createQSearchFrame.js:19:95

Reproduction

Here is a repo that can be used to demonstrated the error: https://github.com/bbShannonHoffman/qs-q-error-example

In this (or another similar React) app,

1. Route to a component that renders the Q Search Bar and wait for it to load.
2. Once it has loaded, navigate to a second page that doesn't contain the Q Search Bar.
3. Open the inspector and view the errors in the console logs.

This error happens in both Chrome and Firefox.

Let me know if you need any more information. Thanks!

[jrash33]

After investigation, I have determined that the issue is produced due to this particular integration of react-router with quicksight embedding feature. It seems that the embedding component is unmounted before the sdk has a chance to run the close() function on the iframe. By the time the close() function is ran, the component is undefined and throws an error. If this is an issue that comes up more often or is critical to the customer for this particular use case, we can create a ticket to look deeper into this and produce a fix on our end of things. However, I recommend fixing this on the frontend side. Here are a couple of solutions that I was able to successfully integrate locally:

1. React router unmounts components on navigation in your app. I would suggest changing things so that QSearchBar is never unmounted during route navigation. This will also increase the performance of your app as the embedded searchBar is currently taking 3-5 seconds to render.
2. If you are looking for more of a quick fix, decoupling the Link components from the BrowserRouter wrapper also will fix the issue. Consider the implementation below: Instead of:

       <div>
             <li>
               <Link to="/p">Home</Link>
             </li>
             <li>
               <Link to="/q">QuickSightQ</Link>
             </li>
         <Routes>
           <Route path="/p" element={<Home />} />
           <Route path="/q" element={<QSearchBar />} />
         </Routes>
       </div>
     </Router>

   you can try:

     <a href="/p">Home</a> // or buttons or any component you like
     <a href="/q">QuickSightQ</a>
     <Router>
       <Routes>
         <Route exact path="/p" element={<div>hello world</div>} />
         <Route exact path="/q" element={bla} />
       </Routes>
     </Router>

[Martina-B]

Thank you for the investigation! I still think that this is quite a bug on the QuickSight side... React router is a key library to a majority of React applications and it is important embedding works with it. You are saying that the workaround increases the performance of the application but that would be true if we had a simple application, where Q Search bar is the only feature. But that is not the case and it actually makes a mess and slows it down because there is a route which never gets unmounted and kinda just gets stuck.

[jrash33]

no problem, I agree that this is something we should prioritize and look further into. Hopefully the temporary fixes mentioned above help until we look can push a fix!

[jrash33]

update: Releasing a patch version fix for embedding (ETA: by 9/23)

[bbShannonHoffman]

update: Releasing a patch version fix for embedding (ETA: by 9/23)

Excellent--thanks, @jrash33!

[bbShannonHoffman]

update: Releasing a patch version fix for embedding (ETA: by 9/23)

Hey, @jrash33! Any updates on this one? Just checking in :)

[bbShannonHoffman]

Just checking in here, we have updated to 2.6.0 and are getting a similar error. It now states, Uncaught (in promise) CLOSE_Q_SEARCH timed out Looks like others are seeing it too: https://repost.aws/en/questions/QULnVqJHvCQCSI3jSs6jDMmA/close-q-search-timed-out We will make a support ticket 👍