I'm using a ngrx signal store with rxMethod:

export const MyStore = signalStore(
  { providedIn: 'root' },
  withState({ loading: false }),
  withMethods((state) => {
    const dataService = inject(DataService);

    return {
      loadMyData: rxMethod<void>(
        pipe(
          tap(() => patchState(state, { loading: true })),
          switchMap(() => dataService.loadDataFromApi()),
          catchError((error) => {
            console.error(error);
            return EMPTY;
          }),
          tap(() => patchState(state, { loading: false }))
        )
      ),
    };
  })
);

Now the used DataService throws or might fail:

@Injectable({
  providedIn: 'root',
})
export class DataService {
  loadDataFromApi() {
    return throwError(() => new Error('common data error'));
  }
}

I'm using MyStore.loadMyData() on a component

export class DetailsComponent {
  protected readonly store = inject(MyStore);
  readonly #trigger = signal<void>(undefined);

  constructor() {
    this.store.loadMyData(this.#trigger);
  }
}

After the first error occurred on loadMyData the rxMethod does not rerun again. Even if a new DetailsComponent instance if trying to access the in root provided store again.

I thought that the catchError on the store would have prevented this.

How can I make sure that my method is still functional even if an error occurs? How is error handling done properly in a rxMethod? Am I doing this the right way?

See StackBlitz example, where the error is only logged once to the console (no matter how often the details are opened/closed)

I'm using a ngrx signal store with rxMethod:

export const MyStore = signalStore(
  { providedIn: 'root' },
  withState({ loading: false }),
  withMethods((state) => {
    const dataService = inject(DataService);

    return {
      loadMyData: rxMethod<void>(
        pipe(
          tap(() => patchState(state, { loading: true })),
          switchMap(() => dataService.loadDataFromApi()),
          catchError((error) => {
            console.error(error);
            return EMPTY;
          }),
          tap(() => patchState(state, { loading: false }))
        )
      ),
    };
  })
);

Now the used DataService throws or might fail:

@Injectable({
  providedIn: 'root',
})
export class DataService {
  loadDataFromApi() {
    return throwError(() => new Error('common data error'));
  }
}

I'm using MyStore.loadMyData() on a component

export class DetailsComponent {
  protected readonly store = inject(MyStore);
  readonly #trigger = signal<void>(undefined);

  constructor() {
    this.store.loadMyData(this.#trigger);
  }
}

After the first error occurred on loadMyData the rxMethod does not rerun again. Even if a new DetailsComponent instance if trying to access the in root provided store again.

I thought that the catchError on the store would have prevented this.

How can I make sure that my method is still functional even if an error occurs? How is error handling done properly in a rxMethod? Am I doing this the right way?

See StackBlitz example, where the error is only logged once to the console (no matter how often the details are opened/closed)

• angular
• rxjs
• ngrx-signal-store

Share Improve this question Follow asked Mar 11 at 13:00 kerosenekerosene 9011616 silver badges3737 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Handling the error using catchError and of inside the switchMap seems to not interrupt the stream from receiving changes.

export const MyStore = signalStore(
  { providedIn: 'root' },
  withState({ loading: false }),
  withMethods((state) => {
    const dataService = inject(DataService);

    return {
      loadMyData: rxMethod<void>(
        pipe(
          tap(() => {
            console.log('running');
            patchState(state, { loading: true });
          }),
          switchMap(() =>
            dataService.loadDataFromApi().pipe(    // <- changed here!
              catchError((error) => {              // <- changed here!
                return of(error);                  // <- changed here!
              })                                   // <- changed here!
            )                                      // <- changed here!
          ),
          tap(() => patchState(state, { loading: false }))
        )
      ),
    };
  })
);

Stackblitz Demo