Interceptor event always throws error after login to application

Question

Interceptor event always throws error and error block geting exicuting.

We are upgrading our existing angular10 application to Angular 15. After upgradation we are facing issue whicle login to application.

Interceptor service is always throwing or executing catchError. But the same code is working fine in Angular10 Envronment.

jsoginterceptor.service.ts

import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {JsogService} from 'jsog-typescript';
import {catchError, finalize, map} from 'rxjs/operators';
import {throwError, Observable} from "rxjs";

@Injectable({
  providedIn: 'root'
})
export class JsogServiceInterceptor implements HttpInterceptor {
   private networkStatus: Subject<boolean> = new Subject();
   private activeLogins = 0;

   constructor(private jsog: JsogService) {}
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     if (req.responseType === 'json') {
        if (this.activeLogins >= 0) {
          this.networkStatus.next(true);
        }
        this.activeLogins++;
        return next.handle(req)
          .pipe(
            finalize(() => {
              this.activeLogins--;
              if (this.activeLogins <= 0) {
                this.networkStatus.next(false);
              }
          }),
          map(event => {
            if (event instanceof HttpResponse) {
              const body: any = this.jsog.deserialize(event.body);
              event = event.clone({
                body: body
              });
            }
            return event;
          }),
          catchError(err => {
              if (err instanceof HttpErrorResponse) {
                this.activeLogins--;
                if (this.activeLogins <= 0) {
                  this.networkStatus.next(false);
                }
                this.AuthenticationGuard.checkConnection();
                return throwError(err);
              }
            }
            ));
       }
       return next.handle(req);
     }
  }

Also in AuthenticationGuard Service file checkConnect() function also getting break at subscribe(data =>{()} line getting break.

It is redirecting to if (req.responseType === 'json') in intercept file .This is continuesly and login page getting stuck.

guard.service.ts

export class AuthenticationGuard implements CanActivate {

  private authenticationData: BehaviorSubject<UserInfo> = new BehaviorSubject<UserInfo>(undefined);

  checkConnect(): void {
    this.store.select(createFeatureSelector<AuthState>('authenticationData'))
      .subscribe(data => {
         if (data.loggedIn) {
            this.http.get<RequestStatus>(environment.systemServiceURL, {withCredentials: true, reportProgress: false})
             .subscribe({
                next: (res) => {
                  if (res.status !== RequestStatus.StatusEnum.OK) {  
                    this.router.navigate(['/no-access']);  
                  }
              },
              error: () => {
                this.store.dispatch({
                  payload: {
                    loggedIn: false
                  }
                }); 
              }
             })
          }
       });
    }
  }

We tried to change the subscribe to pipe(map()) but it is still same behavior. The loop was not ending finally the page getting stuck.