Storybook: 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 https://github.com/storybookjs/storybook/issues/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