storybook: Action logger not working

Describe the bug The action logger is not working

To Reproduce Steps to reproduce the behavior:

Create a story with action
Click on the component
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

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 36 (16 by maintainers)

Most upvoted comments

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

richardtorres314 on Apr 23, 2020

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"
  }

mech on Mar 11, 2019

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.

Armanio on Mar 18, 2019

Thanks @richardtorres314 !

iamgollum on Jul 14, 2020

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 on Mar 26, 2019

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

kaluabentes on Mar 23, 2019

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.

tassoevan on Mar 19, 2019

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.

mech on Mar 14, 2019