Uncaught (in promise) Timeout recaptcha__en.js

[atulshrma91]

Google captcha is working well but console show up the error after some time

[rowan-m]

Would you be able to provide a bit more information about how to reproduce this, please. Preferably a URL and instructions for what to do to see this error in the console.

[subvertallchris]

I can provide a partial stacktrace of this. Comes from production so it's mangled, though. Maybe it'll still point you to the right place...

Uncaught (in promise) timeout

setTimeout (async)
p @ recaptcha__en.js:99
(anonymous) @ recaptcha__en.js:306
CW @ recaptcha__en.js:306
Os @ recaptcha__en.js:482
(anonymous) @ recaptcha__en.js:484
Promise.catch (async)
Os @ recaptcha__en.js:483
ss @ recaptcha__en.js:489
qY.PN @ recaptcha__en.js:486
re @ recaptcha__en.js:490
t.reset @ main.8d559850.js:16
t.componentWillUnmount @ main.8d559850.js:16
Ho @ main.8d559850.js:73
Yo @ main.8d559850.js:73
$a @ main.8d559850.js:73
Xa @ main.8d559850.js:73
Ga @ main.8d559850.js:73
Qa @ main.8d559850.js:73
ts @ main.8d559850.js:73
Ln @ main.8d559850.js:73

In my case, it happens after the unmount of a React component that was presenting a recaptcha. It has been occurring consistently for a few months.

[conways-glider]

react-google-recaptcha claims this issue live in here. It seems to be related to when the recaptcha is unmounted, at an undetermined time later, a timeout error occurs in the browser.

[TomPradat]

Maybe there is a step missing in react-google-recaptcha when removing the widget. Here are the steps done to remove the widget properly :

• Removing all nodes from the container use in the grecaptcha.render method
• Use grecaptcha.reset to reset the widget

So the problem is that you get "Uncaught (in promise) timeout" error after some time after removing the widget. If the steps above are correct then the problem is probably due to recaptcha

[hartzis]

@TomPradat does the widget itself still need to be in the dom/exist when reset is called?

[pleinonen]

Also reproducible in Angular 6 when component hosting the recaptcha widget is destroyed after successful recaptcha check.

[Goaty89]

Yeah, it causing a lot false alarm..Please fix.

[TomPradat]

@TomPradat does the widget itself still need to be in the dom/exist when reset is called?

I wondered about that so i forked and try to call reset before unmounting from the dom but i still got the issue

[fabianclain]

I am also reproducing this, in a blade template in composition with Vue.

| setTimeout (async) |   |  
-- | -- | -- | --
  | M | @ | recaptcha__en.js:105
  | (anonymous) | @ | recaptcha__en.js:319
  | G4 | @ | recaptcha__en.js:13
  | next | @ | recaptcha__en.js:12
  | (anonymous) | @ | recaptcha__en.js:12
  | ig | @ | recaptcha__en.js:12
  | Xe | @ | recaptcha__en.js:13
  | Qa.send | @ | recaptcha__en.js:319
  | gV | @ | recaptcha__en.js:329
  | (anonymous) | @ | recaptcha__en.js:350
  | (anonymous) | @ | anchor:197

[patelnav]

Any update on this?
@rowan-m If you require more information on this bug, do let us know.

[praneetloke]

EDIT: Nevermind. My comment below did not work, even though at first it looked it did.

I encountered this with an Angular app. There was a detail in the examples on the reCAPTCHA v2 docs page, that I just found. In one of the examples, you can see that they are capturing the result of the call to widget = ...render() and then whenever the form is submitted, they are calling reset() by passing to it the result of the render() call. I replicated this with my app and it worked. I no longer get the timeout console errors. It seems that just calling reset() without passing any parameters isn't actually reset the "default" widget as the docs state.

This is what I did, and so far it seems to be working without throwing the timeout error:

// This code is in TypeScript.
private renderedWidget: any;

// In some function, I call the render() on the global grecaptcha object.
this.rendered = window.grecaptcha.render(...);

/** 
* Later, after doing my async request, I reset the captcha like this for both success and failure scenarios.
* You can also call this when your component is unloaded/destroyed.
* If your component isn't unloaded after using the reCAPTCHA response 
* until the timeout period, you may receive the timeout
* error, so you should reset the widget as early as possible.
*/

...
window.grecaptcha.reset(this.rendered);
...