在 catchError RxJs 6 中调用全局 handleError function（从 RxJs 5 迁移）

Question

Recently I upgraded my Ionic 3 project to Ionic 4, with this upgrade a several other packages were updated as well (Angular 5 --> 8 and RxJs 5.5 --> 6.5). Most of the changes needed in code are going well but there is one change I cant resolve.

In one of my services I have a function which does an API fetch (GET). Any errors in the fetch ( http GET ) are handled in a global error function. In my old Ionic 3 / RxJs 5~ application this was done as follows:

public fetch(): Observable<T[]> {
    let _path: string = this.path; 
    const url = this.getUrl(_path);

    return this.http
        .get(url, this.options)
        .catch(this.handleError);
}

The handleError function is defined in another service:

protected handleError(error: any) {
    const errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';

    this.logger.error('API endpoint: ' + this.path, errMsg);
    this.showErrorToast(); // not async in Ionic 3

    return Observable.throw(errMsg);
}

In my Ionic 4 / RxJs 6 application I am trying to recreate this without success. I have read and changed the following:

• catch is deprecated and should be replaced with catchError
• Observable.throw is also deprecated and should be replaced by throwError

So my new implementation looks as follows:

public fetch(): Observable<T[]> {
    let _path: string = this.path; 
    const url = this.getUrl(_path);

    return this.http
        .get(url, this.options)
        .pipe(
          catchError(() => { // this line is returning a error
            this.handleError;
          }
        ));  
}

protected handleError(error: any) {
    const errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';

    this.logger.error('API endpoint: ' + this.path, errMsg);
    this.showErrorToast(); // now async in Ionic 4

    return throwError(errMsg); // Changed this 
}

However, the catchError(() => is returning the following error:

Argument of type '() => void' is not assignable to parameter of type '(err: any, caught: Observable<Object>) => ObservableInput<any>'.
  Type 'void' is not assignable to type 'ObservableInput<any>'

After trying several other things I am a bit clueless how this could be solved, any ideas or pointers?

UPDATE

After implementing a few of the proposed solutions I keep getting the same, but different error then the previous one:

 Type 'Observable<Object>' is not assignable to type 'Observable<T[]>'.
      The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?
        Type 'Object' is missing the following properties from type 'T[]': length, pop, push, concat, and 26 more

So after some investigation I came up with this (Using @theMayer proposed solution):

I Changed:

return this.http
    .get(url, this.options)
    .pipe(
      catchError(e => {
        this.handleError(e);
        return EMPTY;
      }
    ));

to:

return this.http
        .get<T[]>(url, this.options)
        .pipe(
          catchError(e => {
            this.handleError(e);
            return EMPTY;
          }
        ));

Above change removes the error but I am not sure this is the way to go? The fetch function will loop over multiple other services which define the API endpoints.

Answer 1

You're getting tripped up by a syntax change in RxJs 6. The error message looks confusing, but all it says is that your error handler must return an observable (as all pipeable operators must). It doesn't care what the observable is of , however.

So, a simple rewrite is in order (note that EMPTY may not be exactly what you need here, but it works in my code):

import { EMPTY } from 'rxjs';

public fetch(): Observable<T[]> {
    let _path: string = this.path; 
    const url = this.getUrl(_path);

    return this.http
        .get(url, this.options)
        .pipe(
          catchError(e => {        // need to capture the 'e' here...
            this.handleError(e);   // pass to your function
            return EMPTY;          // and return empty
          }
        ));  
}

protected handleError(error: any) {
    const errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';

    this.logger.error('API endpoint: ' + this.path, errMsg);
    this.showErrorToast(); // now async in Ionic 4
}

Remove this:

return throwError(errMsg); // Changed this

Answer 2

Maybe you need to use like this:

.pipe(catchError(this.handleError);

If you want a general soultion for error handling you can use the Angular built-in ErrorHandler. With this you can catch all the errors occurring runtime and you can show a toaster or whatever you want. If you use this approach then you dont need to implement the error catching login in all your services. This will be automatically triggered when something failed.

In your AppModule in providers import your custom error handler service:

providers: [{ provide: ErrorHandler, useClass: RuntimeErrorHandlerService }]

Custom error handling service:

@Injectable()
export class RuntimeErrorHandlerService implements ErrorHandler {
  constructor(private injector: Injector) {}

  handleError(error: any) {
    // Show your toaster or do whatever you want
    const toasterService = this.injector.get(ToasterService);
    toasterService.show(error);
  }
}

You can check if it is a http request error or a runtime error. Angular documentation: https://angular.io/api/core/ErrorHandler

Answer 3

I can see you only put function reference inside catchError(), catchError needs to return an observable. try this

catchError(e => { 
            return this.handleError(e);
          }