🔎 XState Inspector feedback, issues, feature requests!

[davidkpiano]

Hey all, if you haven't seen, there is a new XState Inspector and home for future statechart tools here: statecharts.io

I am still writing docs for the inspector, but if you have gotten a chance to play around with it, please post any feedback here.

EDIT: documentation is here - https://xstate.js.org/docs/packages/xstate-inspect/

Thank you!

[geddski]

First off this thing is freaking awesome— I'm loving it already. Here are the snags I've run into.

Selecting certain of my machines causes the page to crash with this error:

[UberMouse]

Getting the same problem. Can be reproduced with this code sandbox https://codesandbox.io/s/vigorous-cookies-q3v2c. Selecting the todos machine causes that crash

[davidkpiano]

Thanks for the report. This should be fixed very soon - refresh in about 10 minutes!

[UberMouse]

Can confirm it's fixed now 🎉

[geddski]

fixed for me as well, woo!

[geddski]

I'm seeing duplicate transition lines when invoke is used. Given this config:

const guideMachine = Machine({
  id: "guide",
  initial: "idle",
  states: {
    idle: {
      on: { 
        say: "talking"
      }
    },
    talking: {
      invoke: {
        src: "say",
        onDone: {
          target: "idle"
        }
      }
    }
  }
});

The Inspector shows this:

The old visualizer only showed that arrow/transition once, which I assume is correct:

[davidkpiano]

You might have an old version of XState. Try upgrading to the newest one - it was a recently fixed bug.

[geddski]

yep that was it!

[tivac]

@davidkpiano is there a technical breakdown of how this is working somewhere? I haven't had a chance to dig into the code yet but would love the 10000 ft view if you have time or have written it up elsewhere.

[nathanhammond]

The JavaScript CSB template closes over the global service variable in a setInterval call. After modifications, the setInterval from previous reloads is still in scope.

1. Open the JS CSB template.
2. Paste, IGNORE: 'something' into the on for either of the states.
3. Highlight and delete it.

Outcome:
Event amplification.

Solution:
Remove the setInterval in the CSB. Just send a couple of toggles like the TS CSB.

[nathanhammond]

At least one 4.X syntax pattern doesn't work in the visualizer. This is a change I had to make:

- interpreter.send('EVENT', { payload })
+ interpreter.send({ type: 'EVENT', data: payload });

[tivac]

Just ran into this too, it's because of these lines inside @xstate/inspect

// monkey-patch service.send so that we know when an event was sent
// to a service *before* it is processed, since other events might occur
// while the sent one is being processed, which throws the order off
var originalSend = service.send.bind(service);
service.send = function inspectSend(event) {
    inspectService.send({
        type: 'service.event',
        event: JSON.stringify(utils_1.toSCXMLEvent(utils_1.toEventObject(event))),
        sessionId: service.sessionId
    });
    return originalSend(event);
};

The new inspectSend only accepts a single arg and anything else gets dropped :(

[nathanhammond]

I have not yet reduced this reproduction, but this machine functions differently with the inspector on and off:
https://codesandbox.io/s/crimson-snowflake-pikve?file=/src/index.js

Reproduction

1. Open the machine.
2. Press the "refresh" button in the CSB browser on the right hand side.
3. Note the final console log:

event.id: alert-view 
event.type: xstate.update 
window manager state: idle 
alert state: foreground 
custom-view state: background 
custom-view load state: resolve 
custom-view load promise state: resolve 

4. Uncomment the inspect lines at the top.
5. Press the "refresh" button in the CSB browser on the right hand side.
6. Compare the new final machine state:

event.id: undefined
event.type: xstate.update 
window manager state: idle 
alert state: background 
custom-view state: loading 
custom-view load state: timeout 
custom-view load promise state: resolve

At first glance this seems to happen because the entry actions for the timeout state do not appear to be executed when the inspector is configured.

[josmithua]

Hi David, love the new features! Haven’t tried it yet so I’m wondering, does this work with React Native as is? If not, support for it would be grand!

Cheers :)

[davidkpiano]

I haven't tried it with React Native yet, but if you're debugging locally and it opens a new window, it should work. Otherwise, I'd hold off for official WebSocket support.

