Tips for managing and identifying canceled requests in an Angular HTTP interceptor

Question

Tips for managing and identifying canceled requests in an Angular HTTP interceptor

Having trouble handling cancelled requests in my http interceptor. Despite trying various methods from SO, I can't seem to catch it.

Here is an example of how my interceptor looks:

public intercept(req: HttpRequest<any>, next: HttpHandler) {
        const xyz = this._cookieService.get('xyz');
        const abc = this._cookieService.get('abc');

        let authReq;
        if (jwt === "undefined" || jwt === undefined) {
            authReq = req.clone({ headers: req.headers.set('Authorization', xyz) });
        } else {
            authReq = req.clone({setHeaders: { Authorization: 'bearer ' + abc } });
        }

        return next
            .handle(authReq)
            .pipe(
                catchError((err: HttpErrorResponse) => this.catchErrorHandler(err))
            );
    }

I've experimented with the do and finalize methods but still facing issues. Whenever my authentication expires, subsequent requests start failing one by one, causing the page to break. I'm looking for a solution in code to prevent this happening.

Some methods I've tried:

https://i.sstatic.net/vuHKA.png

javascript angular typescript angular-http-interceptors

Answer 1

Answer №1

One important operator in RxJS is known as finalize.

This operator returns an Observable that behaves like the source Observable, but with the added functionality of executing a specified function when the source completes either successfully or with an error. The specified function will also run if the subscriber explicitly unsubscribes.

    return next
        .handle(authReq)
        .pipe(
            catchError((err: HttpErrorResponse) => this.catchErrorHandler(err)),
            finalize(() => console.log('finalize'))
        );

Answer 2

One important operator in RxJS is known as finalize.

This operator returns an Observable that behaves like the source Observable, but with the added functionality of executing a specified function when the source completes either successfully or with an error. The specified function will also run if the subscriber explicitly unsubscribes.

    return next
        .handle(authReq)
        .pipe(
            catchError((err: HttpErrorResponse) => this.catchErrorHandler(err)),
            finalize(() => console.log('finalize'))
        );

Answer 3

Answer №2

Here is a suggestion for an interceptor you can use:

@Injectable()
export class RequestInterception implements HttpInterceptor {
  public constructor() { }

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const token = '';
    const currentLanguage = 'en';
    let headers;

    if (token) {
      headers = new HttpHeaders({
        "X-MDM-Token": token,
        "Accept-Language": currentLanguage
      });
    }

    request = request.clone({
      headers: headers,
      url: request.url || environment.serverUrl
    });

    return next.handle(request).pipe(
      map((event: any) => {

        if (event.status < 200 || event.status >= 300) {
          return Observable.throw(event);
        }

        return event;
      }),

      catchError((response: HttpErrorResponse, request) => {
        switch (response.status) {
          case 401:
            //
            break;
        }
        return throwError("Server Error with RequestInterception!");
      })
    );
  }
}

If the client cancels the HTTP request and receives a 499 HTTP code, it will be captured by:

if (event.status < 200 || event.status >= 300) {
      return Observable.throw(event);
}

Answer 4

Here is a suggestion for an interceptor you can use:

@Injectable()
export class RequestInterception implements HttpInterceptor {
  public constructor() { }

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const token = '';
    const currentLanguage = 'en';
    let headers;

    if (token) {
      headers = new HttpHeaders({
        "X-MDM-Token": token,
        "Accept-Language": currentLanguage
      });
    }

    request = request.clone({
      headers: headers,
      url: request.url || environment.serverUrl
    });

    return next.handle(request).pipe(
      map((event: any) => {

        if (event.status < 200 || event.status >= 300) {
          return Observable.throw(event);
        }

        return event;
      }),

      catchError((response: HttpErrorResponse, request) => {
        switch (response.status) {
          case 401:
            //
            break;
        }
        return throwError("Server Error with RequestInterception!");
      })
    );
  }
}

If the client cancels the HTTP request and receives a 499 HTTP code, it will be captured by:

if (event.status < 200 || event.status >= 300) {
      return Observable.throw(event);
}

Answer 5

Answer №3

I've been curious about this for a while, so I decided to explore it further today.

When dealing with a cancelled request, the error message typically appears as follows:

{
    "headers": {
        "normalizedNames": {},
        "lazyUpdate": null,
        "headers": {}
    },
    "status": 0,
    "statusText": "Unknown Error",
    "url": "https://localhost:7258/api/company/test-exception",
    "ok": false,
    "name": "HttpErrorResponse",
    "message": "Http failure response for https://localhost:7258/api/company/test-exception: 0 Unknown Error",
    "error": {
        "isTrusted": true
    }
}

