feat(devtools): create tracked event and tracked event group using proxy

[ahmedwelhakim]

Proposal: Add trackedEvent and trackedEventGroup

Motivation

While working with event-driven patterns in NgRx Signal Store, debugging and tracing dispatched events can become difficult as the application grows.
As withTrackedReducer doesn't detect all dispatched events, only used ones in reducer.

So this proposal introduces:

• trackedEvent to be used instead of event
• trackedEventGroup to be used instead of eventGroup

as lightweight wrappers around the existing event creators to track dispatched events using proxy without needing the withTrackedReducer.

---

Goals

• Preserve the exact same API as the original event creators
• Add transparent event dispatch tracking
• Keep typings fully compatible with existing NgRx Signal Store patterns
• Avoid runtime overhead unless events are actually dispatched

---

Proposed API

trackedEvent

export const loadBooks = trackedEvent('[Books] Load Books');

loadBooks();

Devtool action:

[Books] Load Books

---

trackedEventGroup

export const bookEvents = trackedEventGroup({
  source: 'Book Store',
  events: {
    loadBooks: type<void>(),
    bookSelected: type<{ bookId: string }>(),
  },
});

bookEvents.bookSelected({ bookId: '1' });

Devtool:

[Book Store] bookSelected

[rainerhahnekamp]

The issue here is that devtools focuses on the SignalStore instances, because that's where the state lives. If devtools listened for events and not watchState, we would have to enable them globally for all stores. At the moment, I don't know how to do that. It would require changes to signalStore itself.

I do get your point that unhandled events might not show up, though. We are currently working on a redesign of the devtools which would land in @ngrx/signals. Can we revisit your issue once that design is done?