Inspector and parent window freeze when attempting to serialize an HTML element

[mutewinter]

Took me a while to track this one down and I believe it's related to:

statelyai/xstate#4645
statelyai/xstate#4985

I was able to patch @statelyai/inspect package at version 0.4.0 to fix this issue:

diff --git a/dist/index.js b/dist/index.js
index 844efec2f70099dd0a5bc807d191a9f54bef28c6..237e6ef3a9e0a832781e33e043b906b26c2aa839 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -111,6 +111,9 @@ function idleCallback(cb) {
 
 // src/createInspector.ts
 var import_safe_stable_stringify = __toESM(require("safe-stable-stringify"));
+var safe_stable_stringify = import_safe_stable_stringify.configure({
+  maximumDepth: 10
+})
 function getRoot(actorRef) {
   let marker = actorRef;
   do {
@@ -273,7 +276,7 @@ function convertXStateEvent(inspectionEvent) {
       return {
         type: "@xstate.snapshot",
         event: inspectionEvent.event,
-        snapshot: JSON.parse((0, import_safe_stable_stringify.default)(inspectionEvent.snapshot)),
+        snapshot: JSON.parse((0, safe_stable_stringify)(inspectionEvent.snapshot)),
         sessionId: inspectionEvent.actorRef.sessionId,
         _version: package_default.version,
         createdAt: Date.now().toString(),
@@ -323,7 +326,7 @@ function createBrowserInspector(options) {
     ...defaultInspectorOptions,
     url: "https://stately.ai/inspect",
     filter: () => true,
-    serialize: (inspectionEvent) => JSON.parse((0, import_fast_safe_stringify.default)(inspectionEvent)),
+    serialize: (inspectionEvent) => JSON.parse((0, import_fast_safe_stringify.default)(inspectionEvent, null, 2, { depthLimit: 10, edgesLimit: 10 })),
     autoStart: true,
     iframe: null,
     ...options,

I'm not sure if these max depth values are the best they could be, but this did resolve my issue.

[davidkpiano]

Please provide a CodeSandbox reproduction. You can use one of the templates here: https://github.com/statelyai/xstate?tab=readme-ov-file#templates