CODEWITHSUNDEEP
angularangular-http-interceptors
noamyg
noamyg

Reputation: 3104

Intercepting 404 errors when trying to fetch a resource

My website is in Angular 8, and I have a 3rd-party session management which provides the client an OTP with a 1 hour session length. When a user exceeds his timeout, he encounters the 2 following errors:

  1. When he sends an HTTP request through the code of my site to fetch data from the server, he receives a response with body which is pretty easy to intercept (picture taken from network tab in Chrome):

enter image description here

  1. Prior to that manageable HTTP request, he would probably request a resource (an icon, for example), which I cannot seem to intercept, and it will fail with a 404 error (picture taken from Console tab in Chrome:

enter image description here

My goal is to force a page refresh when one of the scenarios occur, But I'm successful only catching the first one. The interceptor code is running only for HTTP requests initiated by my code and not automatic requests sent by the browser.

Here's the code of the interceptor:

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { Injectable } from '@angular/core';
import { AppService } from '../app.service';
import { environment } from '../../environments/environment';
import { tap } from 'rxjs/operators';

@Injectable()
export class HostInterceptor implements HttpInterceptor {
  constructor(private appService: AppService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next
      .handle(
        request.clone({
            //Some irrelevant code here
      }))
      .pipe(
        tap(evt => {
          //This piece of code refreshes the page when a request being sent to the server and gets a response body that implies that the user is not authenticated
          if (evt instanceof HttpResponse && evt.body && evt.body.Description == 'Not Authenticated'){
            location.reload();
          }
        }),
        // THIS DOESN'T WORK FOR FAILURES GETTING RESOURCES:::
        // catchError(error => {
        //   console.log(error);
        //   if (error instanceof HttpErrorResponse && error.status == 404) {
        //       location.reload();
        //   }
        //   return of(error);
        // })
      )
  }
}

Refreshing the page is very helpful here because then that 3rd party authentication mechanism takes charge and refers him to the login page.

Thank you!

Upvotes: 1

Views: 2452

Answers (1)

wessam yaacob
wessam yaacob

Reputation: 937

you can create a custom img element and inside it you can intercept the resource image url and use HttpClient to fetch your image so at this point you can use your http interceptor to intercept the request and the response 

import { Component, OnChanges, Input } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

import {
  DomSanitizer,
} from '@angular/platform-browser';

@Component({
  selector: 'custom-image',
  template: `
    <img [src]="actualURL | async"/>
  `})
export class CustomImageComponent implements OnChanges {

  @Input() public src: string;
  private urlSrcSubject = new BehaviorSubject(this.src);
  actualURL: Observable<SafeUrl> = this.urlSrcSubject.pipe(
    switchMap(url => this.getImage(url).pipe(
      map(blob => this.sanitization.bypassSecurityTrustUrl(URL.createObjectURL(blob)))
    )));

  constructor(private httpClient: HttpClient, private sanitization: DomSanitizer) {
  }

  ngOnChanges(): void {
    this.urlSrcSubject.next(this.src);
  }

  private getImage(url: string): Observable<any> {
    return this.httpClient
      .get<Blob>(url, { responseType: 'blob' as 'json' })
  }

}

Example:

<custom-image src="...">

Demo

Upvotes: 1

Related Questions