Quickstart on docs simply doesnt work

[wellyal]

Have you guys ever tried following these steps? https://docs.launchdarkly.com/sdk/client-side/react/react-web

For me, I'm actually stuck and followed step by step (even the quickstart inside the dashboard just copying and pasting) and didn't get anything.

[eli-darkly]

This isn't a React SDK issue specifically; the problem is that you haven't enabled client-side availability for your main-banner flag. The React SDK is just a wrapper for our JavaScript SDK, so it has the same behavior in terms of only being able to access flags that have been specifically made available in that context, as described in the "Making feature flags available to the client-side SDK" section on the linked page.

[eli-darkly]

Actually, the same React SDK doc page you linked to also has the same information: search for "Making feature flags available to this SDK".

[liamlevesqueP8]

Yeah, I agree with the OP - the docs aren't great here - the flag to make it available is buried in the most hard to find place and isn't explained in the quick start at all, so the end result is just frustration. Maybe just make that a bigger part of the quickstart or more clearly indicate that you need to turn that on before it will work.

[eli-darkly]

If @wellyal replies that turning the client-side checkbox on for the flag fixes the problem, then I'll close this issue because it isn't related to the React SDK code. But either way we will definitely take this into account in ongoing revisions of the docs and tutorials.

[liamlevesqueP8]

Cool - maybe just mention that turning that on only applies to flags you create in the future, not to existing flags and you need to go back into each flag you created prior and turn that on.

[eli-darkly]

@liamlevesqueP8 I'm not sure what you mean by "turning that on only applies to flags you create in the future". Are you talking about the default setting for client-side/mobile in the environment options?

[liamlevesqueP8]

Oh right - sorry that wasn't clear - yeah the getting started guide mentions turning on the client-side checkbox default for the project. Where I got confused was that each flag also has the same checkbox hidden in it's settings, and since the flags I was testing were created prior to turning on the default, they needed to each also have their client-side checkboxes turned on.

[Anna-Cantrell]

Hi! I'm actually experiencing the same issue with the React SDK. I've gone through the quick start guide and also tried the react example app in the repo. I have SDKs using Client-side ID checked, but my flags still say never requested. The error I get in my own application as well as the provided example one is LD: [error] Error fetching flag settings: 400. The 400 is coming from a network GET request to https://app.launchdarkly.com/sdk/evalx/6089afc8d775750bd84925e0/users/eyJhbm9ueW1vdXMiOnRydWUsImtleSI6ImIyZTA0ZDAwLWFkYTctMTFlYi1hMWZlLWJmNmM3NzBmN2FkMyJ9 with a response of {"code":"invalid_request","message":"invalid user data"}

Hope that's helpful!

[Anna-Cantrell]

Disregard this, looks like we had managed to enable secure mode, disabling that worked it out. Sorry for that!

[anentropic]

The React SDK is just a wrapper for our JavaScript SDK, so it has the same behavior in terms of only being able to access flags that have been specifically made available in that context, as described in the "Making feature flags available to the client-side SDK" section on the linked page.

I am wondering if this info could be added more prominently to other places in the docs...

I just spent a baffling couple of hours trying to work out why my flag wasn't coming through. I'm using the React SDK so I had focused on those docs rather than the JS SDK page.

First I had useFlags not returning the key at all. Then I tried adding the key to flags subscription config to withLDProvider. In that case the flag key is returned by useFlags but just has the default value specified in the flags config. (So you can specify arbitrary keys and values and useFlags will return them - is that a bug or a feature? It was certainly confusing in this case!)

Eventually found this github issue and via this found the relevant docs, and sure enough the "SDKs using Client-side ID" box wasn't checked in the flag settings.

[eli-darkly]

@anentropic The original issue here is fairly old and refers to an older version of the docs, so I want to make sure we're really talking about the same thing here.

I'm looking at the React SDK docs page right now. And in the "Getting started" section, immediately below the very first step where you add the SDK as a dependency, and before any examples of using it in JS code, there is this callout with a red sidebar and a red warning icon:

So I'm wondering whether you mean that you don't think this callout is displayed prominently enough on that page, or if this is not the page you were looking at, or if you think the text in the callout is unclear.

[anentropic]

ah ok, never mind... I managed to miss it 🤦

[eli-darkly]

OK. I'm going to go ahead and close this issue for now, but if anyone has found a particular place in the docs where they think this information is still missing, please feel free to reopen it (or to submit it as a support issue at support.launchdarkly.com, if it is more of a general issue with docs and not specifically about the React SDK).