Generic Error Handling Angular 14 - throwError deprecated

Question

So in an earlier version of Angular I had a generic CRUD service and this worked fine:

 deleteById<T>(id: any, apiMethod: string): Observable<T> {

    let callPoint = this.endpoint.concat('/', apiMethod, '/', id);

    return this.httpClient.delete<T>(callPoint, this.httpHeader)
      .pipe(
        retry(1),
        catchError(this.processError)
      )
  }

  processError(err: { error: { message: string; }; status: any; message: any; }) {
    let message = '';
    if (err.error instanceof ErrorEvent) {
      message = err.error.message;
    } else {
      message = `Error Code: ${err.status}\nMessage: ${err.message}`;
    }
    console.log(message);
    return throwError(message);
  }

I now recieve a warning against the return throwError(message); line of processError stating that throwError is deprecated.

If I change this line to:

return new Error(message);

I then get errors against my catchError call in my deleteById method. The catchError now does not like that I am passing this.processError.

I've been scouring the internet, but cannot find any good examples of how I might be able to change this.

Any ideas greatly appreciated.

Hi, take a look on this https://stackoverflow.com/a/68656760/3528396 — leonmain, Apr 01 '23 at 11:36
Does this answer your question? [throwError(error) is now deprecated, but there is no new Error(HttpErrorResponse)](https://stackoverflow.com/questions/68655492/throwerrorerror-is-now-deprecated-but-there-is-no-new-errorhttperrorresponse) — Yong Shun, Apr 01 '23 at 11:38
Thank you for these suggestions, however they use `throwError` which is the problem I'm trying to fix — bilpor, Apr 01 '23 at 12:53

Diego Bascans · Accepted Answer · 2023-04-01T14:17:26.687

1

Accordingly with the RxJs documentation the throwError function uses a function as a parameter.

https://rxjs.dev/api/index/function/throwError

So what you should do is the following.

processError(err: any) { 
  let message = '';
  if (err.error instanceof ErrorEvent) {
    message = err.error.message;
  } else {
    message = `Error Code: ${err.status}\nMessage: ${err.message}`;
  }
  console.log(message);
  return throwError(() => new Error(message)); // use throwError from the rxjs package
}

Hope it helps you!

edited Apr 01 '23 at 14:17

answered Apr 01 '23 at 13:28

Diego Bascans

1,083
1
6
14

Yes, this is interesting. If I just change the retrun line as per your example. The error disappears, what I dont understand is why am I not getting `throwError` deprecated any more, since I am still using it on this line. However, I will look to moving this to an interceptor, which is where it should really be, but at least this get's me past my initial problem. Thank you. – bilpor Apr 01 '23 at 14:11
If you see the RxJs documentation the method that pases the error is deprecated, but the one that you send a function as a parameter is not. Probably is some background of why that was deprecated and they change for this method, but I dont really have that answer. Adding RxJs Doc link in the answer – Diego Bascans Apr 01 '23 at 14:16

score 1 · Answer 2 · answered Apr 01 '23 at 13:44

I would suggest creating an ErrorInterceptor service to implement the generic error handling in your project.

Please refer below code:

/* all required imports go here */
export class ErrorInterceptor implements HttpInterceptor {
    intercept(
        request: HttpRequest<any>,
        next: HttpHandler
    ): Observable<HttpEvent<any>> {
        return next.handle(request)
            .pipe(
                retry(1),
                catchError((error: HttpErrorResponse) => {
                    let errorMessage = '';
                    if (error.error instanceof ErrorEvent) {
                        // client-side error
                        errorMessage = `Error: ${error.error.message}`;
                    } else {
                        // server-side error
                        errorMessage = `Error Status: ${error.status}\nMessage: ${error.message}`;
                    }
                   console.log(errorMessage);
                   return throwError(() => {
                        return errorMessage;
                   });
                })
            )
    }
}

Next, you could import it in your app.module.js and use it to handle any kind of errors in your project.

Generic Error Handling Angular 14 - throwError deprecated

2 Answers2