[nomuppets]

@davidkpiano Any idea on when WebSocket support will be available? Or anything that does not rely on the window and postMessage approach?

[davidkpiano]

Currently focusing on the creator, a lot of work will carry over to the inspector as well. Hopefully soon.

[braposo]

I'm absolutely loving the new Inspector, amazing job! ❤️

Have you thought about having the path and the action that triggered a transition from the previous state highlighted in a different color?

I think it would really help understanding the flow of the system as you're interacting with it.

[davidkpiano]

Yeah, what color would be best? Solid white?

[jeremy-deutsch]

Do you think you’ll be open sourcing the new visualizer? I’d like to build it into a Flipper plugin, to use with React Native.

[davidkpiano]

Yes, I will soon.

[leggomuhgreggo]

@jeremy-deutsch I would gladly help beta test that plugin 🙏

[tivac]

Is there any possibility of publishing a version of this at a different URL that isn't minified? Getting weird errors when trying to attach it to my (admittedly quite large) machine, and would love to better be able to tell what the problem is.

[davidkpiano]

Yes - I'll write docs on how this works, but it's just using window.postMessage(...) to send "xstate.*" events. Any visualizer can read those events and visualize the machine in any way they want.

[tivac]

I'm binary-searching through our machine to figure out what is tripping up the visualization, so far it mostly seems to be actions that are the result of calling a function instead of a function itself, so errors in our machine config. Would be nice to be able to get better errors on this sort of situation though instead of just having to guess.

[tivac]

A change to the CSS layout or a button or something that enabled taking a full-page screenshot of the visualized machine would be cool, trying to share this w/ teammates but our machine is so tall that it would be very painful to manually stitch together. Since it's using JS + a CSS transform for scrolling the visualized machine none of the "scroll and take screenshots" tools I've tried recognize it as something that can be scrolled, so getting a full-height screenshot of our visualized machine would be a fully-manual process.

[serhiipalash]

@tivac and how do you solve the case when there is a form full of inputs, but in some scenarios one input should be hidden? Would you create two form components, one FormFull and second FormWithoutConnectInput, and attach them accordingly to state nodes?

i am interested in this topic (handling elements tree with XState) because I developed a Sketch app few years ago and its canvas state was similar to how you described xstate-componet-tree in README.

[tivac]

@serhiipalash you can either leave that as controller-specific logic if it's not critical to overall app state, or you can map it as a bunch of possible parallel states if you want. The statechart doesn't have to control every single component all the way down the hierarchy unless that makes sense for your use-case.

In practice we had the statechart make all of the large-scale decisions about which components to render and then those components were free to include other child components as necessary once we got to a level of UI granularity that didn't make sense for the statechart to care about.

[serhiipalash]

@tivac something like this?

[tivac]

@serhiipalash sure, there's no reason a state couldn't have multiple parallel child states that are either active or hidden based on conditions. Each of those could then have a component attached in the "active" version and the parent component would get an array of all the components to render.

[serhiipalash]

Ok, I got a general idea, but we will not bind as much out state to our view to have an actual tree in state, unless it's a canvas app. Thanks anyway @tivac ! I really appreciate your help.

Btw, as we are talking about deep nested parallel states, @davidkpiano how do you feel about Api like this?

state.find('emailinput').matches('visible')

[UberMouse]

Is it going to be possible to view all the machines/actors at once instead of having to switch between the view of a single machine? Seems like it would be difficult to layout properly but it would be really amazing :D

[davidkpiano]

Yeah, layout would be a nightmare. Also, machines should act independently; the interactions between machines are already shown in the Sequence panel. What would be your use-case for this?

[UberMouse]

The sequences panel shows the interactions that have happened, it would be useful to also see the interactions that can happen. Probably a bit difficult to collect the information for. I'm imagining something that inspects for send(event, { to: childMachine }) and sendParent actions to connect the machines together visually.

[avaragado]

This looks great. It’s going to help tremendously, not just in development but in helping to sell statecharts internally.

A couple of immediate comments:

• My old eyes find dark mode a struggle. Is there a light mode?

