Broken visualizer prevents me from fixing the code

[MichalBryxi]

Description

When I put following code into https://stately.ai/viz

import { createMachine } from "xstate";

const machine = createMachine(
  {
    id: "ballot",
    initial: "voting",
    states: {
      voting: {
        entry: [
          {
            target: ".zeroVotes",
            cond: "hasZeroVotes",
          },
          {
            target: ".votesFull",
            cond: "hasVotesFull",
          },
          {
            target: ".votesAvailable",
          },
        ],
        states: {
          zeroVotes: {},
          votesAvailable: {},
          votesFull: {},
        },
        on: {
          BACK: "back",
          SUBMIT: "confirmation",
          ADD_VOTE: {
            target: "voting",
            actions: ["addVote"],
          },
          REMOVE_VOTE: {
            target: "voting",
            actions: ["removeVote"],
          },
        },
      },
      confirmation: {
        on: {
          CANCEL: "voting",
          CONFIRM: "voted",
        },
      },
      back: {
        on: {
          CANCEL: "voting",
          CONFIRM: "exit",
        },
      },
      exit: {
        type: "final",
      },
      voted: {
        entry: ["persistVotes"],
        type: "final",
      },
    },
  },
  {
    actions: {
      persistVotes() {},
      addVote() {},
      removeVote() {},
    },
    guards: {
      anyOptionsLeft() {
        // TODO: this should be looking at the max number
        return true;
      },
      hasZeroVotes() {
        return false;
      },
      hasVotesFull() {
        return false;
      },
    },
  }
);

The page breaks with following error: Application error: a client-side exception has occurred (see the browser console for more information).

The problem is that even after full page reload I can't edit the code and I'm effectively in a dead-end, because I can't fix the problem that caused the issue.

Expected Result

The page should not completely blow up when having issue with rendering the visualiser. The editor and the visualizer should be two independent things. If one blows up, the other one can function normally.

Actual Result

Whole page blows up.

Reproduction

State machine that makes the page blow up is attached above.

Additional context

N/A

[tomByrer]

Not the same error, but I get ERROR Property assignment expected when adding an action{} section. No line numbers, no specific area where the error came from. More frustrating to use the viz than helpful.

There should be more tests with 'bad' machines to ensure better feedback.

[Andarist]

@MichalBryxi I've prepared a fix for this specific issue: https://github.com/statelyai/xstate-viz/pull/332

@tomByrer agreed, as part of this PR I've added a stub of the test suite for this sort of stuff. Could you create a PR with a sample failing input?