How to notify component that signal store encountered error in service while saving data?

I'm using a signal store as folows. It works as supposed to, except for the error handling. The initial load works correctly and communicates the error to the consuming component. However, there might also arise an error during saving operation and I'm unclear how to deal with it properly. Today, I only resort t printing out a warning in the console but optimally, I'd like to bounce that over to the component as a part of the computed signal error.

export const ThingStore = signalStore(
withState<Thing>({ id: EMPTY_UUID, name: "", code: "" } as Thing),
withProps(() => ({ _thingSrv: inject(ThingService) })),
withProps((state) => ({
_thingRes: resource({
request: state.id,
loader: async () => return await state._thingSrv.load(state.id())
}),
})),
withComputed((state) => ({
error: computed(() => {
console.warn("error detected");
return state._thingRes.error();
}),
ready: computed(() => !state._thingRes.isLoading()),
})),
withMethods((state) => ({
init: (id: string) => patchState(state, { id }),
save: (data: Thing) => {
state._thingSrv
.update(data)
.then((result) => patchState(state, result))
.catch((error) => console.warn(error));
},
})),
withHooks({
onInit(store) { effect(() => patchState(store, store._thingRes.value())); }
})
);


In save(Thing) method, I'm consuming a service, which is protected by a try/catch and, in case an exception is thrown, it returns a rejected promise containing the details. So my conclusion is that up to the point of catching the failed request, hence, preventing the execution of then(), I'm good. But I can't figure out how to alter the computed property to also react to the catch being in effect.

public update(data: Thing): Promise<Thing> {
//this.error.set("exception poof");
return Promise.reject("exception poof");
}


Now I wish to configure the error handling so that my error field signals to the component that something went wrong. Previously, I added a signal to the service and set that signal to something descriptive when the saving operation fail. However, I feel that's not the best architecture and that the service should be service the data flows, while the store should be responsible for telling the component what dat ais there and which errors have arisen.

save: (data: Thing) => {
state._thingService
.update(data)
.then((result) => patchState(state, result))
.catch((error) => ???);
},


I'm not certain if I'm figuring correctly. Somehow, the error during the initial load is inside the resource signal, while the error during data persistance is in the service and not resourse in a direct sense. On the other hand, the service provides a promise so returning Promise.reject("boom) seems an appropriate approach.

Continue reading...