how to throw observable error in angular http interceptor

Question

I tried to throw an observable error in the interceptor and then handles this error. but I can't. When success is false, I can also receive successful subscribe.

I tried to return a value again in next.handle(restReq). But I failed and did not subscribe to anything

restApi return like this

{
  "success": false,
  "data": {
    "name": "Bad Request",
    "message": "123",
    "code": 0,
    "status": 400,
    "type": "yii\\web\\BadRequestHttpException"
  }
}

auth.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/internal/Observable';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private sessionUrl = '/wechat/session';

  constructor(
    private http: HttpClient
  ) { }

  getSession(): Observable<any> {
    return this.http.post<any>(this.sessionUrl, {});
  }
}

auth.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '@core/services/auth.service';
import { interval } from 'rxjs/internal/observable/interval';
import { switchMap, take } from 'rxjs/operators';

@Component({
 selector: 'app-auth',
 templateUrl: './auth.component.html',
 styleUrls: ['./auth.component.scss']
})
export class AuthComponent implements OnInit {
  constructor(
    private authService: AuthService
  ) { }

  ngOnInit(): void {
    this.authService.getLoginQrcode()
      .subscribe(
        data => console.log(data),
        error => console.log(error);
  }
}

http-interceptor.ts

import { Injectable } from '@angular/core';
import {
  HttpErrorResponse,
  HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse
} from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable()
export class RestInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let baseUrl = environment.baseUrl + '/' + environment.version;
    let headers = req.headers;
    const restReq = req.clone({
      headers,
      withCredentials: true
    });

    return next.handle(restReq);
  }
}

which http status is returned by your server when success is false? — David
– David, Commented May 4, 2018 at 20:01

Max · Accepted Answer · 2020-04-29 16:45:03Z

17

Try doing this in your interceptor

return next.handle(request).map((event: HttpEvent<any>) => {
       if (event instanceof HttpResponse && event.body && !event.body.success) {
         throw new HttpErrorResponse({
                            error: 'your error',
                            headers: evt.headers,
                            status: 500,
                            statusText: 'Warning',
                            url: evt.url
                        });
       }
       return event;
    );

edited Apr 29, 2020 at 16:45

Max

933 silver badges7 bronze badges

answered Mar 21, 2019 at 17:51

Javier Solis Guzman

3182 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

max ivaneychyk · Accepted Answer · 2018-05-04 20:38:47Z

1

You can add catch, and handle error

//....
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/map';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
    constructor(private inj: Injector, private _router: Router) {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // Get the auth header from the service.
        const auth = this.inj.get(AuthService);
        const authToken = auth.getSessionData().accessToken || '';
        const duplicate = req.clone({headers: req.headers.set('Authorization', authToken)});
        return next.handle(duplicate).catch(this.handleError);
    }

    private handleError = (response: any) => {
// ....
        // Do messaging and error handling here
        return Observable.throw(response);
    }

answered May 4, 2018 at 20:38

max ivaneychyk

1583 bronze badges

1 Comment

Ian G Over a year ago

This is the one most similar to what worked for me on Angular 10. throwing an actual error didn't work - but I needed to throwError(new HttpErrorResponse(....

David · Accepted Answer · 2018-05-04 20:04:33Z

0

Try doing this in your interceptor

return next.handle(request).map((event: HttpEvent<any>) => {
  if (event instanceof HttpResponse && !event.body.success) {
    throw new Error(event.body.message);
  }
  return event;
  );

answered May 4, 2018 at 20:04

David

34.6k13 gold badges90 silver badges124 bronze badges

1 Comment

arshid dar Over a year ago

if i throw error like this it works fine but prints "ERROR {responseData: {…}, responseCode: 401}" on console. how can i avoid this?

Felix · Accepted Answer · 2023-11-02 19:18:29Z

0

I think that this is a better way to throw an error in the chain:

  intercept(req: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    if (req.url.match(/.*url/)) {
      return throwError(
        () =>
          new HttpErrorResponse({
            error: 'your error',
            status: 403
          })
      );
    }
}

This way the error is propagated through the error interceptor chain.

answered Nov 2, 2023 at 19:18

Felix

4,6353 gold badges51 silver badges73 bronze badges

Collectives™ on Stack Overflow

how to throw observable error in angular http interceptor

restApi return like this

auth.service.ts

auth.component.ts

http-interceptor.ts

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

restApi return like this

auth.service.ts

auth.component.ts

http-interceptor.ts

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related