Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Stringifying events takes a long time (in actions addon)

See original GitHub issue

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

To Reproduce Steps to reproduce the behavior:

Given any dummy button component.
Hook onClick action with action addon function.
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 screen-shot

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:

profiling

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…

Issue Analytics

State:
Created 5 years ago
Reactions:3
Comments:19 (13 by maintainers)

Top GitHub Comments

2reactions

tw15egancommented, Jul 26, 2019

Awesome! Thanks for the quick response 👍

2reactions

jack-sfcommented, Jun 26, 2019

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).

Top Results From Across the Web

Events - interact.js

InteractEvent s are fired for different actions. The event types include: Draggable: dragstart , dragmove , draginertiastart , dragend; Resizable: resizestart ...

Actions Framework | Twilio

Learn how to add and customize actions, ask for user confirmation, or send a message after task completion with the Twilio Flex Actions...

AWS Lambda function handler in TypeScript

The AWS Lambda function handler is the method in your function code that processes events. When your function is invoked, Lambda runs the...

JavaScript Events - W3Schools

Here are some examples of HTML events: ... HTML allows event handler attributes, with JavaScript code, ... <button onclick="displayDate()">The time is?

JSON.stringify() - JavaScript - MDN Web Docs

Only string and number values are taken into account; symbol keys are ignored. As a function, it takes two parameters: the key and...