uncaught (in promise) timeout

[immunity20]

Hello I have 2 screens. In first screen a simple recaptcha ( both in 0.12 and 1.0.1) displayed (sitekey onchange function) which allow to click button to second screen. On second screen after some time console prints uncaught (in promise) timeout

[hartzis]

can you make a codesandbox.io example? using the template codsandbox.io/react-google-recaptcha?

and/or do you have some screenshots? code examples anything to help us debug with you?

[immunity20]

https://codesandbox.io/s/q4v9vnyzkj

after clicking will through uncaucht timeout (although in my project it will throw it after the wrapper, that has the reCAPTCHA module, has been dismount

[TechAlchemistry]

Some additions: This error appears after unmount the recaptcha component. It does not matter whether the user interacted with the CAPTCHA (we can just mount and unmount component and will see error in the console)

[hartzis]

@immunity20 Thank you for the example, i was able to get it to trigger once, but after @RubtsovAV comment about the unmount i can get it to error all the time.

I'll try to find some time next week to dig into it a bit more. thinking it has something to do with cleaning it up properly and or the reset call.

@immunity20 is it "breaking" your app?

[immunity20]

No not at all. I think after certain time the reCaptcha sessions reset (requires input from user again) maybe there is a promise about that and because the component has unmounted it is never consumed?

Στις Σάβ, 8 Σεπ 2018, 6:08 π.μ. ο χρήστης Brian Emil Hartz < [email protected]> έγραψε:

@immunity20 https://github.com/immunity20 Thank you for the example, i was able to get it to trigger once, but after @RubtsovAV https://github.com/RubtsovAV comment about the unmount i can get it to error all the time.

I'll try to find some time next week to dig into it a bit more. thinking it has something to do with cleaning it up properly and or the reset call.

@immunity20 https://github.com/immunity20 is it "breaking" your app?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dozoisch/react-google-recaptcha/issues/103#issuecomment-419608253, or mute the thread https://github.com/notifications/unsubscribe-auth/AQeV1uYm2xRPxjo8HJR_Mo9LENCxCdjUks5uYzTIgaJpZM4WYbyt .

[brien-givens]

I've seen this problem as well. It appears to be an issue in Google's code. Try commenting out the componentWillUnmount code - the issue still occurs, but the log points to the Google script.

[ntnbrtnkv]

Notitced this problem and some others like cannot read property 'style' of null. The problem is not about the library but the way I was working with Recaptcha. I'm mounting container with Recaptcha and container will be unmounted after user do its stuff, but Google's script has added some logic with the actual Google's Recaptcha component in the event loop so it produces errors.

My workaraund was not unmout but hide component like display: none or visibility: hidden so google's scripts can complete its logic.

Hope you will found it usefull.

[subvertallchris]

There's an open issue with Google Recaptcha, https://github.com/google/recaptcha/issues/269. Might be nice if anyone else wanted to comment there so they'll give it some attention.

[schnogz]

I had the uncaught (in promise) timeout error and after some debugging, I realized in my onChange callback, I was calling this in an incorrectly bound context which was silently failing. I fixed that issue and the uncaught in promise error went away.

Moral of the story, make sure there are no script errors happening in component lifecycles or callbacks that may in turn cause Google's code to error.

[conways-glider]

@hartzis @immunity20 Is the component unmounting as mentioned here? https://github.com/google/recaptcha/issues/269#issuecomment-434752317

If not, this may be an error on this side.

[conways-glider]

Otherwise, @TomPradat may have more information.

[TomPradat]

Well i just looked at the source code from this repository to make this statement

[hartzis]

Thanks to @RubtsovAV and @dozoisch we think this should be fixed with #120 and v1.0.5.

I updated the react-google-recaptcha/codesandbox.io to use v1.0.5 and i can't get the timeout to happen anymore.

[subvertallchris]

I'm still getting the timeout after upgrading. Any troubleshooting tips?

[TechAlchemistry]

@subvertallchris Is your root element the body tag?

[hartzis]

@subvertallchris can you create a codesandbox.io example that replicates what you're seeing with v1.0.5. You can fork the react-google-recaptcha/codesandbox.io one to start.

[omidnikrah]

Is there a helpful solution? I'm using v1.0.5 but I have the same issue.

[TechAlchemistry]

Yeah, now for some reason it has appeared again :(

[sgwanlee]

Never mind, it doesn't work.

Using 1.10.0, I got the same error reported in Sentry. After resetting synchronously, I've got no error anymore.

const recaptchaRef = useRef();

const handleSubmit = () => {
   try {
       await login();
       await recaptchaRef.current.reset();
       history.push('/profile');
    } catch {
      ...
   }
}

<form onSubmit={handleSubmit}>
       <ReCAPTCHA
            style={{ display: "inline-block" }}
            ref={recaptchaRef}
            sitekey={recaptchaKey}
            size={size}
            onChange={onChange}
          />
</form>

[JoshuaKGoldberg]

Yup, this is still an issue 😞. I had a form that, upon submission:

1. Executed reCAPTCHA
2. Removed the reCaptcha element from the DOM
3. Submitted the form

This issue went away when the code was changed to always include the element in the DOM, even after submission. Removing a bunch of details:

const Form = () => {
  const [submitted, setSubmitted] = useState(false);
  const reCaptchaElement = <ReCAPTCHA /* ... */ />; 

  return (
    <>
      {submitted
        ? <div>Thanks for submitting!</div>
        : (
          <form onSubmit={() => {
            /* ... */
            reCAPTCHA.execute();
            setSubmitted(true);
            /* ... */
          }}>
            <input /* ... */ />
-           {reCaptchaElement}
          </form>
        )
      }
+     {reCaptchaElement}
    </>
  );    
}

[sgwanlee]

Is reset necessary on umount? I just removed this.reset() in componentWillUnmount

[hartzis]

@sgwanlee I think you're on to something. Going to clean this up in a PR and see what it looks like. Great suggestion.

[hartzis]

@sgwanlee Additionally investigated why it was put there orginally.

We have/had issues with Error: ReCAPTCHA has already been rendered in this element but i'm starting to suspect this may not be an issue any longer 🤔

• https://github.com/dozoisch/react-google-recaptcha/issues/55
• PR with fix at the time - https://github.com/dozoisch/react-google-recaptcha/pull/73

[aytacg26]

Never mind, it doesn't work.

Using 1.10.0, I got the same error reported in Sentry. After resetting synchronously, I've got no error anymore.

const recaptchaRef = useRef();

const handleSubmit = () => {
   try {
       await login();
       await recaptchaRef.current.reset();
       history.push('/profile');
    } catch {
      ...
   }
}

<form onSubmit={handleSubmit}>
       <ReCAPTCHA
            style={{ display: "inline-block" }}
            ref={recaptchaRef}
            sitekey={recaptchaKey}
            size={size}
            onChange={onChange}
          />
</form>

If you do not want to generate a new reCAPTCHA challenge, I believe, when you submit the form, you shouldn't reset the recaptcha. The error occurs from reset process, because reseting it forces the Recaptcha widget to reload unnecessarily and at the same time most probably after submit process, you are unmounting it and hence it cannot find the widgetId and creates timeout error.