ng-recaptcha tag <recaptcha> causes error “zone.js: Unhandled Promise rejection” when route changes

[Maintainer update 2022-09-26]

Please see this comment.

Summary

I’m submitting a:

• bug report

Description

I’m using “ng-recaptcha” on Angular component. Im using inside a form like this:

<form class="form-contact"
        [formGroup]="contactForm"
        #formDirective="ngForm" 
        (ngSubmit)="sendMessage(contactForm, formDirective)">
  <re-captcha class="recaptcha"
              formControlName="captcha"
              siteKey="mysitekey">
  </re-captcha>
</form>

Everything seems to be working fine. However, when route changes (ex. user goes to another page) and the AboutComponent is rendered again, an error pops up (multiple times): Unhandled Promise rejection: timeout ; Zone: <root> ; Task: Promise.then ; Value: timeout undefined. I’m 99% sure it’s caused by <re-captcha> tag because error doesn’t show up after removing the tag. Is there a way to render a captcha without errors when route changes (and captcha reloads after im back to component)? Obs: You must wait a few seconds after navigating to another route and back to captcha, then Promise timeout expires and error shows up inside console (google/firefox)

• I did my best to come up with a Minimal, Complete, and Verifiable example

https://stackblitz.com/edit/angular-en3spw

Lib versions:

• ng-recaptcha: 4.0.0-beta.1
• Angular: 6.1.4
• Typescript (tsc --version): 2.9.2

[DethAriel]

To not keep you folks in the dark, here’s a small status update.

Why it happens?

This error happens due to the following scenario:

1. When the component is destroyed, ng-recaptcha invokes the grecaptcha.reset(ID) method
2. This results in recaptcha invoking the api2/anchor endpoint that @BrentACole mentions
3. For some reason this endpoint times out
4. Since this unhandled promise lies inside recaptcha__en.js file there’s no way we could catch it (e.g. patching this file is not an option given such a sophisticated minimization algorithm used)

Why not just skip invoking grecaptcha.reset during ngOnDestroy?

It’s there for a reason, and this reason is #10 .

What can I do?

If you can - ignore it. Add this error to an allowlist in your e2e tests or frontend monitoring software.

Otherwise, you can override the ngOnDestroy method of RecaptchaComponent manually (or create a component fork). Please be aware, that this is a temporary and pretty bad fix that might put you in a very unfortunate position when upgrading component versions! Nevertheless, here’s approximate code for that:

// somewhere in your "main.ts"
import { RecaptchaComponent } from 'ng-recaptcha';
RecaptchaComponent.prototype.ngOnDestroy = function() {
  if (this.subscription) {
    this.subscription.unsubscribe();
  }
}

What next?

I’ve submitted this issue to the recaptcha support team, and I’ll post an update here when I have it.

Thx for bearing with me on that!

[LuiisFernando]

Anyone solved this error ? I had the same error on angular 4 with recaptcha.