Merge pull request #1722 from davidkpiano/davidkpiano/1718

.changeset/purple-papayas-begin.md

@@ -0,0 +1,5 @@
+---
+'@xstate/inspect': minor
+---
+
+The `@xstate/inspect` tool now uses [`fast-safe-stringify`](https://www.npmjs.com/package/fast-safe-stringify) for internal JSON stringification of machines, states, and events when regular `JSON.stringify()` fails (e.g., due to circular structures).

packages/xstate-inspect/test/inspect.test.ts

@@ -2,7 +2,7 @@ import { createMachine, interpret } from 'xstate';
 import { createDevTools, inspect } from '../src';
 
 describe('@xstate/inspect', () => {
-  it('should handle circular structures', (done) => {
+  it('should handle circular structures in context', (done) => {
     const circularStructure = {
       get cycle() {
         return circularStructure;
@@ -38,4 +38,43 @@ describe('@xstate/inspect', () => {
     // and will throw an error if circular structures are not handled.
     expect(() => devTools.register(service)).not.toThrow();
   });
+
+  it('should handle circular structures in events', (done) => {
+    const circularStructure = {
+      get cycle() {
+        return circularStructure;
+      }
+    };
+
+    const machine = createMachine({
+      initial: 'active',
+      states: {
+        active: {}
+      }
+    });
+
+    const devTools = createDevTools();
+
+    devTools.onRegister((inspectedService) => {
+      inspectedService.onTransition((state) => {
+        if (state.event.type === 'CIRCULAR') {
+          done();
+        }
+      });
+    });
+
+    inspect({
+      iframe: false,
+      devTools
+    });
+
+    const service = interpret(machine).start();
+
+    service.send({
+      type: 'CIRCULAR',
+      value: circularStructure
+    });
+
+    expect(() => devTools.register(service)).not.toThrow();
+  });
 });