Hi. I am using the thoughtspot visual
Hi. I am using the thoughtspot visual sdk for react currently. I am finding if I try to
init within a hook such as useEffect then I consistently get the following config error: Error parsing ThoughtSpot host. Please provide a valid URL.
Do you have an example of how to successfully do this? I can successfully init if I move the init outside of the function component but preferably I would like to init from within the component once during the render cycle. I can provide a more structured example if needed. Thank you!15 Replies
can you log the value of thoughtSpot host when using useEffect. Ideally it should not have any affect using it inside the hook. Can you give a more structured exmpale as to how you sre using it. Let us look into it. cc @Justin Mathew
Here is my current component which is not functioning. Alongside the console output which I can see my url inside the
useEffectSorry had to put the component on pastebin
https://pastebin.com/892SRdtv
Pastebin
import type { AuthEventEmitter } from '@thoughtspot/visual-embed-sd...
Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.
you have added the console log in useEffect, but you are not running the init function there. Can you put the log statement inside the tsInitialize function and see the value there? I am only getting the above error when the tsHost is empty..
Sorry about that here is the updated version
https://pastebin.com/MJbYG2Z1
Pastebin
import type { AuthEventEmitter } from '@thoughtspot/visual-embed-sd...
Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.
You can see it my companies instance of thoughtspot to the console. I have tried hardcoding the thoughtspot host instead of using a .env with no luck either.
@alc-aaron this
Error parsing ThoughtSpot host. Please provide a valid URL. error usually comes when you are passing wrong host url to init , i see you have logged the env varaible, does show an proper url ?@Justin Mathew Here is a screenshot that may show better
I have had success using the init outside of the function component using the same url. Additionally I have tried hardcoding the url rather than using the .env with no luck. It is only when the init is called within a hook (useEffect) that this issue arrises.
If this is not supported and I am going about this the wrong way that is also fine. I just see varying examples of init being called outside of the component or inside of the component and adhering to the full render lifecycle.
@alc-aaron you can call init inside an useEffect, i think the issue here is the url you are passing is loaded loaded yet and might be undefined
Can you try logging the url once before passing , also if possible share the inti code as well
cc: @utsav.kapoor @shikharTS
I was able to find a different way to
init for now but I re-created the error by forking the Big TSE Repo you all have and modifying as such: https://codesandbox.io/p/sandbox/big-tse-react-demo-forked-pghftwNice. Thanks @alc-aaron . Will have someone from the team pick this up next week. Thanks for being patient.
@Aditya / @Justin Mathew - Would be good to pick this up
No worries thanks for the update 😀
We are still debugging it. Will have an update for you in a couple of days.
@jbc - Can you pick this up ?
@alc-aaron We definitely need the init to be invoked before the React Embed components are rendered. In case it's used inside the useEffect, it is needed to wait until the sdk is initialized until you start rendering the react components.
In the code sandbox example, we are using the pre-render components which are hard to stop rendering since they are wrapped over the current component. As a workaround there, we can trigger init twice, once without authentication, and once with the auth details.
https://codesandbox.io/p/sandbox/big-tse-react-demo-forked-pghftw?file=%2Fsrc%2FApp.tsx%3A15%2C2