Angular13- suddenly started to see "Uncaught TypeError: Illegal invocation"

Question

I am using angular 13 for my project and for the last 6 days (24th Feb 2024) I have started seeing "Uncaught TypeError: Illegal invocation" suddenly on my production application. No recent changes have been deployed, and the app was working fine before this. I have a login screen and as soon as the user enters their creds and hit login the console pops up with this error and it blocks the user from getting into the system. Some users are facing this and some are not. I am in the India office and for us it works, I tried using the VPN and connected with the USA network and it started to fail. I am not sure if this could be due to a region or what. Has anyone faced this sort of problem recently or before? Could you please help me with this?

I have attached a screenshot of the error herewith. I don't see any API call in the network before the API call the app started to fail. I was able to debug it in the interceptor and it went in the **else (!error.status)** block. Below is my interceptor code.

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (!req || !req.url || (/^http/.test(req.url) && !(environment.serverUrl && req.url.startsWith(environment.serverUrl)))) {
      return next.handle(req);
    }

    const authToken = this.storageService.get(AppConstants.authenticationToken);
    const encryptUserId = this.storageService.get(AppConstants.encryptUserId);
    let authRequest;
    if (authToken) {
      authRequest = req.clone({
        headers: req.headers.set('Authorization', 'Bearer ' + authToken)
      });
    } else if (encryptUserId) {
      authRequest = req.clone({
        headers: req.headers.set('API', encryptUserId)
      });
    } else {
      authRequest = req.clone();
    }
    authRequest = authRequest.clone({
      url: environment.serverUrl + authRequest.url
    });
    return next.handle(authRequest).pipe(
      tap(
        (event: HttpEvent<string>) => {
          this.requestSuccess(event);
        },
        error => {
          return throwError(error);
        }
      ),
      catchError(error => {
        if (error.error instanceof Error) {
          // A client-side or network error occurred. Handle it accordingly.
        } else {
          if (!error.status) { // here it goes when it breaks
            this.alertService.showErrorToast(ErrorMessages.serverNotAvailable);
            localStorage.clear();
            this.router.navigateByUrl('/auth/login');
          } else if (error.status === 405) {
            this.alertService.showErrorToast(error.message);
          } else if (error.status === 401) {
            this.alertService.showErrorToast(error.Message);
            localStorage.clear();
            this.router.navigateByUrl('/auth/login');
          } else if (error.status === 400 || error.status === 404 || error.status === 500) {
            if (error.status === 500 && error.url.search('downloadPdfReport') > 1) {
              this.alertService.showErrorToast(ErrorMessages.downloadErrorMessage);
            }
          } else if (error.status === 400 && (error.url.search('downloadPdfReport') > 1 || error.url.search('downloadPptReport') > 1)) {
            this.alertService.showErrorToast(ErrorMessages.downloadErrorMessage);
          }
          // reset password messge
          else if (error.status === 400) {
            if (error.email) {
              this.alertService.showErrorToast(error.email[0]);
            } else {
              this.alertService.showErrorToast(error.message);
            }
          }
        }
        return throwError(error);
      })
    );
  }

enter image description here

Please let me know if any more insights are required I am happy to help and sort this issue for my client. Any help is appreciated, thanks!

Expectations are the users should be at least allowed to log in I am not getting could that console error block the user from getting into the system? I have my app running on the EC2 instance. The error I am seeing:

