Trigger error callback for Network Failures

[benhutchins]

Currently, calling ReCaptchaV3Service.execute won't trigger the errorCallback when there is a network failure.

From a brief test, this is because the script tag that is added can fail to load and that is never handled or listened for.

Looking at this code:

        // prepare script elem
        const scriptElem = document.createElement('script');
        scriptElem.innerHTML = '';
        scriptElem.src = this.getCaptchaScriptUrl(useGlobalDomain, render, language);
        scriptElem.async = true;
        scriptElem.defer = true;

        // add script to header
        document.getElementsByTagName('head')[0].appendChild(scriptElem);

This initially allows this to work:

Essentially this needs to be added:

scriptElem.addEventListener('error', (err) => onLoad(err), true);
// scriptElem.onerror = (err) => onLoad(err);

And then the things that rely on this method needs to be updated to expect an error and pass that error along as necessary.

Overall, mobile users can lose network frequently, and this script failing to load can happen in situations. Right now, there is no way to get this error handled through ngx-recaptcha. So in these situations where you need recaptcha and are waiting for the callback, nothing will ever occur.

I've worked around this dumbly by adding a separate timeout that just assumes it failed after a given amount of time, but it'd be nice if the library triggered the errorCallback.

[rkorebrits]

I'm also trying to catch network failures on v2, but it doesn't seem to error when the script can't load

[mon2ortan]

@rkorebrits Did you find any solution to network error? I'm getting a 504 error in the console and the error callback is not getting triggered.

@benhutchins
I've worked around this dumbly by adding a separate timeout that just assumes it failed after a given amount of time, but it'd be nice if the library triggered the errorCallback.
I tried to check Recaptcha loaded or not by using window['grecaptcha'] & window['ngx_captcha_omload_callback'] values after timeout. However, sometimes timeout script is also not working. Can you please share the timeout code you wrote?

[tattivitorino]

well here we are.. i'm having the 504 error on recaptcha load.. but only in production.. I'm running a pwa with Ionic hosted in firebase.. it works great locally though.

any suggestion on how to fix it?

"ngx-captcha": "^11.0.0",

Ionic:

   Ionic CLI                     : 6.12.3 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.1.15
   @angular-devkit/build-angular : 14.1.0
   @angular-devkit/schematics    : 14.1.0
   @angular/cli                  : 14.1.0
   @ionic/angular-toolkit        : 6.1.0

Utility:

   cordova-res : not installed
   native-run  : 1.6.0

System:

   NodeJS : v14.18.3 (/Users/.../.nvm/versions/node/v14.18.3/bin/node)
   npm    : 6.14.15
   OS     : macOS