Handling Errors in RXJS Angular - Utilizing .subscribe and Observable Strategy

Question

Handling Errors in RXJS Angular - Utilizing .subscribe and Observable Strategy

For creating a new product using a backend API, the Angular frontend code needs to make a call to the API. I am interested in learning how to implement error handling with the use of .subscribe method. Currently, I am utilizing HTTPClient along with Observable and exploring the error handling capabilities provided by RXJS.

The application is expected to interact with the API as an Observable and subscribe to it.

The API at /create endpoint should handle both success and failure scenarios: - If the API returns 200, a success message should be displayed. - If the API returns 400, it should trigger an error.

Pseudo Code:


import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

ID = 'foo';
this.http.post('/api/create', {
    productName: this.form.value.productName,
    productValue: this.form.value.productValue,
}).subscribe(
    resp => this.onSubmitSuccess(resp), err => this.onSubmitFailure(err)
);

private onSubmitSuccess(resp) {
    console.log(resp);
    this.ID = resp.ID;
    this.submitSuccess = true;
    this.submitFailed = false;
}

private onSubmitFailure(resp) {
    console.log(resp);
    this.submitFailed = true;
    this.submitSuccess = false;
}

typescript error-handling rxjs httpclient rxjs-observables

Answer 1

Answer №1

In the past, the format used to look like this:

this.http.get(url).subscribe(
 data =>
 {
   //perform an action
 },
 error =>
 {
   //handle any errors
 }
);

However, in the most recent updates, this style has been marked as deprecated. Now, you must use:

this.http.get(url).subscribe(
 {
   next: (data) => 
   {
     //perform an action
   },
   error: (error) =>
   {
     //handle any errors
   }
 }
);

Answer 2

In the past, the format used to look like this:

this.http.get(url).subscribe(
 data =>
 {
   //perform an action
 },
 error =>
 {
   //handle any errors
 }
);

However, in the most recent updates, this style has been marked as deprecated. Now, you must use:

this.http.get(url).subscribe(
 {
   next: (data) => 
   {
     //perform an action
   },
   error: (error) =>
   {
     //handle any errors
   }
 }
);

Answer 3

Answer №2

Dealing with request errors. This resource is directly from the official Angular documentation

fetchConfig() {
  return this.http.get<Configuration>(this.configEndpoint)
    .pipe(
      catchError(this.handleErrors)
    );
}

private handleErrors(error: HttpErrorResponse) {
  if (error.error instanceof ErrorEvent) {
    // Handle client-side or network error appropriately.
    console.error('There was an error:', error.error.message);
  } else {
    // The backend delivered a failed response code.
    // Check the response body for possible causes of failure,
    console.error(
      `Backend responded with code ${error.status}, ` +
      `response body: ${error.error}`);
  }
  // Return an observable with a user-friendly error message
  return throwError(
    'Something went wrong; please try again later.');
};

Answer 4

Dealing with request errors. This resource is directly from the official Angular documentation

fetchConfig() {
  return this.http.get<Configuration>(this.configEndpoint)
    .pipe(
      catchError(this.handleErrors)
    );
}

private handleErrors(error: HttpErrorResponse) {
  if (error.error instanceof ErrorEvent) {
    // Handle client-side or network error appropriately.
    console.error('There was an error:', error.error.message);
  } else {
    // The backend delivered a failed response code.
    // Check the response body for possible causes of failure,
    console.error(
      `Backend responded with code ${error.status}, ` +
      `response body: ${error.error}`);
  }
  // Return an observable with a user-friendly error message
  return throwError(
    'Something went wrong; please try again later.');
};

Answer 5

Answer №3

If you find yourself unable to utilize the async pipe and are required to use subscribe, employing pipe operators is considered a best practice as it facilitates unsubscribing when the component is destroyed. It is advised to leverage the operators for implementing logic, reserving subscribe solely for indicating that the stream is being observed. A structured implementation might resemble the following:

  ID = 'foo';
  onDestroy = new Subject<boolean>();

  this.http.post('/api/create', {
      productName: this.form.value.productName,
      productValue: this.form.value.productValue,
  }).pipe(
    catchError(err => {
      onSubmitFailure(err);
      return of(err);
    }),
    takeUntil(this.onDestroy),
    tap(resp => onSubitSuccess(resp)),
  ).subscribe();

  onSubmitSuccess(resp) {
      console.log(resp);
      this.ID = resp.ID;
      this.submitSuccess = true;
      this.submitFailed = false;
  }

  onSubmitFailure(resp) {
      console.log(resp);
      this.submitFailed = true;
      this.submitSuccess = false;
  } 

  ngOnDestroy() {
      this.onDestroy$.next(true);
      this.onDestroy$.unsubscribe();
  }

Answer 6

If you find yourself unable to utilize the async pipe and are required to use subscribe, employing pipe operators is considered a best practice as it facilitates unsubscribing when the component is destroyed. It is advised to leverage the operators for implementing logic, reserving subscribe solely for indicating that the stream is being observed. A structured implementation might resemble the following:

  ID = 'foo';
  onDestroy = new Subject<boolean>();

  this.http.post('/api/create', {
      productName: this.form.value.productName,
      productValue: this.form.value.productValue,
  }).pipe(
    catchError(err => {
      onSubmitFailure(err);
      return of(err);
    }),
    takeUntil(this.onDestroy),
    tap(resp => onSubitSuccess(resp)),
  ).subscribe();

  onSubmitSuccess(resp) {
      console.log(resp);
      this.ID = resp.ID;
      this.submitSuccess = true;
      this.submitFailed = false;
  }

  onSubmitFailure(resp) {
      console.log(resp);
      this.submitFailed = true;
      this.submitSuccess = false;
  } 

  ngOnDestroy() {
      this.onDestroy$.next(true);
      this.onDestroy$.unsubscribe();
  }

Handling Errors in RXJS Angular - Utilizing .subscribe and Observable Strategy

Answer №1

Answer №2

Answer №3

Similar questions

Incorporating onPause and onResume functionalities into a YouTube video featured on a page built with Ionic 2

When running a callback function, the "this" of an Angular 2 component becomes undefined

What is the most effective method for dividing a string in TypeScript?

Angular Error Handler - Extracting component context information from errors

Using AngularJS to retrieve a string array from data stored in Angular Firestore by invoking a function

What is the process for transforming a multi-dimensional array containing strings into a multi-dimensional array containing numbers?

You cannot assign type void to type any

Merge a pair of observables to create a single combined output

Having trouble triggering a click event with React testing library?

What is the best way to bring in styles for a custom UI library in Angular 2?

Running into issues with TypeScript in conjunction with Redux-Form and React-Redux connect

Steps for utilizing a function from the parent component to initialize TinyMCE

Using the length of an array as an iterator within a nested ngFor loop in Angular 9

Using *ngFor to dynamically update the DOM when an array is modified via ngrx

Socket.io: The other client will only update when there is interaction happening

Efficient Typescript ambient modules using shorthand notation

What distinguishes between the methods of detecting falsy and truthy values?

Leverage rxjs/Typescript to transform an array nested within the data received from an external API

Challenges Faced with Implementing Active Reports in Angular 9

Is it normal that aws-eventbridge-lambda does not generate a Lambda function?