https://www.growthbook.io/ logo
Powered by
c

careful-oyster-228

06/12/2023, 2:28 PM
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

fresh-football-47124

06/12/2023, 5:38 PM
did you enable autoRefresh: true,?
c

careful-oyster-228

06/12/2023, 5:49 PM
yes. I think it might have been a timing thing. The features might not have been loaded
f

fresh-football-47124

06/12/2023, 5:49 PM
ah
c

careful-oyster-228

06/12/2023, 5:50 PM
but when the screen loads, teh system is going to be calling for the flags right away
this could be a problem..
f

fresh-football-47124

06/12/2023, 5:50 PM
if its a website, we have Chrome developer tools which can help debug
c

careful-oyster-228

06/12/2023, 5:50 PM
flickering
f

fresh-football-47124

06/12/2023, 5:50 PM
yes, there can be a race in those cases
c

careful-oyster-228

06/12/2023, 5:51 PM
how do we solve this without waiting to load the whole UI without waiting for hte feature json to load?
f

fresh-football-47124

06/12/2023, 5:52 PM
there are a few ways to reduce or stop flickering
one is to use the feature payload inline
the SDKs have caching too
c

careful-oyster-228

06/12/2023, 5:54 PM
but to use the feature payload inline, I have to still get the payload from somewhere right?
f

fresh-football-47124

06/12/2023, 5:54 PM
right
c

careful-oyster-228

06/12/2023, 5:55 PM
I guess I could get it serverside and then pass it along to clientside before pageload ...
f

fresh-football-47124

06/12/2023, 5:55 PM
this is a problem with all client side testing
c

careful-oyster-228

06/12/2023, 5:55 PM
but then I have to keep track of when the flags change on GB
f

fresh-football-47124

06/12/2023, 5:55 PM
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

careful-oyster-228

06/12/2023, 5:56 PM
I am running on a low code environment - dont have an option to run a proxy anywhere in the network
f

fresh-football-47124

06/12/2023, 5:56 PM
@happy-autumn-40938 any tips for reducing flickering?
c

careful-oyster-228

06/12/2023, 5:57 PM
id have to spin up my own server and hten wont really help cause it would be outside of the server anyway
h

happy-autumn-40938

06/12/2023, 6:03 PM
Can you clarify where the page rendering is happening? Is it client side only, server side, or a hybrid?
c

careful-oyster-228

06/12/2023, 8:47 PM
sorry for the delay. its going to be both
Is there a way to know if the loadFeatures is complete?
f

fresh-football-47124

06/12/2023, 8:51 PM
its a Promise - you can await it if you like
c

careful-oyster-228

06/12/2023, 8:52 PM
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

happy-autumn-40938

06/12/2023, 8:56 PM
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

careful-oyster-228

06/12/2023, 8:57 PM
its not serverside react. Its happening in a lowcode platform (Outsystems)
backend is made up of .net and frontend is plain javascript
h

happy-autumn-40938

06/12/2023, 8:58 PM
and it's a web site, not a mobile app?
c

careful-oyster-228

06/12/2023, 8:58 PM
web app
h

happy-autumn-40938

06/12/2023, 9:04 PM
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

careful-oyster-228

06/12/2023, 9:13 PM
Would this JSON be the same JSON that I would get if I called the API end point {{baseUrl}}/features ?
h

happy-autumn-40938

06/12/2023, 9:13 PM
yes exactly
c

careful-oyster-228

06/12/2023, 9:13 PM
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

happy-autumn-40938

06/12/2023, 9:15 PM
this is on the pre-rendered JSON on the initial DOM?
could very well be cache
c

careful-oyster-228

06/12/2023, 9:15 PM
im in network tools and have disabled cache..
h

happy-autumn-40938

06/12/2023, 9:16 PM
you're using cloud or self-hosted?
c

careful-oyster-228

06/12/2023, 9:16 PM
cloud
h

happy-autumn-40938

06/12/2023, 9:17 PM
it's probably CDN cache. it's supposed to clear after a minute or so. can you try refreshing?
c

careful-oyster-228

06/12/2023, 9:17 PM
Its been about 3 or 4 mins
keeps giving me 15
h

happy-autumn-40938

06/12/2023, 9:18 PM
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

careful-oyster-228

06/12/2023, 9:21 PM
so I still call loadFeatures?
h

happy-autumn-40938

06/12/2023, 9:21 PM
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

careful-oyster-228

06/12/2023, 9:22 PM
but id have to call it if I need to get the correct feature based on teh attributes right?
h

happy-autumn-40938

06/12/2023, 9:23 PM
client side evaluates the feature definitions against user attributes locally
(fyi, server side eval for frontend is coming soon...)
c

careful-oyster-228

06/12/2023, 9:24 PM
so where do I pass in teh attributes?
still in the same constructor right?
h

happy-autumn-40938

06/12/2023, 9:37 PM
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

careful-oyster-228

06/12/2023, 9:38 PM
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

happy-autumn-40938

06/12/2023, 9:55 PM
your JSON format looks incorrect. Can you pull up the API endpoint directly and compare it with what you have in pastebin?
c

careful-oyster-228

06/12/2023, 9:56 PM
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.
2 Views
Powered by