Approaches to handling multiple errors that may occur when multiple displayed Angular components are subscribed to a state

Question

I have a principle issue where in my Angular application, I have three components where

• Component #1: Displays a list of items
• Component #2: Display a list of recently used items
• Component #3: Display a the current item.

Let's pretend they're all currently showing on the same page and this cannot be changed (I know). I'm currently using NGRX, where there exists a Store for these items and described by:

Store {
  error: null | string;
  isLoading: boolean;
  items: Item[];
  item: Item;
  recentItem: Item;
}

Imagine all three components launch a server call to retrieve their respective methods. I'm having an issue what is the best approach to handling errors.

Originally, I was thinking of each component listening on the Store.error changes but this wouldn't accurately represent the behaviour of the system if one server call fails and the other 2 are OK. This is because then all 3 components start displaying an error.

I was thinking of create another Store like "ErrorStore" for example to handle different errors like for example.

ErrorStore {
  itemsListErrors: boolean;
  itemErrors: boolean;
  recentItemError: boolean;
}

And have each component subscribe this Store to listen on a specific error but this could cause some issues where it may be difficult to scale up.

Answer 1

You can use a map error object instead of a string. For example:

interface Store {
  error: Record<string, boolean>;
  ...
}

And you can update this error on every error type, store the error as a key, and when an error is presented switch to true, and later on, you can clear the error with a false value.