main.8558c5021b62b982.js?__cpo=aHR0cHM6Ly93d3cucWVzb2xhcnRvb2xzLmNvbQ:1 Google Maps JavaScript API has been loaded directly without loading=async. This can result in suboptimal performance. For best-practice loading patterns please see https://goo.gle/js-api-loading
(anonymous) @ main.8558c5021b62b982.js?__cpo=aHR0cHM6Ly93d3cucWVzb2xhcnRvb2xzLmNvbQ:1
fca @ js?key=AIzaSyAObJC1CaYEzUMUBnRUd8yLJlwNF78W5Uo&callback=Function.prototype:218
google.maps.Load @ js?key=AIzaSyAObJC1CaYEzUMUBnRUd8yLJlwNF78W5Uo&callback=Function.prototype:14
(anonymous) @ js?key=AIzaSyAObJC1CaYEzUMUBnRUd8yLJlwNF78W5Uo&callback=Function.prototype:389
(anonymous) @ js?key=AIzaSyAObJC1CaYEzUMUBnRUd8yLJlwNF78W5Uo&callback=Function.prototype:389
polyfills.dbac6c637fb0a656.js?__cpo=aHR0cHM6Ly93d3cucWVzb2xhcnRvb2xzLmNvbQ:1 Uncaught TypeError: Illegal invocation
    at n.onreadystatechange [as __zone_symbol__ON_PROPERTYreadystatechange] (polyfill.min.js?features=default:81:311)
    at XMLHttpRequest.We (polyfills.dbac6c637fb0a656.js?__cpo=aHR0cHM6Ly93d3cucWVzb2xhcnRvb2xzLmNvbQ:1:11618)
    at XMLHttpRequest.E (main.8558c5021b62b982.js?__cpo=aHR0cHM6Ly93d3cucWVzb2xhcnRvb2xzLmNvbQ:1:406592)
    at v.invokeTask (polyfills.dbac6c637fb0a656.js?__cpo=aHR0cHM6Ly93d3cucWVzb2xhcnRvb2xzLmNvbQ:1:7278)
    at M.runTask (polyfills.dbac6c637fb0a656.js?__cpo=aHR0cHM6Ly93d3cucWVzb2xhcnRvb2xzLmNvbQ:1:2673)
    at m.invokeTask [as invoke] (polyfills.dbac6c637fb0a656.js?__cpo=aHR0cHM6Ly93d3cucWVzb2xhcnRvb2xzLmNvbQ:1:8329)
    at Z (polyfills.dbac6c637fb0a656.js?__cpo=aHR0cHM6Ly93d3cucWVzb2xhcnRvb2xzLmNvbQ:1:20944)
    at N (polyfills.dbac6c637fb0a656.js?__cpo=aHR0cHM6Ly93d3cucWVzb2xhcnRvb2xzLmNvbQ:1:21237)
    at XMLHttpRequest.B (polyfills.dbac6c637fb0a656.js?__cpo=aHR0cHM6Ly93d3cucWVzb2xhcnRvb2xzLmNvbQ:1:21503)
    at eval (eval at <anonymous> (__cpa.cp.js?__cpo=1&dummy=0b012c75eee6abe70077daa1cbdec021:8:2), <anonymous>:3:98987)
    at XMLHttpRequest.eval (eval at <anonymous> (__cpa.cp.js?__cpo=1&dummy=0b012c75eee6abe70077daa1cbdec021:8:2), <anonymous>:3:106097)
    at XMLHttpRequest._0x52390f [as __zone_symbol__open] (eval at <anonymous> (__cpa.cp.js?__cpo=1&dummy=0b012c75eee6abe70077daa1cbdec021:8:2), <anonymous>:3:98905)
    at polyfills.dbac6c637fb0a656.js?__cpo=aHR0cHM6Ly93d3cucWVzb2xhcnRvb2xzLmNvbQ:1:32647
    at o.<computed> [as open] (polyfills.dbac6c637fb0a656.js?__cpo=aHR0cHM6Ly93d3cucWVzb2xhcnRvb2xzLmNvbQ:1:13594)
    at O.open (scripts.533134a388cfabad.js:1:4357)
    at s.a [as open] (polyfill.min.js?features=default:81:999)
    at _.G.send (js?key=AIzaSyAObJC1CaYEzUMUBnRUd8yLJlwNF78W5Uo&callback=Function.prototype:239:373)
    at dca (js?key=AIzaSyAObJC1CaYEzUMUBnRUd8yLJlwNF78W5Uo&callback=Function.prototype:225:305)
    at fca (js?key=AIzaSyAObJC1CaYEzUMUBnRUd8yLJlwNF78W5Uo&callback=Function.prototype:219:253)
    at google.maps.Load (js?key=AIzaSyAObJC1CaYEzUMUBnRUd8yLJlwNF78W5Uo&callback=Function.prototype:14:5)
    at js?key=AIzaSyAObJC1CaYEzUMUBnRUd8yLJlwNF78W5Uo&callback=Function.prototype:389:634
    at js?key=AIzaSyAObJC1CaYEzUMUBnRUd8yLJlwNF78W5Uo&callback=Function.prototype:389:647