Storybook: Action logger not working

[k4lux]

Describe the bug
The action logger is not working

To Reproduce
Steps to reproduce the behavior:

1. Create a story with action
2. Click on the component
3. See error

Expected behavior
See action log

Code snippets

import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'

import Button from '.'

storiesOf('Atoms/Button', module).add('default', () => (
  <Button onClick={action('clicked')}>Default</Button>
))

System:

• OS: MacOS
• Device: Macbook Pro
• Browser: Chrome
• Framework: React
• Addons: addon-actions
• Version: 5.0.1

[shilman]

I'm not able to reproduce. Can you please provide an example?

[mech]

I am able to produce it using stock CRA + SB 5.0.1

▶ npx create-react-app storybook-latest
▶ cd storybook-latest/
▶ npx -p @storybook/cli sb init

When viewing the "Hello Button", click rapidly on it to see error. You have to open the console and click the action multiple times quickly. After this you can move to Button with emoji and it works and then move back to "Hello Button" and it works again.

This happen only the first time.

RangeError: Maximum call stack size exceeded
    at Object.toString (<anonymous>)
    at isArguments (vendors~main.b2bcbb4f8de247f2094b.bundle.js:33913)
    at keys (vendors~main.b2bcbb4f8de247f2094b.bundle.js:33976)
    at equal (vendors~main.b2bcbb4f8de247f2094b.bundle.js:38890)
    at equal (vendors~main.b2bcbb4f8de247f2094b.bundle.js:38901)
    at equal (vendors~main.b2bcbb4f8de247f2094b.bundle.js:38901)
    at equal (vendors~main.b2bcbb4f8de247f2094b.bundle.js:38901)
    at equal (vendors~main.b2bcbb4f8de247f2094b.bundle.js:38901)
    at equal (vendors~main.b2bcbb4f8de247f2094b.bundle.js:38901)
    at equal (vendors~main.b2bcbb4f8de247f2094b.bundle.js:38901)

Dependencies as follow:

"dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts": "2.1.8"
  },
"devDependencies": {
    "@storybook/react": "^5.0.1",
    "@storybook/addon-actions": "^5.0.1",
    "@storybook/addon-links": "^5.0.1",
    "@storybook/addons": "^5.0.1",
    "@babel/core": "^7.3.4",
    "babel-loader": "^8.0.5"
  }

[Zodiase]

I'm seeing the same error as @mech with my custom Button component after upgrading to Storybook 5.

[Zodiase]

Somehow I'm not able to reproduce the stack overflow error now. But when it's not showing errors, the action logs are showing up extremely slow. See:

(The bigger buttons are my custom ones, while the smaller buttons are the native <button> elements.)

Code for reference:

storiesOf('Demo|Button', module)
    .add('testing', () => {
        return <div>
            <Button onClick={action('clicked')}>Action</Button>
            <Button onClick={() => console.log('clicked')}>Console</Button>
            <button onClick={action('clicked')}>Action</button>
            <button onClick={() => console.log('clicked')}>Console</button>
        </div>;
    });

[mech]

The error will appear on "any" first button you press, then if you navigate to the "other" buttons, it will work fine. And when you cycle back to the first button, it also work fine now. That is how strange it is.

[shilman]

@mech I'm still not able to reproduce running:

npx create-react-app storybook-latest
cd storybook-latest/
npx -p @storybook/cli sb init

Here are my versions:

  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts": "2.1.8"
  },
  "devDependencies": {
    "@storybook/react": "^5.0.1",
    "@storybook/addon-actions": "^5.0.1",
    "@storybook/addon-links": "^5.0.1",
    "@storybook/addons": "^5.0.1",
    "@babel/core": "^7.3.4",
    "babel-loader": "^8.0.5"
  }

Also:

Node: v8.11.2
Chrome: 72.0.3626.121 (Official Build) (64-bit)
Also upgraded Chrome: 73.0.3683.75 (Official Build) (64-bit)

[mech]

Strange that you did not get it. Just to make sure, I do it on my MacBook Pro, previously was done on iMac Pro. I also use Incognito chrome to make sure no extension loaded. This is the screenshot for Chrome and Firefox.

[shilman]

Could not repro in Firefox or Chrome incognito. Do all the other versions match up with you?

[Zodiase]

Somehow I can reproduce the error now (facepalm).

