search

appleboy / react-recaptcha

A react.js reCAPTCHA for Google
https://www.google.com/recaptcha/intro/index.html
BSD 3-Clause "New" or "Revised" License
634 stars 97 forks source link

Random timeouts printed in console #319

Open cristianoccazinsp opened 2 years ago

cristianoccazinsp commented 2 years ago

After rendering a component with <Recaptcha ... and the page unmounts including the component, for some reason the following is printed in the console:

9e99265b-00ba-4b5f-8e5b-50731e677018:1 Uncaught (in promise) Timeout
setTimeout (async)
(anonymous) @ recaptcha__en.js:formatted:642
(anonymous) @ recaptcha__en.js:formatted:3920
(anonymous) @ recaptcha__en.js:formatted:3910
(anonymous) @ recaptcha__en.js:formatted:2142
(anonymous) @ recaptcha__en.js:formatted:2152
Promise.catch (async)
(anonymous) @ recaptcha__en.js:formatted:2146
(anonymous) @ recaptcha__en.js:formatted:4115
(anonymous) @ recaptcha__en.js:formatted:5949
VA @ recaptcha__en.js:formatted:15439
(anonymous) @ recaptcha__en.js:formatted:185
value @ react-recaptcha.js:formatted:306
value @ react-recaptcha.js:formatted:306
commitLayoutEffectOnFiber @ react-recaptcha.js:formatted:306
commitLayoutMountEffects_complete @ react-recaptcha.js:formatted:306
commitLayoutEffects_begin @ react-recaptcha.js:formatted:306
commitLayoutEffects @ react-recaptcha.js:formatted:306
commitRootImpl @ react-recaptcha.js:formatted:306
commitRoot @ react-recaptcha.js:formatted:306
performSyncWorkOnRoot @ react-recaptcha.js:formatted:306
flushSyncCallbacks @ react-recaptcha.js:formatted:306
(anonymous) @ react-recaptcha.js:formatted:306
XMLHttpRequest.send (async)
dispatchXhrRequest @ react-recaptcha.js:formatted:306
xhrAdapter @ react-recaptcha.js:formatted:306
dispatchRequest @ react-recaptcha.js:formatted:306
Promise.then (async)
request @ react-recaptcha.js:formatted:306
Axios.<computed> @ react-recaptcha.js:formatted:306
wrap @ react-recaptcha.js:formatted:306
api.user @ react-recaptcha.js:formatted:306
(anonymous) @ react-recaptcha.js:formatted:306
(anonymous) @ react-recaptcha.js:formatted:306
boundActionCreators.<computed> @ react-recaptcha.js:formatted:306
componentDidMount @ react-recaptcha.js:formatted:306
commitLayoutEffectOnFiber @ react-recaptcha.js:formatted:306
commitLayoutMountEffects_complete @ react-recaptcha.js:formatted:306
commitLayoutEffects_begin @ react-recaptcha.js:formatted:306
commitLayoutEffects @ react-recaptcha.js:formatted:306
commitRootImpl @ react-recaptcha.js:formatted:306
commitRoot @ react-recaptcha.js:formatted:306
finishConcurrentRender @ react-recaptcha.js:formatted:306
performConcurrentWorkOnRoot @ react-recaptcha.js:formatted:306
workLoop @ react-recaptcha.js:formatted:306
flushWork @ react-recaptcha.js:formatted:306
performWorkUntilDeadline @ react-recaptcha.js:formatted:306
queue.<computed> @ react-recaptcha.js:formatted:306
run @ react-recaptcha.js:formatted:306
listener @ react-recaptcha.js:formatted:306

Looks like this started happening since React v18

sam-sbl commented 2 years ago

I'm finding this too on 17.0.2

cristianoccazinsp commented 2 years ago

Turns out, this happens if the component unmounts shortly after mounting (probably before the captcha renders). I had a slight bug in my application where the component would render on construction and disappear instantly due to a componentDidMount update changing the conditional logic to render it. After fixing that, the issue went away.

sam-sbl commented 2 years ago

Yep, that's it. I was conditionally removing the component from the page after theverifyCallback, which triggered the timeouts. I've changed the component to use visibility: hidden for now. However, removing the component probably shouldn't throw these console errors?