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

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!

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

Does anyone know of a work around with this?

@SirWojtek the recaptcha core team does not have a public bug tracker (at least not one that I know of). I’ve submitted an issue to their support team through email, and I followed up again today. First time they recommended me to submit a question to StackOverflow, which I did with no results so far.

Let’s see if they get back with some hints/workarounds/timelines anytime soon. I would be very happy to bring you the good news today, but right now this is all I’ve got

Hey folks! Thx for letting me know about this, and I’m sorry that getting back to you took so long.

At this point I think I know where the issue is, ~and I plan to release a fix for it in the next couple of days in the 4.x.x branch.~ and I’ve reached out to recaptcha support team, see my comment below

This issue still exists in “ng-recaptcha”: “^10.0.0” is there any fix available ??

While I hope the above suggestion helps someone, I would like to point out few disadvantages to consider while using it:

• recaptcha remains active during whole app use. So for example, if you want to use it only for account creation, you can’t. And up to my best understanding, “active” really means active in case of recaptcha, it constantly uses CPU cycles to track user activity.
• the approach dissolves most of the benefit of re-captcha Angular component. For the approach, it is simpler to implement the Google API directly. For v3 https://developers.google.com/recaptcha/docs/v3#programmatically_invoke_the_challenge For v2 https://developers.google.com/recaptcha/docs/invisible

Hi all!

Last week, I also ran into this problem myself. I found that destroying, then re-instantiating the ng-recaptcha component between route changes may be the cause of this bug, as the newly instantiated component is not able to handle the promise when the recaptcha expires, and the resolved(response: string) method is being called back. The workaround I found for this, is that I added the ng-recaptcha component to the root component of my application like so:

app.component.html:

<router-outlet></router-outlet>
<re-captcha
  #captchaRef="reCaptcha"
  (resolved)="resolved($event)"
  size="invisible">
</re-captcha>

Then I implemented a service for offering the token as an observable to components in which I’m using recaptcha, so they can subscibe to the event:

captchav2.service.ts:

private recaptchav2 = new Subject<string>();
recaptchav2$ = this.recaptchav2.asObservable();
constructor() { }
recaptchav2Resolved(token: string){
  this.recaptchav2.next(token);
}

To wire the service with the actual callback method:

app.component.ts

public resolved(captchaResponse: string): void {
  this.captchav2Service.recaptchav2Resolved(captchaResponse);
}

Then in the component, in which I want to use recaptcha (in my case, it is a component for registration):

register.component.ts:

constructor( ...  private recaptchav2Service: Recaptchav2Service) {
}
private subscription: Subscription;

ngOnInit(): void {
  this.subscription = this.recaptchav2Service.recaptchav2$.subscribe((token) => {
    this.sendRegisterForm(token)
  })
...
}

onRegisterBtnClick(): void {
  grecaptcha.execute();
}

sendRegisterForm(token: string) {
  // do what you need to do here
...
  grecaptcha.reset();
  this.http.post(...).subscribe(() => {
    // or here :)
  });
}

public ngOnDestroy() {
  if(this.subscription){
    this.subscription.unsubscribe()
  }
}

So my solution works by having a single instance of the ng-recaptcha component throughout the entire application. In my case, it’s good enough. This solution probably won’t work properly if you need to have multiple instances of the ng-recaptcha component for whatever reason.

I advise you to have the badge hidden by default:

.grecaptcha-badge {
  visibility: hidden;
}

Then, you can either un-hide the badge on the pages you want to use it (this can be tricky!), or just include the text suggested by google on the page:

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

Note, that I’m not legally responsibe for the validity of this information, so you better check out Google’s the terms on this matter

What do you think of that? If you see any downsides of this solution, please let me know.

This issue still exists in “11.0.0”…

Wanted to add a couple notes to the group. I spent a good deal of time working on this problem, looking at alternative libraries on github, and going so far as to even write my own component to take a fresh perspective. Long story short, I think the ng-recaptcha library is good.

A couple notes…

1. This error is unavoidable from best I can tell, and similar to the authors original notes it appears to be on Google’s end. They don’t have a dispose option, which makes things very difficult.

2. You can override the dispose method using RecaptchaComponent.prototype.ngOnDestroy as mentioned in the original answer by the author, but I would strongly discourage this at this point. When going this route, you will remove the cancel error caused when calling google’s recaptcha service and switching routes mid-stream, and you will also not get an unhandled promise rejection error. However, working on the latest version of Angular, I noticed after a longer period of time I would get Timeout errors with this method of solution, and these would persist. The reason the other errors go away is you are no longer destroying the iframes created by Google’s recaptcha. In other words you create a new more persistent error, and you make the DOM busier. This method may have worked in the past, but I wouldn’t recommend it today.

I’ve got an improved workaround solution to the problem I think, but still need to do some final testing. I’ll post an update here shortly in the next day or two with an update.

I am still testing, but this seemed to work for me.

import { FormControl, Validators } from '@angular/forms';
import { RecaptchaComponent } from 'ng-recaptcha';

public captchaEl: FormControl = new FormControl(null, Validators.required);

  ngOnInit(): void {
    RecaptchaComponent.prototype.ngOnDestroy = function() {
      if (this.subscription) {
        this.subscription.unsubscribe();
      }
    }

    this.captchaEl.reset();
  }

Then after the form is submitted, I do this.captchaEl.reset(); again. Still testing, but I am not seeing the error anymore.

Hey @DethAriel, can you paste the link to the recapcha issue you created?

In search of a solution to the error, I noticed that by adding the following entry to the component, the error disappears. I’m using Angular v12 and ng-recaptcha v8

import { RecaptchaComponent } from 'ng-recaptcha';

ngOnInit() {
    RecaptchaComponent.prototype.ngOnDestroy = function() {};
}

The answer posted by @gyomi95 is what I was planning to do as well, got busy last week on other projects. Basically the issue is not easy to fix until Google deals with it, so the best path is to create it at the root so its not destroyed and you can reuse it across components.

I had someone Ina discord give me something like this which works most of the time but sometimes will still throw errors.

@ViewChild('captcha') captcha: ElementRef;
@ViewChild('submit') submit: MatButton;

captchaConnection;

renderCaptcha() {
	if (!grecaptcha.render) {
		setTimeout(() => {
			grecaptcha.render(this.captcha.nativeElement, {
				callback: (e) => this.captchaCallback(e)
			});
		}, 2000)
	}
	grecaptcha.render(this.captcha.nativeElement, {
		callback: (e) => this.captchaCallback(e)
	});
}

I had the same error message, but in my case captcha doesn’t load anymore …

I have 2 forms with captcha, first time the captcha render properly, but when i navigate between them captcha doesn’t load anymore.

Only workaround i’ve found : on form component destroy, remove the captcha element from DOM

  @ViewChild('captchaRef')
  reCaptcha: RecaptchaComponent;

...

  ngOnDestroy() {
    const captchaElem = this.reCaptcha['elementRef'].nativeElement;
    captchaElem.parentElement.removeChild(captchaElem);
  }

Now captcha always load properly, but error message continue to show up…

It’s not necessary to reload a component to get this error - destroying a component containing recaptcha leading to this case PS. This problem is also present in version 3.0.5 of ng-recaptcha