search

SimeonC / storybook-xstate-addon

A storybook addon to assist with writing stories that rely on xstate
https://SimeonC.github.io/storybook-xstate-addon/
MIT License
54 stars 6 forks source link

Potential race condition between inspector iframe loading vs. component rendering #23

Closed fubhy closed 3 years ago

fubhy commented 3 years ago

Hey! Thanks for publishing this!

I am running into an issue causing an error in this code: https://github.com/davidkpiano/xstate/blob/94c6d8eb47acb010c64c69a272d38a81e2d2b337/packages/xstate-inspect/src/browser.ts#L105-L115 due to contentWindow returning null since the iframe is not yet loaded when the inspector is hooked up with the component I'm rendering.

This appears to be a race condition as it sometimes works when I keep refreshing but 9 out of 10 times it doesn't. It breaks on th is line: https://github.com/davidkpiano/xstate/blob/94c6d8eb47acb010c64c69a272d38a81e2d2b337/packages/xstate-inspect/src/browser.ts#L112

It works in my app but not in storybook which is why I assume this has something to do with the rendering order of the panels in the storybook addon.

I haven't had time to debug this further but that's my guess ...

SimeonC commented 3 years ago

Thanks for the bug report. I think that'll probably be due to src/preset/InspectorPanel.tsx Line 144.

I'm guessing that the iframe the inspector finds isn't the "current" iframe, or it's trying to send an event to an old inspector iframe. I haven't seen this error before so it's just a guess. I can try add some defensive type catch but probably the best option would be to integrate the dev tools manually and not in an iframe (2 iframes is one too many 😅). Which is a bit hard as they haven't been properly released in a while and the existing viz stuff I couldn't get to work.

fubhy commented 3 years ago

Thanks for the quick reply! I am not sure what's causing it exactly. I sadly can't share the source code for the repository where we are experiencing this but if you want I can jump on a video call and share it via screenshare. What's weird is that it actually renders the state machine in the iframe but it then fails whenever I trigger the first event.

fubhy commented 3 years ago

Nevermind. The bug was on our end. We have a couple of custom storybook addons and in one of those we were using updateGlobals without spreading in the original globals. Whoops! Sorry for the noise.

SimeonC commented 3 years ago

No worries, glad you figured it out and thanks for letting me know.