search

launchdarkly / react-client-sdk

LaunchDarkly Client-side SDK for React.js
Other
85 stars 68 forks source link

ldclient.es.js?efbb:1 LD: [error] Error fetching flag settings: 400 #55

Closed tupton closed 3 years ago

tupton commented 3 years ago

Is this a support request? This issue tracker is maintained by LaunchDarkly SDK developers and is intended for feedback on the SDK code. If you're not sure whether the problem you are having is specifically related to the SDK, or to the LaunchDarkly service overall, it may be more appropriate to contact the LaunchDarkly support team; they can help to investigate the problem and will consult the SDK team if necessary. You can submit a support request by going here and clicking "submit a request", or by emailing support@launchdarkly.com.

Note that issues filed on this issue tracker are publicly accessible. Do not provide any private account information on your issues. If your problem is specific to your account, you should submit a support request as described above.

Describe the bug

After installing launchdarkly-react-client-sdk@2.21.0 and using the withLDProvider HOC, I'm seeing a consistent 400 Bad Request when fetching flag settings:

In the console:

index.js:1 LD: [error] Error fetching flag settings: 400

Inspecting the bad request further, I see this request:

https://app.launchdarkly.com/sdk/evalx/5fcaaa98fbf53c09e6f87c7c/users/eyJrZXkiOiIzNTllYTI5Ny1kNDY3LTQ5YWItYjA4MS00NTg0MWFmMDg1MDgifQ

and this response:

{"code":"invalid_request","message":"invalid user data"}

I am just sending a uuid as the key property of the user, as described in the documentation, and that seems to be reflected in the request path param (minus the trailing == for some reason.)

This results in the object that's returned from useFlags to always be empty.

It's worth noting that later requests to https://events.launchdarkly.com/events/bulk/ of kind: 'identify' and the exact same user data are successful.

To reproduce

https://codesandbox.io/s/nervous-tharp-lwu0q?file=/src/App.js is a code-sandbox that reproduces the issue, but it's just a very simple use of withLDProvider:

const App = () => {
  const flags = useFlags();
  console.log("flags", flags);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some dark magic happen!</h2>
    </div>
  );
};

export default withLDProvider({
  clientSideID: "5fcaaa98fbf53c09e6f87c7c",
  user: {
    key: "359ea297-d467-49ab-b081-45841af08508"
  }
})(App);

Expected behavior

I expect a request to https://app.launchdarkly.com/sdk/evalx/5fcaaa98fbf53c09e6f87c7c/users/eyJrZXkiOiIzNTllYTI5Ny1kNDY3LTQ5YWItYjA4MS00NTg0MWFmMDg1MDgifQ return successfully and its response to contain the flag settings for this user.

Logs

From the console:

GET https://app.launchdarkly.com/sdk/evalx/5fcaaa9ā€¦/users/eyJrZXkiOiIzNTllYTI5Ny1kNDY3LTQ5YWItYjA4MS00NTg0MWFmMDg1MDgifQ 400
promise @   httpRequest.js:54
xe  @   httpRequest.js:62
Ae.t.httpRequest    @   browserPlatform.js:12
f   @   ldclient-common.es.js:1
De.s.fetchFlagSettings  @   ldclient-common.es.js:1
(anonymous) @   ldclient-common.es.js:1
Promise.then (async)        
Te  @   ldclient-common.es.js:1
$e  @   index.js:15
(anonymous) @   initLDClient.ts:25
step    @   index.ts:9
(anonymous) @   index.ts:9
(anonymous) @   index.ts:9
push../node_modules/launchdarkly-react-client-sdk/lib/initLDClient.js.__awaiter @   index.ts:9
initLDClient    @   initLDClient.ts:21
(anonymous) @   provider.tsx:66
step    @   initLDClient.ts:45
(anonymous) @   initLDClient.ts:45
(anonymous) @   initLDClient.ts:45
push../node_modules/launchdarkly-react-client-sdk/lib/provider.js.__awaiter @   initLDClient.ts:45
LDProvider._this.initLDClient   @   provider.tsx:63
(anonymous) @   provider.tsx:77
step    @   initLDClient.ts:45
(anonymous) @   initLDClient.ts:45
(anonymous) @   initLDClient.ts:45
push../node_modules/launchdarkly-react-client-sdk/lib/provider.js.__awaiter @   initLDClient.ts:45
LDProvider.componentDidMount    @   provider.tsx:71
commitLifeCycles    @   react-dom.development.js:20655
commitLayoutEffects @   react-dom.development.js:23418
callCallback    @   react-dom.development.js:3945
invokeGuardedCallbackDev    @   react-dom.development.js:3994
Show 20 more frames
index.js:1 LD: [error] Error fetching flag settings: 400
console.<computed> @ index.js:1
a @ ldclient-common.es.js:1
Ie.i.error @ ldclient-common.es.js:1
n.maybeReportError @ ldclient-common.es.js:1
signalFailure @ ldclient-common.es.js:1
Oe @ ldclient-common.es.js:1
(anonymous) @ ldclient-common.es.js:1
Promise.catch (async)
(anonymous) @ ldclient-common.es.js:1
Promise.then (async)
Te @ ldclient-common.es.js:1
$e @ index.js:15
(anonymous) @ initLDClient.ts:25
step @ index.ts:9
(anonymous) @ index.ts:9
(anonymous) @ index.ts:9
push../node_modules/launchdarkly-react-client-sdk/lib/initLDClient.js.__awaiter @ index.ts:9
initLDClient @ initLDClient.ts:21
(anonymous) @ provider.tsx:66
step @ initLDClient.ts:45
(anonymous) @ initLDClient.ts:45
(anonymous) @ initLDClient.ts:45
push../node_modules/launchdarkly-react-client-sdk/lib/provider.js.__awaiter @ initLDClient.ts:45
LDProvider._this.initLDClient @ provider.tsx:63
(anonymous) @ provider.tsx:77
step @ initLDClient.ts:45
(anonymous) @ initLDClient.ts:45
(anonymous) @ initLDClient.ts:45
push../node_modules/launchdarkly-react-client-sdk/lib/provider.js.__awaiter @ initLDClient.ts:45
LDProvider.componentDidMount @ provider.tsx:71
commitLifeCycles @ react-dom.development.js:20655
commitLayoutEffects @ react-dom.development.js:23418
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23143
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11268
commitRoot @ react-dom.development.js:22982
performSyncWorkOnRoot @ react-dom.development.js:22321
scheduleUpdateOnFiber @ react-dom.development.js:21873
updateContainer @ react-dom.development.js:25474
(anonymous) @ react-dom.development.js:26013
unbatchedUpdates @ react-dom.development.js:22423
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26012
render @ react-dom.development.js:26095
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
1 @ styles.css?a4b2:45
__webpack_require__ @ bootstrap:784
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
Show 22 more frames

SDK version

launchdarkly-react-client-sdk@2.21.0

Language version, developer tools

Javascript, React 17 (also reproduced with React 16.12)

OS/platform Mac OS 10.15, Google Chrome 87.0.4280.88

Additional context Add any other context about the problem here.

bwoskow-ld commented 3 years ago

Hi @tupton,

Thank you for the sandbox environment to reproduce the issue. That was helpful. I can reproduce the issue with your provided sample. However, when I change the client-side ID to a different value, flags are returned correctly. This supports my theory that the problem is not due to an SDK bug but rather an environment-specific misconfiguration.

Did you by chance enable "Secure mode" for this environment? This could potentially explain the problem -- if LaunchDarkly was told to enable secure mode yet the SDK was not configured to secure requests. See this documentation for more details. Note that while the docs are for the JavaScript SDK, they apply to the React SDK, too; the React SDK is a wrapper around the JavaScript SDK.

tupton commented 3 years ago

@bwoskow-ld I really appreciate the quick response and investigation.

We do indeed have "Secure mode" on for this environment, although I'm unsure if that's intentional or not ā€“ we are in the midst of adopting LaunchDarkly and this may have just been a case of misunderstanding the setting. Disabling that seems to fix the immediate issue of this bad request error. Of course, we'll probably want to enable secure mode according to the documentation you linked at some point, with the proper SDK configuration.

Again, thanks for the quick help! I'm not sure how possible it would be to provide more detail in that error message, or at least document that un-configured client SDKs may result in that error if "Secure mode" is enabled, but that would be useful. Are documentation PRs accepted? If so, would https://github.com/launchdarkly/LaunchDarkly-Docs/blob/master/src/content/topics/sdk/client-side/javascript/index.mdx be the right place to add such documentation?

bwoskow-ld commented 3 years ago

Yes, documentation PRs are accepted and encouraged šŸ˜„ Additionally I'll file an internal request to improve the error message when secure mode is enabled.