• Assuming this is the case, it would be worth emphasising in the documentation that no event traffic crosses the network - it’s all local. As some machines might process sensitive data, It’s a legitimate concern.

Thanks!

[davidkpiano]

Assuming this is the case, it would be worth emphasising in the documentation that no event traffic crosses the network - it’s all local. As some machines might process sensitive data, It’s a legitimate concern.

Yes, this is the case - statecharts.io/inspect never sends any data anywhere else.

I'll write docs for inspecting visually offline (locally), still working on this part.

[mikaelkaron]

Was there any progress on how to do this offline (locally)?

[davidkpiano]

Was there any progress on how to do this offline (locally)?

Not yet, I am only human (and the only one working on this so far)

[mikaelkaron]

Alright, understood (and appreciated - supporting open source is hard and takes time). If this is the correct way to go about it maybe I can take a stab at writing some docs?

[expelledboy]

I want dark mode, but its very difficult to read.

[garrettlancaster]

Hey David - good job on the release! It looks like the docs have a typo: it says service = inspect(...) instead of service = interpret(...).

I also noticed there seems to be some interference with data passed in the events when devTools are turned on. I have

$board.on('click', '.js-job-show-trigger', (e) => {
    if ( e.shiftKey || e.ctrlKey || e.metaKey ) {
      return
    }

    e.preventDefault()
    service.send('user.open_card', {
      href: e.currentTarget.href || e.currentTarget.dataset.href, 
      title: e.currentTarget.innerText
    })
  })

which works as expected without devTools, and doesn't pass href or title with devTools.

[tivac]

The service.send() issue is this:

#1430 (comment)

[garrettlancaster]

ah thanks @tivac

[tomenden]

Hi @davidkpiano ,
Is the code available somewhere? I couldn't find it in the xstate repo.
I'd like to see if I can adjust it to run inside a web-worker or remotely, similar to what remote-redux-devtools does.

[davidkpiano]

Working on it - look at the viz branch.

[serhiipalash]

Hi @davidkpiano ! Can you please help me to find the last code of old visualiser? The old one already looks really nice and very like our admin app. It would be great if we can visualise, but not inspect, some statecharts with its code in our admin. I know that some functionalities, that you already added into new viz, are missing in the old one, but we have small states to visualise.

There is https://github.com/statecharts/xstate-viz, but it seems to be a little bit behind what is on https://xstate.js.org/viz/.

[davidkpiano]

Interesting, they should be the same.... maybe it's on a branch somewhere?

In any case, it's not too much effort to create your own visualizer from scratch. Here's a starting point: https://codesandbox.io/s/relaxed-wave-bs9oz

[serhiipalash]

I'll try to figure out, will write you if I find, and thanks for the link!

[serhiipalash]

Hi @davidkpiano ! I've finally found some free time and extracted rendering statechart in old visualiser into a separate React component. It might be useful in some cases.

https://www.npmjs.com/package/statechart-viz

Thank you for your original work and for open-sorcing it!

[a-y-u-s-h]

Found a bug with representation of hierarchical state machines. Little arrow of Initial state gets misplaced.

[SimeonC]

I found a little CSS workaround for this - you can use a browser plugin to inject this code which prevents this.

[data-xviz=inspector] {
  // this is my fix for "scrolling" in very "tall" visualisers (might be safari only issue)
  height: 8000px;
}
[data-xviz=machine-group] {
  // this fixes the arrows scrolling around the page
  transform: scale(1) !important;
}

[cybervaldez]

Can we make it so when you hover a node or line they get highlighted? Either by setting it to yellow or set the opacity of the other lines down? A lot of the machines I made have lines intersecting and I think a simple hover to highlight would fix this.

[tomByrer]

Maybe thicker with a slight tint when hovered is a better idea?

I think we're making complicated machines now B)

[djake]

Hello - I'm embarking on my first use of xstate. I'm really excited to use the inspector to demo progress and complexity to non-technical audiences.

When I invoke service.send(/* ... */) in code, the events don't appear in the events tab in the inspector. The typescript example in the @xstate/inspect docs, for instance, `service.send({type: 'TOGGLE'}) twice, but do not list the events in the events tab: https://codesandbox.io/s/xstate-ts-viz-template-qzdvv. (I've used this on another machine which isn't just toggling, the state machine is updated to the correct state, you just don't see the events themselves listed.)

