End the pipeline execution in a chain of RxJS observables

Here is a scenario where a series of Observables are chained together. Is it possible to prevent the subsequent chain from executing if an error is thrown by 'parentObs1'?

import { throwError } from "rxjs";
import { mergeMap, catchError } from "rxjs/operators";

const parentObs1 = throwError("parentObs1");
const childObs2 = throwError("childObs2");
const grandChildObs3 = throwError("grandChildObs3");

parentObs1
  .pipe(
    mergeMap(() => childObs2),
    catchError((error) => throwError("Error in Obs1 CatchError block"))
  )
  // How can we avoid running this pipe if the previous one throws an error?
  .pipe(
    mergeMap(() => grandChildObs3),
    catchError((error) => throwError("Error in Obs2 CatchError block"))
  )
  .subscribe(
    () => {},
    (error: any) => {
      console.log(error); // It is expected to print 'Error in Obs1 CatchError block' but currently displays 'Error in Obs2 CatchError block'
    }
  );

Answer №1

The second catchError function catches the initial error and then throws a new error, ensuring that only the second error message appears in your subscription.

In my opinion, it may not be necessary to use the catchError operators at all:

parentObs1
  .pipe(
    mergeMap(() => childObs2),
    mergeMap(() => grandChildObs3),
  )
  .subscribe(
    () => {},
    (error: any) => {
      console.log(error);
    }
  );

This way, your errors will go straight to your subscription without the need for additional processing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Declaring and accessing class variables in Angular 4

I am facing an issue with the following TypeScript model: export class User { email: string; token: string; username: string; bio: string; image: string; constructor() {} } When I attempt to instantiate this model in another TypeScript file, ...

Error in Angular 8: The type of '[object Object]' is an object, whereas NgFor only supports binding to Iterables such as Arrays

I recently started using Angular 8 and I'm dealing with an issue while trying to fetch data from an http get request. I am attempting to iterate through the data using *ngFor but unfortunately encountering this error. Any suggestions on how to resolv ...

Retrieve unique values based on two or more criteria from an array in TypeScript

Presented here is an array. https://i.stack.imgur.com/zHXim.png The desired pattern is: https://i.stack.imgur.com/EGUiM.png I am interested in retrieving unique "CityRef" and "City". Subsequently, locating all items associated with them. ...

Having Trouble Adding Details to a New Cart for a User in Angular and MongoDB - What's Going On?

After working on an E-Commerce site for a while, I hit a roadblock. Despite taking a break and coming back with determination, I can't seem to resolve the issue at hand. The application features registration, login, product search, and a popup window ...

Dramatist - shutting down an angular pop-up dialog

I am currently utilizing the Playwright tool to carry out testing on an angular application. One particular scenario involves a modal that is displayed by default when a page is loaded. Despite my best efforts, I have been unable to successfully close this ...

Problem: Unable to locate the TypeScript declaration file

I am facing an issue with my TypeScript configuration. I have two files in /src/models/: User.ts and User.d.ts. In User.ts, I am building a class and trying to use an interface declaration for an object defined in User.d.ts. However, User.ts is unable to a ...

What could be causing the ERROR TypeError in an Angular form where "_co.service.formData" is undefined?

My attempt to create a form in Angular 7 has resulted in an error message: ERROR TypeError: "_co.service.formData is undefined" Here is the HTML code for the component: <form (sumbit)="signUp(form)" autocomplete="off" #form="ngForm"> <div clas ...

Encountering an ExpressionChangedAfterItHasBeenCheckedError in Angular 6 when selecting an option from a dropdown menu

How can we fix the error mentioned below through code changes? Situation An input dropdown UI is safeguarded against unintentional value changes by a modal. However, triggering an event (such as click or focus) on the dropdown leads to the ExpressionChan ...

Serverless-offline is unable to identify the GraphQL handler as a valid function

While attempting to transition my serverless nodejs graphql api to utilize typescript, I encountered an error in which serverless indicated that the graphql handler is not recognized as a function. The following error message was generated: Error: Server ...

### Setting Default String Values for Columns in TypeORM MigrationsDo you want to know how to

I'm working on setting the default value of a column to 'Canada/Eastern' and making it not nullable. This is the current setup for the column: queryRunner.addColumn('users', new TableColumn({ name: 'timezone_name', ...

Leveraging Javascript Modules within a Typescript Vue Application

The issue at hand I've encountered a problem while attempting to integrate https://github.com/moonwave99/fretboard.js into my Vue project. My initial approach involved importing the module into a component as shown below: <template> <div&g ...

What is the process for using infer to determine the return type of a void function?

I am trying to gain a better understanding of how to utilize the infer keyword in TypeScript. Is this an appropriate example demonstrating the correct usage of infer? I simply want to infer the return type of the function below: const [name, setName] = u ...

Angular with NX has encountered a project extension that has an invalid name

I am currently using Angular in conjunction with nx. Whenever I attempt to execute the command nx serve todos, I encounter the following error: Project extension with invalid name found The project I am working on is named: todos. To create the todos app ...

Issue with modal-embedded React text input not functioning properly

I have designed a custom modal that displays a child element function MyModal({ children, setShow, }: { children: JSX.Element; setShow: (data: boolean) => void; }) { return ( <div className="absolute top-0 w-full h-screen fle ...

Cluster multiple data types separately using the Google Maps JavaScript API v3

I am looking to implement MarkerClusterer with multiple markers of various types and cluster them separately based on their type. Specifically, I want to cluster markers of type X only with other markers of type X, and markers of type Y with other markers ...

How can I select just one element to be impacted by a click event when using map in TypeScript?

Currently, I'm facing an issue where I want to change the icon of a button when it's selected. The problem is that using map affects all buttons even if only one is selected. // ... const [clicked, setClicked] = useState(false); <Button sta ...

Discover the steps to include the property within the data model in Angular specifically meant for showcasing on the user interface list page

class UserIdentity { public uniqueID: string; public fullName: string; public bio: string; public service: string; public groupID: string; public userID: string; public secretKey: string; constructor(details?: any) { this.uniqueID = &a ...

How can I bind the ID property of a child component from a parent component in Angular 2 using @Input?

I have a unique requirement in my parent component where I need to generate a child component with a distinct ID, and then pass this ID into the child component. The purpose of passing the unique ID is for the child component to use it within its template. ...

Angular: accomplish cascading requests to achieve desired outcomes

While exploring Angular rxjs operators, I came across a scenario where I need to send requests to the server that depend on each other. Currently, I have a modal window open and during the ngOnInit lifecycle hook, multiple requests are being sent, some of ...

Post request in limbo

Looking for a way to delay post requests in Angular before they are sent? I've tried using pipe(delay(xxx)) and setTimeout, but haven't had any luck. Any suggestions on how to solve this issue? ...