tdeekens / flopflip

🎚Flip or flop features in your React application in real-time backed by flag provider of your choice 🚦

Home Page:https://techblog.commercetools.com/embracing-real-time-feature-toggling-in-your-react-application-a5e6052716a9

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

If launchdarkly adapter cannot establish network connection, an error is thrown in `reconfigure` that cannot be handled.

tkh44 opened this issue · comments

Describe the bug
If the connection to launchdarkly is blocked by adblocker, corporate firewall, or any other means the following error is thrown:

@flopflip/launchdarkly-adapter: please configure adapter before reconfiguring.

Error thrown from here:
https://github.com/tdeekens/flopflip/blob/master/packages/launchdarkly-adapter/modules/adapter/adapter.ts#L239

adapterState.configurationStatus is 1 here: https://github.com/tdeekens/flopflip/blob/master/packages/launchdarkly-adapter/modules/adapter/adapter.ts#L234 which causes the error to be thrown.

Called from here:
https://github.com/tdeekens/flopflip/blob/master/packages/react/modules/components/configure-adapter/configure-adapter.tsx#L218

To Reproduce
Steps to reproduce the behavior:

  1. Given launchdarkly adapter is used with the ConfigureFlopFlip component
  2. Then block all requests to *.launchdarkly.com in DevTools

image

  1. That when refreshing the page the above mentioned error is thrown.

Expected behavior
The configuration error should either fail silently when a connection cannot be established or throw an error in a way that can be handled by developers.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
In our case we cannot render ConfigureFlopFlip component until the user is authorized and logged in which might explain why reconfigure is called in this manner, but I'm not sure on this.

Thanks for the very detailled bug report. Do you by any chance mean if this is a recent error or existing for longer.

How would you like to be able to handle the error? Just use the default flags or get more control? LaunchDarkly itself is actually collaborating with AdBlockers to be on a whitelist. So generally this issue should be avoidable - not saying it should not be handled.

I do not know how long this has existed. In our case, we have enterprise clients with very strict firewall rules that block these types of requests and we ran into one of these today.

I'm not sure how the best way to handle the error, but it would be best if we could either catch it in an error boundary or an onError cb prop on ConfigureFlopFlip. Any indication that the adapter could not be configured would be good, tbh.

While looking through the code it looks like this call to applyAdapterArgs needs a .catch. Maybe a console warning in the catch would be enough?

I agree. The case should at least lead to inform the system around. Either logging, throwing or an onError. Ideally I thought the throwOnInitialzationFailure could be reused. I often saw that people prefer things to just silently work with a log rather than the tree unmounting by throwing.

The applyAdapterArgs itself will not yield the error I think. I is 1 am over here and I can’t check on a laptop. I suspect the setState triggers an Effect. Ideally the configuration state should not change I think. Again I will debug when I find some time. If you find some more infos please let me know. If you want to open a PR even better 🐣

I understand the underlying issue and thought of a plan forward.

  1. The adapters will resolve/reject to a initialiation status which the system above can use (#1018)
  2. The configure components will use the status to update state accordingly
  3. Having the status propagate allows us to add an onError in the future

The issue actually existed before. Just didn't surface as the adapter status was not set to congfigured to eagerly. This is a regression I lately introduced. Sorry about that.

Alright. In the last two PRs #1019 and #1020 I am using the new resolved status.

I published now

Successfully published:
 - @flopflip/launchdarkly-adapter@2.13.0
 - @flopflip/localstorage-adapter@1.7.0
 - @flopflip/memory-adapter@1.7.0
 - @flopflip/react-broadcast@10.1.13
 - @flopflip/react-redux@10.1.12
 - @flopflip/react@9.1.10
 - @flopflip/splitio-adapter@1.8.0
 - @flopflip/types@2.5.0

As far as I can tell you you're using

 - @flopflip/launchdarkly-adapter@2.13.0
 - @flopflip/react-broadcast@10.1.13 
 or
 - @flopflip/react-redux@10.1.12

I debugged the published versions (aside from them being tested) in one of our applications. The fix works for me and as far as I understand the issue could work for you too. Let me know if it does :)

Thanks again for the issue.

Thank you so much @tdeekens I really appreciate it!

Will close this. Feel free to reopen if the issue persists.