How to capture Google recaptchaV3 Promise Timeout?

Question

import canUseDOM from '@utils/dist/env/canUseDOM';

declare global {
  interface Window {
    grecaptcha: any;
  }
}

export default async function getRecaptchaTokenExplicit(params: { recaptchaClientId: number }) {
  return new Promise(resolve => {
    if (canUseDOM && window.grecaptcha) {
      const { recaptchaClientId } = params;

      window.grecaptcha.ready(() => {
        window.grecaptcha
          .execute(recaptchaClientId, {
            action: 'submit',
          })
          .then(function(token: string) {
            return resolve(token);
          });
      });
    } else {
      return resolve('');
    }
  });
}

Calling await above function, I used to get Timeout console error from recaptcha (found it was because of badge element get removed due to component rendering), but in order to avoid it, how do I capture it and resolve return empty string?

error looks like this:

Answer 1

Since the error is in the promise, have you tried to .catch() it?

window.grecaptcha
    .execute(recaptchaClientId, {
        action: 'submit',
    })
    .then(function(token: string) {
        resolve(token);
    })
    .catch(err => {
        console.error(err);
        resolve('');
    });