使用reCAPTCHA v3处理错误

如何解决使用reCAPTCHA v3处理错误

我的页面上设置了reCAPTCHA v3：

<script src="https://www.google.com/recaptcha/api.js?render=MY_KEY"></script>

如果互联网连接不可用或不可靠，则reCAPTCHA会将以下HTML插入我的页面底部：

<div>
  <div>
    Could not connect to the reCAPTCHA service. Please check your internet connection and reload to get a reCAPTCHA challenge.
  </div>
</div>

我宁愿在JavaScript中处理此错误，以便以更好的方式将其显示给用户。但是，documentation for v3并未说明如何执行此操作。

关于如何捕获此错误的任何想法？

解决方法

您可以在脚本标签本身中放置一个onerror处理程序：

<script src="https://www.google.com/recaptcha/api.js?render=MY_KEY" onerror="error_handler()">

但是我认为您想要的更多是reCAPTCHA v2提供的服务：

widgetId = grecaptcha.render('example1',{
    'sitekey' : 'your_site_key','theme' : 'light','error-callback' : error_handler()
});

我怀疑是否可行，但是还有另一种方法。您只需要监视DOM的更改，因为您知道发生错误时Google会将div添加到您的页面。您可以使用MutationObserver来做到这一点。

var m = new MutationObserver(function (mutationRecords) {
    this.disconnect();
    error_handler();
});
m.observe(document.body,{childList: true});

{childList：true}告诉MutationObserver检测添加到DOM的节点，并将它们作为参数mutationRecords（包含MutationRecord对象的数组）传递给回调函数。从那里开始，您下一步要做什么。

这至少应该足以让您入门！