The versions listed above match what I have, apart from the react-scripts. Also I have these extra hard dependencies to cope with npm's stupidity:

        "acorn": "^6.1.1",
        "ajv": "^6.10.0",

[shilman]

@ndelangen Mind taking a quick look at this? I imagine this is telejson-related, though I can't repro. Maybe you have some guess based on your knowledge of the library?

[szokrika]

I'm getting the same issue, I have both knobs and actions installed:

RangeError: Maximum call stack size exceeded
    at Object.toString (<anonymous>)
    at isArguments (vendors~main.f8f9f9b46dcfdca5d3be.bundle.js:37623)
    at keys (vendors~main.f8f9f9b46dcfdca5d3be.bundle.js:37686)
    at equal (vendors~main.f8f9f9b46dcfdca5d3be.bundle.js:42600)
    at equal (vendors~main.f8f9f9b46dcfdca5d3be.bundle.js:42611)
    at equal (vendors~main.f8f9f9b46dcfdca5d3be.bundle.js:42611)
    at equal (vendors~main.f8f9f9b46dcfdca5d3be.bundle.js:42611)
    at equal (vendors~main.f8f9f9b46dcfdca5d3be.bundle.js:42611)
    at equal (vendors~main.f8f9f9b46dcfdca5d3be.bundle.js:42611)
    at equal (vendors~main.f8f9f9b46dcfdca5d3be.bundle.js:42611)
error @ vendors~main.f8f9f9b46dcfdca5d3be.bundle.js:7805
postMessage (async)
push../node_modules/@storybook/channel-postmessage/dist/index.js.PostmsgTransport.send @ index.js:46
handler @ index.js:46
push../node_modules/@storybook/channels/dist/index.js.Channel.emit @ index.js:55
action @ action.js:32
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:270
executeDispatch @ react-dom.development.js:561
executeDispatchesInOrder @ react-dom.development.js:583
executeDispatchesAndRelease @ react-dom.development.js:680
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:688
forEachAccumulated @ react-dom.development.js:662
runEventsInBatch @ react-dom.development.js:816
runExtractedEventsInBatch @ react-dom.development.js:824
handleTopLevel @ react-dom.development.js:4826
batchedUpdates$1 @ react-dom.development.js:20393
batchedUpdates @ react-dom.development.js:2151
dispatchEvent @ react-dom.development.js:4905
(anonymous) @ react-dom.development.js:20444
unstable_runWithPriority @ scheduler.development.js:255
interactiveUpdates$1 @ react-dom.development.js:20443
interactiveUpdates @ react-dom.development.js:2170
dispatchInteractiveEvent @ react-dom.development.js:4882

[shilman]

Still trying to get a repro here.. @szokrika can you tell me more about your environment? See my comment above https://github.com/storybooks/storybook/issues/6004#issuecomment-472678657

[szokrika]

@shilman I'm running this on a macOS Mojave, in Chrome, using the standard 'Getting started' process:

npx -p @storybook/cli sb init

Should I do the React one instead? The default init seemed to do the setup... it detected React...

npx -p @storybook/cli sb init --type react

It happens when running npm run storybook. Once clicked there is a log statement, then the error.

The built version seems to not log anything.
See:

https://5c8abbbe118facab15b6c6fe--compassionate-galileo-b433b3.netlify.com/?path=/story/button--button-variables

also note my dependencies:

"devDependencies": {
    "@babel/cli": "7.2.3",
    "@babel/core": "7.3.4",
    "@babel/plugin-proposal-class-properties": "7.3.4",
    "@babel/plugin-syntax-dynamic-import": "7.2.0",
    "@babel/preset-env": "7.3.4",
    "@babel/preset-react": "7.0.0",
    "babel-jest": "24.5.0",
    "babel-plugin-dynamic-import-node": "2.2.0",
    "jest": "24.5.0",
    "jest-directory-named-resolver": "0.3.0",
    "jest-dom": "3.1.3",
    "jest-styled-components": "6.3.1",
    "react": "16.8.4",
    "react-dom": "16.8.4",
    "react-testing-library": "6.0.0",
    "semantic-release": "^15.13.3",
    "styled-components": "4.1.3",
    "@storybook/react": "^5.0.1",
    "@storybook/addon-actions": "^5.0.1",
    "@storybook/addon-links": "^5.0.1",
    "@storybook/addon-storysource": "5.0.1",
    "@storybook/addon-knobs": "5.0.1",
    "@storybook/addons": "^5.0.1",
    "babel-loader": "^8.0.5"
  }

