Using the inspector with something else

[paper brook]

I'm using the Stately Inspector with my actors and enjoying it. However, I need to pass the inspectEvent to something else: another actor that logs the system's events

I need to extend this:

const rootActor = createActor(rootMachine, { inspect: createBrowserInspector().inspect }

into something like this:

const rootActor = createActor(rootMachine, { inspect: (inspectorEvent) => { loggingActor.send({ type: 'reportEvent', event: inspectorEvent ) // Somehow use createBrowserInspector().inspect here } }

Hopefully I just need easy bit of syntax I haven't been able to work out!

[toxic fog]

And you shall get an easy bit of syntax! It's Just JavaScript ™️

const inspector = createBrowserInspector();

const rootActor = createActor(rootMachine, {
  inspect: (inspectorEvent) => {
    loggingActor.send({ type: 'reportEvent', event: inspectorEvent })
    inspector.inspect.next(inspectorEvent)
  }
});

Might have to do .next?.(...) to make TS happy but that's it

[paper brook]

Thanks David. You've saved me a whole lot more trail and error 😅

[toxic fog]

That's what I'm here for!

[paper brook]

I needed to add an extra next: {} to the inspect object, but this appears to be working fine.

const sessionActor = createActor(sessionMachine, { inspect: { next: (inspectionEvent) => { inspector?.inspect?.next && inspector.inspect.next(inspectionEvent) }, }, })
The types of the provided and expected event object don't seem to match though:
Type 'InspectedSnapshotEvent' is not assignable to type 'InspectionEvent'.

[paper brook]

Sorry for more questions! The code example in XState's types.ts is using the actor (which is undefined) in the function, when it isn't defined. I am, even if it is driving me slightly crazy, trying to report all events back into this actor so this is actually what I need

So I'm thinking maybe I can add the callback for the inspect observer after the machine has been created.

This almost works:

sessionActor.system.inspect( toObserver((inspectionEvent) => { inspector?.inspect?.next && inspector.inspect.next(inspectionEvent) }), )

but I need to narrow it down somehow to the nextHandler, like I did in my last comment. Thanks for any more advice 🙂

( Link to types.ts in the screenshot: https://github.com/statelyai/xstate/blob/0e5bf8d1d3d1720b4d071a3c0229959abd9198f5/packages/core/src/types.ts#L1804 )

[toxic fog]

Can you share code (like in a StackBlitz)? Might be easier to debug