https://www.growthbook.io/ logo
Join Slack
Powered by
Hi, I am using the Javascript SDK but when I make ...
# announcements
c
Hi, I am using the Javascript SDK but when I make changes to the flags on the growthbooks platform, they don't seem to be flowing through to my app. Can someone help debug? Thanks
f
did you enable autoRefresh: true,?
c
yes. I think it might have been a timing thing. The features might not have been loaded
f
ah
c
but when the screen loads, teh system is going to be calling for the flags right away
this could be a problem..
f
if its a website, we have Chrome developer tools which can help debug
c
flickering
f
yes, there can be a race in those cases
c
how do we solve this without waiting to load the whole UI without waiting for hte feature json to load?
f
there are a few ways to reduce or stop flickering
one is to use the feature payload inline
the SDKs have caching too
c
but to use the feature payload inline, I have to still get the payload from somewhere right?
f
right
c
I guess I could get it serverside and then pass it along to clientside before pageload ...
f
this is a problem with all client side testing
c
but then I have to keep track of when the flags change on GB
f
yes, that would reduce the round trip
we have the GrowthBook Proxy if the network round trip is a problem
which you can run locally and it will cache the request
c
I am running on a low code environment - dont have an option to run a proxy anywhere in the network
f
@happy-autumn-40938 any tips for reducing flickering?
c
id have to spin up my own server and hten wont really help cause it would be outside of the server anyway
h
Can you clarify where the page rendering is happening? Is it client side only, server side, or a hybrid?
c
sorry for the delay. its going to be both
Is there a way to know if the loadFeatures is complete?
f
its a Promise - you can await it if you like
c
the way the lowcode platform is constructed, the rest of the page is loading in parallel
I'd have to globally know if the flags are loaded or nto
h
when you are doing a combination of backend and frontend rendering and want to eliminate any flickering, your best bet is using both a backend and frontend SDK. You could evaluate your flags on the backend in order to render your initial page response, and then pick up and do additional rendering and evaluation in a frontend context. To make things seamless, you can export your flag definitions from the backend SDK and pick them up on the front end during SDK construction
if you're doing server side react, we have some helper methods to make this happen a bit more automatically
c
its not serverside react. Its happening in a lowcode platform (Outsystems)
backend is made up of .net and frontend is plain javascript
h
and it's a web site, not a mobile app?
c
web app
h
I'm not certain how Outsystems works, but it seems to me that you could use the backend (.net) to just fetch the feature definitions and ship them down as part of the initial DOM. Maybe render it out to a JSON tag
Copy code
<script id="growthbook_data" type="application/json">
  ... JSON encoded flags
</script>
Then your frontend, have your SDK instance(s) hydrate:
Copy code
const gbdata = JSON.parse( document.querySelector("#growthbook_data") );

const gb = new GrowthBook({
  constructor_properties...,
  features: gbdata
})
in the future, we will make BE to FE hydration across our various SDKs work a bit more seamlessly
c
Would this JSON be the same JSON that I would get if I called the API end point {{baseUrl}}/features ?
h
yes exactly
c
ok I just copied and pasted for testing purposes and doesnt seem to work
for one of the flags, the value in growthbooks is 15, I changed it to look like this (image) and it keeps returning 15
h
this is on the pre-rendered JSON on the initial DOM?
could very well be cache
c
im in network tools and have disabled cache..
h
you're using cloud or self-hosted?
c
cloud
h
it's probably CDN cache. it's supposed to clear after a minute or so. can you try refreshing?
c
Its been about 3 or 4 mins
keeps giving me 15
h
put your feature definitions in here:
Copy code
window.gb = new window.growthbook.GrowthBook({
        apiHost: "<https://cdn.growthbook.io>",
        clientKey: "xxxxxxx",
        features: JSON payload...
    });
c
so I still call loadFeatures?
h
loadFeatures triggers a network request to re-fetch the features. But if you already have them available in JSON format, you may not need this
you can pass features in the GrowthBook constructor or via .setFeatures(featuresJSON)
c
but id have to call it if I need to get the correct feature based on teh attributes right?
h
client side evaluates the feature definitions against user attributes locally
(fyi, server side eval for frontend is coming soon...)
c
so where do I pass in teh attributes?
still in the same constructor right?
h
yes, also in the constructor, or via .setAttributes() if you need to update them later. The pastebin doesn't load for me
I'd try hitting the API endpoint directly in your browser and check what is returned there
c
basically, I think loadFeatures just loads it from the web and ignores the features that I am loading manually
if I don't call loadFeatures, I get nulls
h
your JSON format looks incorrect. Can you pull up the API endpoint directly and compare it with what you have in pastebin?
c
hmm got that from postman. let me compare
I just got the json from the sdk endpoint and that seems to work better. It's specific to the environment anyway.
71 Views
Open in Slack
PreviousNext
Powered by