Official @xstate/react Console Logger function during Development/Debugging

[milanbgd011]

I know you can track machine in Vizualizer and Redux Dev tools, this fits perfectly for some scenarios.

BUT, I am used to console.log as the best way to debug stuff, so I created a simple hook that I use in my apps when developing machine and it does wonders for me. All is JSON.stringified, so that I do no need to "expand" anything, just scroll thru the log.:

useXstateDebugger.ts

// usage: useXstateDebugger({ machine: HERE-GOES-MACHINE-FROM-USEMACHINE, name: 'CUSTOM-NAME' })

export function useXstateDebugger({ name, machine }: { name: string; machine: any }): any {
  const [_, __, service] = machine || [];
  useEffect(() => {
    const subscription = service.subscribe((state) => {
      setTimeout(() => {
        console.log(`##### ${name} #########################################################################`);
        console.log(JSON.stringify(state.event, null, 2));
        console.log({
          ...state.context,
          rootRef: undefined, // remove circular reference before JSON.stringify
        });

        console.log({
          transitions: `${state.transitions?.[0]?.source?.id} >>> ${
            state.transitions?.[0]?.target?.map((xr) => xr?.id).join(',') || state.transitions?.[0]?.source?.id
          }`,
          nextStates: JSON.stringify(state.value),
        });
      }, 1); // adding 1ms to allow useActor and useMachine to fire inside console.log() in right sequence
    });

    return subscription.unsubscribe;
  }, []);
}

useXstateDebuggerActor.ts

// usage: useXstateDebuggerActor({ machine: HERE-GOES-REF-FROM-SPAWNED-MACHINE, name: 'CUSTOM-NAME' })

export function useXstateDebuggerActor({ name, machine }: { name: string; machine: any }): any {
  useEffect(() => {
    const subscription = machine.subscribe((state) => {
      console.log(`##### ${name} #########################################################################`);
      console.log(JSON.stringify(state.event, null, 2));
      console.log({
        ...state.context,
        rootRef: undefined, // remove circular reference before JSON.stringify
      });

      console.log({
        transitions: `${state.transitions?.[0]?.source?.id} >>> ${
          state.transitions?.[0]?.target?.map((xr) => xr?.id).join(',') || state.transitions?.[0]?.source?.id
        }`,
        nextStates: JSON.stringify(state.value),
      });
    });

    return subscription.unsubscribe;
  }, []);
}

Example output for simple event

What do you get from this?

1. all is console logged in sequence perfectly
2. each event is logged with all details (fire event)
3. entire context is shown, that was result of the event (updated context)
4. each transition is logged with all details (goto next state if needed)

Why?

Because when you are developing complex machines that goes thru a lot of invokes quickly, all other solutions are simply not enought to see the full picture. When I debug something, I get to the state which is good, then I open Console and clear out, then I "click button" or whatever, then scroll to the top of the console log and read step by step what is being performed, with what events and what was the context for each step. It logs perfectly events being fired by user input and by invoke functions. Debugging is flawless with this, you have exact transcript of everything in the console, just remember to "clear out" console before clicking a button or whatever, so that you can scroll to top and read entire log from the exact point where you cleared console from.

What I would like to see?

1. Official implementation of "console.log" hook being added to @xstate/react repo with better implementation if possible

[Andarist]

I think we are sort of in a need to create an XState browser extension - enabling console.logs could be a checkbox there. WDYT?

[milanbgd011]

I use Xstate on the backend as well, as soon as I realize I have more complex logic. Guess what enables me to move extreme fast in that env. The same function. It is even more usefull in that env. Xstate is considered frontend mostly, not many examples for the backend or info. But I am really satisfied that I can use xstate both on front and backend. I am getting really fast in typing machines now, it is mental.

So, I think official logger, standardized well would be great and it will not add much code. Maybe ability to configure output levels.

Addition to Extension seems good choice too.

Try to use the logger func in real situation, it makes big difference for me especially when going thru multiple invokes quickly generating complex context.

[davebneufeld]

@milanbgd011 , could you add a few more notes on how to get your example working?