TypeError: Cannot read properties of undefined (reading 'config')

[mutewinter]

When inspecting a state machine that is defined in React via useMachine, I'm getting a crash of the inspector:

Looks like you've ended up in an invalid state. Refresh the page to retry.

The stack error and stack trace are:

_app-a1433d7431381a0c.js:647 TypeError: Cannot read properties of undefined (reading 'config')
    at 2471-4f879e2487bb6b05.js:1:16681
    at uU (framework-22003fc7e17fa3a0.js:9:84107)
    at o$ (framework-22003fc7e17fa3a0.js:9:113157)
    at framework-22003fc7e17fa3a0.js:9:111543
    at oU (framework-22003fc7e17fa3a0.js:9:111609)
    at oP (framework-22003fc7e17fa3a0.js:9:96238)
    at r8 (framework-22003fc7e17fa3a0.js:9:44812)
    at framework-22003fc7e17fa3a0.js:9:93602

Here's the minified code that is crashing:

    function ed(e) {
      var t;
      let {machine: s, state: r, isSelected: i} = e
        , l = er.S.machines.getDigraphConfigs.useMutation();
      (0,
      C.useEffect)( () => {
        l.mutate({
          // Crashes on this tRPC call because s isn't defined.
          definition: "createMachine(".concat(JSON.stringify(s.config), ")")
        })
      }
      , []);

I believe what's happening is a race condition. As I stepped through the XState Inspector window with breakpoints, I was able to get the inspector past this moment in the code without error. Then the inspect app rendered fine, until I reloaded the parent page.

I don't have a minimal reproduction right now, but I can stop this from happening immediately if I delay the initial events sent to the machine from the React component.

[davidkpiano]

Can you provide a CodeSandbox reproduction?

[ramblehead]

I am observing similar-looking error when experimenting with createSkyInspector() in node.js application:

Here is a minimal example:

import { createSkyInspector } from '@statelyai/inspect';
import { createActor, createMachine } from 'xstate';

const machine = createMachine({
  id: 'toggle',
  initial: 'Inactive',
  states: {
    Inactive: {
      on: { toggle: 'Active' },
    },
    Active: {
      on: { toggle: 'Inactive' },
    },
  },
});

const main = async (): Promise<void> => {
  const inspector = createSkyInspector({ autoStart: true });

  const actor = createActor(machine, {
    inspect: inspector.inspect,
  }).start();

  actor.subscribe((state) => {
    console.log(state.value);
  });

  const intervalId = setInterval(() => {
    actor.send({ type: 'toggle' });
  }, 1000);

  process.on('SIGINT', () => {
    clearInterval(intervalId);
    actor.stop();

    // inspector hangs here even if calling inspector.stop() explicitly, so
    process.exit();
  });
};

main().catch((cause) => {
  console.dir(cause, { depth: null });
  console.log(JSON.stringify(cause));
});

Closing and re-opening inspector window (e.g. https://stately.ai/registry/inspect/c5734cae-26ca-40fb-86e8-84ac333089ff) multiple times eventually gets into Subj. error. After that all following attempts to open the same inspector window URL fails with the same error.