[davidkpiano]

The events tab shows events from the time the inspector was initialized in the other window, which may be after the events were sent. The dev tools in the client does not keep a record of events sent currently.

[drbr]

Hey David, the inspector is great! I was initially looking for a way to run the XState Visualizer locally, directly importing the state machine from my local repo without having to paste all the code into the visualizer site. Eventually, I found the inspector and managed to wire it up in my React app similarly to your Storybook example above.

In case anyone else finds this while searching for how to do what I did, here's my React component to launch the inspector on a standalone state machine.

I may have found a small CSS bug: The right sidebar panel that shows the state doesn't scroll vertically, so when my state object gets large, it overflows off the bottom of the screen and I can't see it all without collapsing nodes.

[danrocha]

I've been using XState for some months now and only today I found out about this. Loving it, thank you so much for the hard work put into this!

In Vue, sometimes I create services which I can import and reuse in other components:

export const toggleMachineService = interpret(toggleMachine).start();
export const useToggleMachine = () => {
  return useService(toggleMachineService);
};

However, when trying to add {devTools: true} to this, the inspector opens but does not connect to the machine.

export const toggleMachineService = interpret(toggleMachine, {devTools: true}).start();

Is this a bug or am I missing something?

CSB: https://codesandbox.io/s/brave-sammet-dw009?file=/src/App.vue:718-810

Thanks once again!!

[davidkpiano]

This one is subtle, but the rule is that inspect(...) must be called before any service is started. So if you change your code to this:

export const toggleMachineService = interpret(toggleMachine, {
  devTools: true,
-}).start();
+});

export const useToggleMachine = () => {
- return useService(toggleMachineService);
+ return useService(toggleMachineService.start());
};

Then it will work.

[danrocha]

I was fearing this would be the case.

Because I want to use the service in other files that are not necessarily Vue files, I run into the issue that I cannot use useToggleMachine but have to rely on toggleMachineService for that, and it needs to be initialized by then.

I guess this is a limitation of using composition functions on Vue 2 with the composition-api plugin.

[davidkpiano]

As long as the inspector is started before those files are imported, it will work the same too.

[SteamWind]

By doing your changes @davidkpiano , I managed to see something in the Statesharts inspector, but any send I do triggers an error (in the application and in the inspector):

Here a send from the inspector (by clicking on an event)

Uncaught TypeError: Object(...) is not a function
    at Interpreter.inspectSend [as send] (browser.js?cbbd:115)
    at actions (inspectMachine.js?2185:38)
    at Interpreter.exec (interpreter.js?2cb2:762)
    at Interpreter.execute (interpreter.js?2cb2:199)
    at Interpreter.update (interpreter.js?2cb2:225) [...]

Here a send just after starting the service:

TypeError: Object(...) is not a function
    at inspectSend (browser.js?cbbd:115)
    at useAaaStateMachine (useAaaStateMachine.js?ff66:45) // the send was launched here
    at setup (TheWorkspace.vue?29f9:472)
    at mergedSetupFn (vue-composition-api.esm.js?a6f4:1892)
    at eval (vue-composition-api.esm.js?a6f4:1671)
    at activateCurrentInstance (vue-composition-api.esm.js?a6f4:1598)
    at initSetup (vue-composition-api.esm.js?a6f4:1669) [...]

Edit: I found out it happen with the 0.6.3 version of the inspector, you can see here that it works with version 0.6.2.
And then when you go to the next version 0.6.3, it doesn't work no more.

[a-y-u-s-h]

Suggestion: Currently Xstate Inspector sends event payload as JSON string through websockets which is much slower in comparison to sending data as compressed binary buffer by compressing the JSON object (through npm package: notepack) . Also sending event payload as JSON string makes the inspector fall into edge cases when the payload cannot be stringified (like maybe DOM node references necessary to run some functions in some actions), all of which shouldn't matter if Xstate server and client pack and unpack the JS object as binary buffer before sending it through sockets. It'll allow most machines to run nice and fast. That said, perfect would be the case that inspector works offline and with multiple machines (which is going to happen I guess) but this might be a temporary fix.

[joshferrell]

Suggestion: the width of boxes can get really squished some times. Would be great if the machine width wasn't locked to a fixed width. I do prefer the single column layout that this does versus the visualization on the .com website.

However, nesting parallel states can get very slim.

[yasseur1007]

Hi @davidkpiano !

• Is https://statecharts.io/inspect opensource, so that we can deploy it ourselves and make xstate/inspect point to our custom standalone deployed one?
• I think you have a bug right now when inspecting a machine that is already in a "done" state: it hangs in "Waiting for connection..."
  And unfortunately as i don't know where is your source code i wasn't able to debug further :)

[davidkpiano]

Is statecharts.io/inspect opensource

Sort of... the visualization code is mostly in the viz branch, but @xstate/inspect is completely open-source. Everything is done via message passing, and you can implement your own inspector using the "protocol" described here: https://xstate.js.org/docs/packages/xstate-inspect/#implementing

Here is a small example for how to create your own visualizations, which I highly encourage: https://codesandbox.io/s/relaxed-wave-bs9oz?file=/src/index.js

It's less than 100 lines of JS and less than 100 lines of CSS to implement.

[yasseur1007]

thanks @davidkpiano !
And what about the bug when inspecting a statemachine that is already in a final state?

[JayNaire]

EDIT: Please ignore this post. It is perfectly possible to edit 2 machines simultaneously, but I had non-Xstate issues (Kernel panics) which sometimes rendered WebSockets inoperable.

Is it possible to inspect 2 unrelated machines simultaneously?

I have an angularjs app.
It runs 2 unrelated xstate machines (realised in files a.ts and b.ts) on the server
It can inspect either machine (but not both) with inspect.

import { inspect} from "@xstate/inspect/lib/server.js";
inspect({server: new WebSocket.Server({ port: 8888  })  });

It serves up a page containing an iframe
<iframe src="inspect.html?server=localhost:8888" data-xstate></iframe>
where inspect.html is a locally saved statecharts.io/inspect and server=localhost:8888 is a guess that seems to work.

It controls/visualises the machines, one at a time, very successfully without having access to the internet.

Now I need 2 simultaneous inspectors, one for each machine. I've tried instantiating another inspector on a different port in the scope of the 2nd machine (b.ts) but this resulted in both inspectors showing that second machine but the session dropdown only has one entry.

I want to say:

// in a.ts 
inspect({machine: a, server: new WebSocket.Server({ port: 8888  })  })
// in b.ts
inspect({machine: b, server: new WebSocket.Server({ port: 9999  })  })

I've tried a lot of guessing and at one stage I did get the session selector to show both machines at the same time but I can't recreate that scenario for the life of me.

[K3TH3R]

It would be really nice if there was a way to tell the inspector to ignore certain actors for a machine. For example, I have a "Discussions" machine that has ~15 message actors that are generating a lot of noise in the inspector that I'm not currently interested in looking at.

[mikeraynham]

I've just started using XState and XState Inspector, and I've found an issue that appears to be a bug. If an event causes a transition and the destination state handles an event of the same name, a loop can occur. Here's an example that hopefully makes this more clear:
https://codesandbox.io/s/intermittent-looping-tuzp1

Sending the FETCH event will sometimes cause multiple FETCH events to occur in a loop. If I rename fetched.FETCH to something else (e.g. GET), the problem does not occur.

[domingguss]

i found that when you press reload button in the browser pane, you'd get rid of the multiple events. I think some listeners arent killed when it's automatic reloading

[awreccan]

Loving the xstate inspector! Would love to be able to collapse child states of a compound state!

[TimotejR]

Thank you for the inspector. It is nice. It would be helpful to visualize "in state" guards, though.

[robertpenner]

A way to clear machines from the inspector

There are various situations where we'd want to de-list machines from the inspector. For example, I have an app where logging in creates N components that contain useMachine(). But when I log out and back in, N more machines are created each time.

Discord discussion:
https://discord.com/channels/795785288994652170/809564609383890965/865722552328388648