Angular 7 ловить http ошибки наблюдаемых

Question

У меня проблемы с отловом ошибок моего наблюдаемого. Я использую угловые 7 и rxjs 6.3.3.

Context

Я пишу интернет-магазин, где храню корзину для покупок в своем локальном хранилище. Некоторые события (например, загрузка обзора корзины покупок) должны иметь самую последнюю версию корзины покупок. В этом случае я беру идентификатор корзины покупок в моем локальном хранилище и связываюсь с API, чтобы получить самую последнюю версию. После этого запроса я буду обновлять локальное хранилище. До сих пор это работает нормально. Иногда может случиться так, что корзина для покупок в моем локальном хранилище больше не существует в базе данных, и при обращении к API я получаю 404 не найден. Я пытаюсь добиться того, чтобы мой интернет-магазин поймал этот 404, а затем создал новую корзину для покупок.

Рамочный код

Поскольку мы используем инфраструктуру для нескольких клиентов, мы написали библиотеку с общими действиями. Библиотека установлена ​​на угловой веб-сайт.

Код для получения корзины покупок:

  getShoppingCart(userId: number, id: number): Observable<ShoppingCart> {
    return this.get(`api/users/${userId}/shoppingcarts/${id}`);
  }

Код для создания новой корзины:

  createShoppingCart(command: CreateShoppingCartCommand): Observable<ShoppingCart> {
    return this.post(`api/users/${command.userId}/shoppingcarts`, command);
  }

Код приложения

  // write to local storage
  get ActiveShoppingCart(): ShoppingCart {
    const value: string = localStorage.getItem('shoppingCart');
    if (!value) {
      return null;
    }
    const shoppingCart: ShoppingCart = JSON.parse(value);
    return shoppingCart;
  }

  // get from local storage
  set ActiveShoppingCart(shoppingCart: ShoppingCart) {
    localStorage.setItem('shoppingCart', JSON.stringify(shoppingCart));
    this.notifyObservers();
  }

  // this method will return the most up to date shopping cart
  getUpdatedShoppingCart(): Observable<ShoppingCart> {
    const activeShoppingCart: ShoppingCart = this.ActiveShoppingCart;

    if (activeShoppingCart) {
      // if the shopping cart is saved in the local storage, use this one
      // if I receive a 404 error, catch it, remove it from localstorage and execute this method again
      return this.libShoppingCartService.getShoppingCart(activeShoppingCart.userId, activeShoppingCart.id).pipe(
        catchError((_: any) => {
          this.ActiveShoppingCart = null;
          return this.getActiveShoppingCart();
        })
      );
    }

    // code to create a new shopping cart and save it to local storage, this works fine
  }

Выпуск

На самом деле catchError не перехватывает эту ошибку http 404. Я ищу способ, как я могу поймать это. Я бы скорее исправил это в своем приложении, а не в коде фреймворка, но если другого варианта нет, я рад это сделать.

Я не ищу, чтобы кто-то точно говорил мне, что делать, но если кто-то может дать мне некоторое представление о том, что не так в моем коде, это было бы здорово! :)

Дополнительная информация

В моей консоли я получаю следующие ошибки (что имеет смысл)

GET https://apiurl/api/users/28/shoppingcarts/87 404

ОШИБКА TypeError: Вы указали «undefined» там, где ожидался поток. Вы можете предоставить Observable, Promise, Array или Iterable. at subscribeTo (subscribeTo.js: 41) at subscribeToResult (subscribeToResult.js: 11) в CatchSubscriber.push ../ node_modules / rxjs / _esm5 / internal / operator / catchError.js.CatchSubscriber.error (catchError.js: 43) в XMLHttpRequest.onLoad (http.js: 1547) в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (zone.js: 421) в Object.onInvokeTask (core.js: 14182) в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (zone.js: 420) в Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.runTask (zone.js: 188) в ZoneTask.push ../ node_modules / zone.js / dist / zone.js.ZoneTask.invokeTask [as invoke] (zone.js: 496) в invokeTask (zone.js: 1540)