Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

API signup embedded form intermittently not-loading #554

Closed
johnnyporkchops opened this issue Aug 25, 2020 · 3 comments
Closed

API signup embedded form intermittently not-loading #554

johnnyporkchops opened this issue Aug 25, 2020 · 3 comments

Comments

@johnnyporkchops
Copy link

We are using the API Sign here: https://api.open.fec.gov/developers/, and find that it intermittently does not load.

We have tested various ways to embed it into the page, including creating another react component for the
signup embed code.Some work better than others, but with all, we still are able to recreate the issue of intermittent non-loading of the form..

Currently we are using the embed code more or less out-the-box, based on the documentation, with the exception of adding a setTimeout function to ensure the script has enough time to load the form.

Is there any settings related to rate-limiting or other controls that would make this happen. Especially related to multiple simultaneous requests (which happens when we are testing).

I did not find any issue on this repo directly related to this, but would like to ask if others have experienced this and if there is any insight that might help us solve this problem.

https://github.com/fecgov/openFEC

@GUI
Copy link
Member

GUI commented Aug 26, 2020

@johnnyporkchops: Sorry for the trouble with our signup form! We haven't heard or seen of this issue previously, but we'd definitely like to get to the bottom of it. There shouldn't be any rate limits related to embedding the signup form itself (there are rate limits related to actually registering API keys, but that would only occur after the signup form is loaded and submitted).

In looking at what's happening, I'm wondering if this is due to a race condition between how our signup form loads and how the Swagger UI is loading on the page. Our signup embed code assumes that the <div id="apidatagov_signup"></div> element will already exist on the page whenever our code is loaded. However, it looks like maybe that element doesn't get added to the page until the Swagger UI loads, is that correct? If that's what's happening, then I can envision race conditions related to our code getting called before Swagger UI injects that element on the page that would lead to the behavior you describe. The setTimeout of 1 second could help mitigate that, but it may not be perfect, since it will still fail anytime the Swagger UI takes longer than 1 second to initialize.

If you want to keep the signup form inside the swagger docs, would it be possible to shift the javascript snippet into the same Swagger docs area: https://github.com/fecgov/openFEC/blob/61e0186918e5caa75ba3dadf0c258b0f3b8b5aa0/webservices/docs.py#L44 So, in other words, make that look more like (and remove the other places where you're injecting this javascript snippet):

<div id="apidatagov_signup">Loading signup form...</div>
<script>
  (function() {
     var apiUmbrella = document.createElement('script'); apiUmbrella.type = 'text/javascript'; apiUmbrella.async = true;
     apiUmbrella.src = 'https://api.data.gov/static/javascripts/signup_embed.js';
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(apiUmbrella);
   })();
</script>

While that might not be totally ideal (since it defers loading our javascript until Swagger is fully loaded, rather than loading them in parallel), I'm curious if that would work and fix the race condition, since our code shouldn't be triggered until that div was definitely on the page.

If that is the issue, then we could also think about other ways to structure our javascript embed code so that you could load the javascript file in parallel, but possibly defer the execution of it until Swagger is fully loaded. But if that doesn't do the trick, or you're not able to make those changes, or have any other questions, definitely let us know.

@johnnyporkchops
Copy link
Author

@GUI, thanks for your detailed reply. This helps up further confirms that this is indeed a problem of the race condition created between the Swagger UI build and the loading of embed JS. To keep things simple, we are putting <div id="apidatagov_signup"> in a Swagger docs.py (which generates markdown). Script tags are stripped out of this when the page renders.

We can always stick with the set-timeout for now and are looking at the possibility of loading the script as an event triggered by a user interaction, like for example, clicking to expand an accordion containing the signup form.

(I also tried making a react component for the embed code to work with the Swagger react structure, but the race condition still happens in that scenario).

@mgwalker
Copy link
Member

mgwalker commented Dec 8, 2021

Closing as stale, on the assumption that the need will resurface if it still exists.

@mgwalker mgwalker closed this as completed Dec 8, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants