RXJS 6: new version of HttpInterceptor

Question

I am in the process of adding rxjs_compat to my project in order to move to v6 of libraries.

However the existing HttpInterceptor for global error handling no longer compiles. Not sure where to go with it. Tried all sorts. Getting type mismatches with everything tried.

import { Injectable } from "@angular/core";
import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
  HttpResponse,
  HttpErrorResponse
} from "@angular/common/http";
import { Observable, of, empty } from "rxjs";
import { ToastrService } from "ngx-toastr";
import { environment } from "../../environments/environment";
import { catchError, map } from "rxjs/operators";

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
  constructor(private toastr: ToastrService) {}
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      catchError(err => of(HttpErrorResponse)),
      map(err => {
        let message: string;
         this.toastr.error(`${message}`, "Application Error");
        return Observable.empty<HttpEvent<any>>();
      })
    );
  }
}

src/app/shared/http-error-interceptor.ts(26,27): error TS2339: Property 'empty' does not exist on type 'typeof Observable'.

empty is now a constant, but doesn't accept a type, so that does not work either. Also could not find much in the upgrade notes

EDIT

although interestingly this compiles:

return Observable.of<HttpEvent<any>>();

Does trying `return empty();` work? `empty` is now a constant (`EMPTY`), and function (`empty(scheduler?: SchedulerLike)`). — R. Richards, May 22 '18 at 19:44
Congrats for your gentleman-inspired avatar's name. Long live Jenson Button \o/ — statosdotcom, May 22 '18 at 19:44
@statosdotcom tried that but `intercept` it type safe `Observable>` — jenson-button-event, May 22 '18 at 19:48
maybe a dumb question, but why dont you throw error observable instead of returning typed empty one? — dee zg, May 22 '18 at 19:59
interesting. the rxjs-lint command just finished. this is what it did! `return observableOf>();` which is an alias for `of`. presumably that is implicitly empty? — jenson-button-event, May 22 '18 at 19:59
but i dont want to throw, just continue as the error has been handled with a toast. all the user needs to know. the actual code is a bit more verbose — jenson-button-event, May 22 '18 at 20:01
How did you make this work? `return of>();` does not compile for me: Type 'Observable>>' is not assignable to type 'Observable>'. The accepted answer also does not work because of type safety. — Arthur, May 30 '18 at 08:33
I also tried `throwError()`: Type 'Observable' is not assignable to type 'Observable>' — Arthur, May 30 '18 at 08:39

Yakov Fain · Accepted Answer · 2018-05-22T20:19:17.333

27

import {EMPTY} from 'rxjs';
Replace return Observable.empty() with

return EMPTY;

edited May 22 '18 at 20:19

answered May 22 '18 at 20:12

Yakov Fain

11,972
5
33
38

score 1 · Answer 2 · answered May 30 '18 at 10:46

1

Couldn't figure out how to return something that the compiler accepts, but was at least able to throw an error. The code compiles and works, but as a beginner in Rxjs not sure if it is correct.

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const xhr = req.clone({
      headers: req.headers.set('X-Requested-With', 'XMLHttpRequest')
    });
    return next.handle(xhr).pipe(
      catchError((err) => {
        if (err instanceof HttpErrorResponse) {
          if (err.status === 401) {
            this.router.navigate(['/login']);
          } else {
            this.snack.open('Communication error: ' + err.status + ' - ' + err.statusText, null,
             {duration: 5000, panelClass: 'snack-error', verticalPosition: 'top'});
          }
          return throwError('backend comm error');
        }
      })
    );
  }

answered May 30 '18 at 10:46

Arthur

1,478
3
22
40

presenting a detailed exception message to your end user is rarely a good choice – jenson-button-event Jun 05 '18 at 18:18
1

@Arthur if err is not an instanceof `HttpErrorResponse` you don't return anything inside of your `catchError` – Corey Cole Aug 15 '18 at 01:33
@CoreyCole true, at least logging the other error somewhere would be a good idea. – Arthur Aug 15 '18 at 07:09
I think you have to return something so that the observable chain can continue. It says [here](https://www.learnrxjs.io/operators/error_handling/catch.html) to always return an observable from the `catchError` function – Corey Cole Aug 23 '18 at 20:45

RXJS 6: new version of HttpInterceptor

2 Answers2

Linked