Stringifying events takes a long time (in actions addon)

[leoyli]

Describe the bug
Action addon took surprisingly long time to response (freeze the screen >4 sec).

To Reproduce
Steps to reproduce the behavior:

1. Given any dummy button component.
2. Hook onClick action with action addon function.
3. Wait >4 sec to get response, the UI is totally blocked and unresponsive

An example from official-storybook: http://localhost:9011/?path=/story/basics-link--no-cancel-w-onclick

Expected behavior
A instantaneous response <150ms.

Screenshots

A bit profiling here, I'm render my story into standalone iFrame mode. This profiling shows the complicated string operation happened down to the message channel:

Code snippets
If applicable, add code samples to help explain your problem.

System:

• OS: MacOS Mojave
• Device: MacBook Air 2013-mid
• Browser: Chrome 72
• Framework: React 16.8.1
• Version: v5.0.0-beta.2

Additional context
The component is a pure material-ui button. I thought my custom addons have some role on this but I still have faced this issue even I only have 1 story and no other addon at all...

[tmeasday]

Probably stringifying the event object? @ndelangen ?

[leoyli]

Maybe not relevant, but it seems that channel can not broadcast Symbol object? (will have to check on the case in node side for sure...)

[ndelangen]

Indeed, I noticed this as well. Something is not right in the serialization, it used to work really fast :(

[tmeasday]

I added a link to one of our stories in the description

[tmeasday]

This is really a bug in telejson maybe? In any case I will leave it to you @ndelangen.

[ndelangen]

I'm on it

[ndelangen]

Fixed

[shilman]

Hurrah!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.0-rc.6 containing PR #5751 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

[jack-sf]

This issue is still apparent to us, even after upgrading the storybook to 5.1.9 .

Only adding depth: 3 fixes the problem, but that's a workaround, not a solution. As I've seen in #2590 , events shouldn't be serialized at all?

That's how it looks like for us:

Without the depth: 3, printing the event takes ~3-7s on my MacBook Air.

Probably because event.view is Window and window has an infinite recursion to itself (window.self === window).

[tw15egan]

Just chiming in to say that I'm experiencing this on 5.1.9 as well

[shilman]

Thanks @tw15egan. This was fixed in 5.2.0-alpha.36. I'll patch the fix into 5.1.10.

[tw15egan]

Awesome! Thanks for the quick response 👍

[jack-sf]

Mhm, FYI we had just had updated to 5.1.10 and the issue still persists.

[shilman]

@ndelangen #7256 went out in 5.1.10 but the perf issue remains. Any chance you can take a look?

[leepowelldev]

Can confirm we'll still seeing a big performance hit

[el-dav]

Still seeing this issue in 5.2.3

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[jkeen]

Still seeing this issue in Storybook 5.3.17. Is changing the depth value still the only solution?

[shilman]

We want to address this in 6.3. If you want to contribute to Storybook, we'll prioritize PR review for any fixes here. And if you'd like any help getting started, please jump into the #support channel on our Discord: https://discord.gg/storybook