Note that the headers are empty and the status code is 0.

Upon researching what status code 0 signifies, I came across the following insights:

In practical terms, status==0 in a failed XmlHttpRequest should be viewed as an undefined error.

This code might indicate an error occurring even before communication with the server takes place.

Response by whitneyland on What does it mean when an HTTP request returns status code 0?

While we still need to pinpoint the root cause of the status 0, we can handle this error simply by:

next
  .handle(req)
  .pipe(
  catchError((err) => {
    if (err.status == 0) {
      // handle cancelled request here
      console.log(err);
    }
  }
})

Answer 6

I've been curious about this for a while, so I decided to explore it further today.

When dealing with a cancelled request, the error message typically appears as follows:

{
    "headers": {
        "normalizedNames": {},
        "lazyUpdate": null,
        "headers": {}
    },
    "status": 0,
    "statusText": "Unknown Error",
    "url": "https://localhost:7258/api/company/test-exception",
    "ok": false,
    "name": "HttpErrorResponse",
    "message": "Http failure response for https://localhost:7258/api/company/test-exception: 0 Unknown Error",
    "error": {
        "isTrusted": true
    }
}

Note that the headers are empty and the status code is 0.

Upon researching what status code 0 signifies, I came across the following insights:

In practical terms, status==0 in a failed XmlHttpRequest should be viewed as an undefined error.

This code might indicate an error occurring even before communication with the server takes place.

Response by whitneyland on What does it mean when an HTTP request returns status code 0?

While we still need to pinpoint the root cause of the status 0, we can handle this error simply by:

next
  .handle(req)
  .pipe(
  catchError((err) => {
    if (err.status == 0) {
      // handle cancelled request here
      console.log(err);
    }
  }
})

Answer 7

Answer №4

This is how I accomplished it:

Interceptor code:

...
return next.handle(request)
  .pipe(
    onCancelled(() => {
      // callback for cancelled requests
    }),
  );
...

onCancelled function

function onCancelled<T>(callback: () => void) {
  return (obs: Observable<T>) => {
    let cancelled = true;
    return new Observable<T>(subscriber => {
      const sub = obs.subscribe(
        value => {
          if (value instanceof HttpResponse) cancelled = false;
          subscriber.next(value);
        },
        err => {
          cancelled = false;
          subscriber.error(err);
        },
        () => {
          cancelled = false;
          subscriber.complete();
        });
      return () => {
        if (cancelled) callback();
        sub.unsubscribe();
      };
    });
  };
}

Answer 8

This is how I accomplished it:

Interceptor code:

...
return next.handle(request)
  .pipe(
    onCancelled(() => {
      // callback for cancelled requests
    }),
  );
...

onCancelled function

function onCancelled<T>(callback: () => void) {
  return (obs: Observable<T>) => {
    let cancelled = true;
    return new Observable<T>(subscriber => {
      const sub = obs.subscribe(
        value => {
          if (value instanceof HttpResponse) cancelled = false;
          subscriber.next(value);
        },
        err => {
          cancelled = false;
          subscriber.error(err);
        },
        () => {
          cancelled = false;
          subscriber.complete();
        });
      return () => {
        if (cancelled) callback();
        sub.unsubscribe();
      };
    });
  };
}

Tips for managing and identifying canceled requests in an Angular HTTP interceptor

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Eliminate Angular Firebase Object and Storage

Instead of being viewed in the browser, the CSV file is being downloaded

In relation to the characteristics of an Angular Component (written in TypeScript) Class

What is the best way to import modules with the "@" symbol in their path when working with Node.js?

Endless scrolling feature malfunctioning

iOS iframe remains unscrollable only when switching from portrait to landscape orientation

Tips for adjusting the horizontal position of a grid item within a map() loop

Distinguishing between keydown.enter for textareas in Angular on mobile and desktop devices

Creating a transcluding element directive in AngularJS that retains attribute directives and allows for the addition of new ones

Issue with VS code/Angular where linter is unable to detect components imported from shared modules

Comparison of Transform plugin and Syntax plugin within Babel

``Can you provide guidance on excluding matching values from a dictionary object in a Angular project?

Determining if a div is scrolled to the bottom in ASP.NET

Identify the appearance of a web component being added to the Document Object

What is the best way to utilize Link navigation in order to navigate away from a blocked route in the latest version of Next.js,

What is the best way to ensure that two objects collide with one another?

Receiving an Error 404 "not found" when making a Node.js POST Request using an Angular application

Having difficulty with a button in a Navbar using Python and Selenium

Retrieve all users using Auth0 with Angular 2

Typescript: Shifting an image to the left and then returning it to the right