Menu
I have reCAPTCHA v3 set up on my page:
<script src="https://www.google.com/recaptcha/api.js?render=MY_KEY"></script>
If internet connectivity becomes unavailable or unreliable, reCAPTCHA will insert this HTML at the bottom of my page:
<div>
<div>
Could not connect to the reCAPTCHA service. Please check your internet connection and reload to get a reCAPTCHA challenge.
</div>
</div>
I would much rather handle this error in my JavaScript so I can display it to the user in a better way. However, the documentation for v3 doesn't indicate how to do this.
Any thoughts on how to catch this error?
691
The year is 2025, five years after the initial post. reCAPTCHA v3 still adds error messages to the <body> tag. Hello Google!
To reproduce the issue, follow these steps:
https://www.google.com/recaptcha/api.js?render=your_reCAPTCHA_site_key.grecaptcha.execute('your_reCAPTCHA_site_key', {action: 'submit'}). It succeeds as expected.grecaptcha.execute('your_reCAPTCHA_site_key', {action: 'submit'}) again. After 20 seconds, it appends an error message directly to the <body> tag.After troubleshooting, I came across this section of the documentation:
How can I customize reCAPTCHA v3?
The JavaScript API available for Invisible reCAPTCHA also works for v3. Simply use the JavaScript API to explicitly render reCAPTCHA with a v3 site key to access options such as repositioning the badge or changing the theme.
When rendering reCAPTCHA v3 with this method, remember to set the size parameter toinvisibleand use the client ID returned bygrecaptcha.renderwhen callinggrecaptcha.executeinstead of the site key.
I decided to test this alternative approach. Here's what I tried:
https://www.google.com/recaptcha/api.js?render=explicit&onload=my_function.const widget_id = grecaptcha.render(container, {
sitekey: 'your_reCAPTCHA_V3_site_key',
size: 'invisible',
'error-callback': () => console.error('reCAPTCHA error'),
});
grecaptcha.execute(widget_id, {action: 'submit'}). It succeeds.grecaptcha.execute(widget_id, {action: 'submit'}). This time, it returns a token and does not add an error message to the <body> tag. Phew!https://www.google.com/recaptcha/api/siteverify) results in:
{
"success": false,
"error-codes": ["browser-error"]
}
Additional Observations:
siteKey, the 'error-callback' is not called when an error occurs.siteKey, the 'error-callback' is called as expected.
183
answered Nov 12 '25 02:11
You can put an onerror handler in the script tag itself:
<script src="https://www.google.com/recaptcha/api.js?render=MY_KEY" onerror="error_handler()">
But I think what you want is more along the lines of what reCAPTCHA v2 offers:
widgetId = grecaptcha.render('example1', {
'sitekey' : 'your_site_key',
'theme' : 'light',
'error-callback' : error_handler()
});
I doubt that works but there is another way. You just need to monitor the DOM for changes since you know that when there is an error Google will add a div to your page. You can do that with MutationObserver.
var m = new MutationObserver(function (mutationRecords) {
this.disconnect();
error_handler();
});
m.observe(document.body, {childList: true});
{childList: true} tells the MutationObserver to detect nodes added to the DOM and passes them to the callback function as the parameter mutationRecords (which contains array of MutationRecord objects). From there it's up to you what to do next.
This should at least be enough to get you started!
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
