Property catch does not exist on type Observable

Question

I'm trying to add error handling interceptor with rxjs but i have a problem with compiling it becouse the "catch" blinking red

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
    console.log(req);
    return next.handle(req).catch(error => {
        if (error instanceof HttpErrorResponse) {
            this.messageService.error(`Błąd połączenia: ${error.message}`);
        }
        return observableThrowError(error);
    });
}

}

Answer 1

In newer rxjs versions you have to use the pipe operator and catch inside it. ref

Example:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
        return next
            .handle(req)
            .pipe(catchError( (error: HttpErrorResponse) => {
                 this.messageService.error(`Błąd połączenia:${error.message}`);
                 return throwError(error);
            }
        ))
    }