Determine to which observable in the list the error corresponds

const obs1$ = this.service.getAllItems();
const obs2$ = this.service.getItemById(1);

combineLatest([obs1$, obs2$])
   .subscribe(pair => {
      const items = pair[0];
      const item = pair[1];
      // perform actions
   }, err => {
       // determine which observable caused the error   
       if (err.status === 404) {
          // handle error for second observable
          this.utilsService.alert('Item with id 1 not found');
       }
       
       if (err.status === 500) {
          // handle error for first observable
       }
   });

In my backend responses, a 404 status is never sent for retrieving a list. Therefore, in this scenario, I can infer that the 404 error originated from the second observable. However, if there is a need for additional handling based on the source of the error within the error method, how can this be achieved? Thank you.

Answer №1

To handle errors from each observable individually, you can wrap them in catchError like this:

combineLatest([
obs1$.pipe(catchError(e => ...)), 
obs2$.pipe(catchError(e => ...)),
]).subscribe(...)

Alternatively, you can mark the errors and handle them in the subscribe. For example:

obs1$.pipe(catchError(e => throwError({originalError: e, source: 'whatever you want'}))), 

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

An error in typescript involving a "const" assertion and a string array

Currently, I am diving into the world of Typescript along with React. However, an error has emerged in my path that I can't seem to figure out. It's puzzling why this issue is occurring in the first place. Allow me to elaborate below. const color ...

Custom Map Typescript Interface

Here is the structure of my interface: export interface IMyMap { [index: string]: RefObject<HTMLElement>; } This interface was created following the guidelines in the documentation: Indexable Types I am trying to implement this interface in a Re ...

I'm currently utilizing lint in my Angular 2+ project. Is there a way to arrange the constructor parameters in alphabetical order

I am struggling to organize the constructor parameters in TypeScript while using TSLINT with Angular9. I am looking for a rule similar to member-ordering that can help me sort them effectively. constructor( // Sort these private readonly router: R ...

Refreshing the page causes TypeScript Redux to lose its state

custom/reducer/shoppingReducer.ts import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { ShoppingReducerInitialState } from "../../types/reducer-types"; import { ProductItem, ShippingDetails } from "../../types/typ ...

Attempting to deploy my Angular project on Heroku but encountering an error

While attempting to deploy my Angular project to Heroku, I followed all the necessary steps but encountered an error stating that the application failed to serve the page. As the application owner, it is advised to check the logs for more details. This can ...

What is the correct way to interpret a JSON file using TypeScript?

Encountering Error Error TS2732: Cannot locate module '../service-account.json'. It is suggested to use the '--resolveJsonModule' flag when importing a module with a '.json' extension. import serviceAccountPlay from '../ ...

What are the steps to creating a comprehensive bootstrap using Angular 2?

I recently stumbled upon an interesting article discussing the integration of Angular 2 components with Drupal as a backend service. If you're curious, you can read the full article here: In the article, Matt explains how to achieve this integration ...

Selecting the optimal data structure: weighing the benefits of using boolean check versus array .include (balancing performance and redundancy

My objects can have one or more properties assigned, with a total of 5 different properties in my case. To illustrate this, let's use a simple movie example where each movie can be assigned from 5 different genres. I have come up with two methods to ...

Exploring the not-found.tsx page within the framework of multiple root layout.jsx components in Next JS

Seeking some assistance here. I'm organizing the structure of my NextJS 14 app like this: app/ (admin)/ layout.tsx (web)/ layout.tsx page.tsx not-found.tsx Just a heads up, there's no layout.tsx page at the ...

Team members

Just started diving into Angular and practicing coding with it while following video tutorials. However, I've stumbled upon something in my code that has left me puzzled. I'm curious about the significance of the line "employees: Employee[]" in ...

Converting JSON Arrays into Typescript Arrays

I am working with a JSON file that contains an array object like this: [ { "VergiNo": "XXXXXXX" }, { "VergiNo": "YYYYYY" }, { "VergiNo": "ZZZZZZ" } ] After importing this JSON file into my Typescript file, import * as companies f ...

`The Art of Curved Arrows in sigjma.js, typescript, and npm`

I have encountered an issue while trying to draw curved arrows in sigma.js within my TypeScript npm project. The error occurs on the browser/client-side: Uncaught TypeError: Cannot read properties of undefined (reading 'process') at Sigma.pro ...

Eliminate duplicate dropdown options in Angular 2 using a filter function

Is there a way to filter reporting results in an Angular 2 dropdown list? I am currently attempting to do so within the *ngFor template but haven't had any success. I will also try using a custom pipe. The data is coming from a JSON array. Specificall ...

Uncover hidden mysteries within the object

I have a function that takes user input, but the argument type it receives is unknown. I need to make sure that... value is an object value contains a key named "a" function x(value: unknown){ if(value === null || typeof value !== 'obj ...

Developing a TypeScript library through modular class implementation

I have developed a Web API and now I want to streamline my code by creating a library that can be reused in any new project I create that interacts with this API. My goal is to organize my code efficiently, so I plan to have separate classes for each endp ...

Syncing data between local storage and a remote server using Ionic5 provider

I've been considering implementing a data provider that could store a duplicate of the backend data locally for quick access. I believe this concept is referred to as mirroring or something similar. Nevertheless, it must be synchronized and updated r ...

The JSON object cannot be assigned to the IntrinsicAttributes and customType data types

Currently, I'm facing a challenge with reading JSON data into an array of type pinImage. My goal is to loop/map through my pinImage objects and pass each one to a child component called PinCard, which is specifically designed to accept an object of ty ...

What could be the reason for the file element being undefined in the context menu?

I am currently working on rebuilding my context menu for the second time today. I am encountering an issue with an undefined value of my file element, which is preventing me from deleting, renaming, or performing any other actions. HTML <mat-list-item ...

What is the most effective way to transform values into different values using TypeScript?

If I have a list of country codes and I want to display the corresponding country names in my component, how can I achieve this using props? interface MyComponentProps { countryCode: 'en' | 'de' | 'fr'; } const MyComponent: ...

Routing with the default outlet in Angular

My current challenge involves the user module and setting up a default router outlet. The goal is to display the UserHomeComponent when the path is /user, but for some reason it's not functioning as expected. Interestingly, if I specify a path instead ...