[shilman]

@szokrika What kind of project? CRA/Next/Gatsby? Or something custom?

[szokrika]

@shilman Custom. Just a default storybook install. You can see all my dependencies there. I’m just using storybook to view my components.

[Armanio]

BOOM!

I followed the instructions from https://github.com/storybooks/storybook/issues/6004#issuecomment-471451888 post and caught it.
It works only at the first boot and only at very fast clicks.

Tomorrow I will investigate this. This is strange.

[shilman]

Thanks for taking this on @Armanio !

[k4lux]

Did someone found a solution?

[tassoevan]

It seems it is crashing when fast-deep-equal is used to compare two action descriptions ({ name: "...", args: [ ... ] }) to group them. If args contains an event like MouseEvent, it keeps recursively looping because event.nativeEvent === event.

[Armanio]

@tassoevan is right. Unfortunately, I did not found free time for the resolve trouble. I'll try today.

[k4lux]

Hey guys, I'm back in this thread, I'm trying to use in Chrome and I receive the following error on console:

Uncaught Error: The MetaMask Web3 object does not support synchronous methods like eth_mining without a callback parameter.

[k4lux]

Solved here, the problem was related to MetaMask extension, I just disabled it, why? I don't know, but its solved :)

[Zodiase]

@kaluabentes Well good for you. Looks like other folks in this thread are having a different problem than yours.

[shilman]

Olé!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.15 containing PR #6240 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.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Yowza!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.6 containing PR #6240 that references this issue. Upgrade today to try it out!

[Zodiase]

@shilman With 5.0.6 I haven't seen the call stack maxed issue but the click actions still takes more than 1 second to show up in the logger. Is this expected?

[shilman]

@Zodiase I think you might need this: https://github.com/storybooks/storybook/pull/6410

It was released in 5.1.0-alpha.22

[lookfirst]

Still seeing this with latest of everything.

Brave Version 0.67.124 Chromium: 76.0.3809.100 (Official Build) (64-bit)
Storybook 5.1.11 with Typescript according to the SB install with babel.
Default 'button' example converted to tsx.
CRA 3.1.0

react-dom.development.js:487 Uncaught Error: The MetaMask Web3 object does not support synchronous methods like eth_mining without a callback parameter. See https://github.com/MetaMask/faq/blob/master/DEVELOPERS.md#dizzy-all-async---think-of-metamask-as-a-light-client for details.
    at MetamaskInpageProvider._sendSync (inpage.js:1)
    at MetamaskInpageProvider.send (inpage.js:1)
    at Proxy.t.send (inpage.js:1)
    at a.send (inpage.js:1)
    at w.mining (inpage.js:1)
    at JSON.stringify (<anonymous>)
    at stringify (index.js:353)
    at PostmsgTransport.send (index.js:154)
    at handler (index.js:126)
    at Channel.emit (index.js:136)

Disabling metamask 'fixes' the issue.

[morrigan]

I can also confirm that this is still an issue with MetaMask. @shilman

[shilman]

@lookfirst @morrigan can one of you open a separate issue? seems like it's something specific to metamask?

[casderooij]

@shilman I had the same issue and solved it by removing the centered addon. I'm using Angular as a framework

[sleeper]

I've also the MetaMask error for one of my stories.

[richardtorres314]

I'm also receiving the MetaMask error. I'm realizing it's a Brave browser issue for me; not sure if others are using the same. I've changed the setting under Extensions -> Web3 provider for using Dapps to "ask" instead of "Crypto Wallets".

[Gudahtt]

This will be fixed in the next version of MetaMask. See https://github.com/MetaMask/metamask-extension/pull/8634

The problem was that @storybook/addon-actions was stringifying events, which include a reference to the window. The web3 global injected by MetaMask blows up when you try to stringify it unfortunately.

Though ideally @storybook/addon-actions would stop stringifying the window as well - that doesn't seem like a useful thing to do, and it's likely related to the performance problems reported in #5551

[ndelangen]

@Gudahtt Do you have an idea on how to ignore-list window from stringification? Would love a PR adding that.

[iamgollum]

Thanks @richardtorres314 !