[@storybook/addon-actions]: ActionLogger crashes storybook app

[mgameover]

Describe the bug
ActionLogger crashes storybook app if ActionOptions ({ depth: 2 } ) has been provided.
I am using depth parameter to avoid 'Maximum call stack size exceeded' exception if event argument has circular references.
It works fine in SB v6.3

To Reproduce

Specify ActionOptions object for action e.g, { depth: 2 } e.g. (see onclick action)

import { storiesOf } from '@storybook/angular';
import { action } from '@storybook/addon-actions';

storiesOf('Actions', module)
    .add('ActionLogger error', () => ({
        template: `<button (click)="onclick($event)">Click me</button>`,
        props: {
            onclick: action('onclick', { depth: 2 }),
        }
    }));

Steps:

1. Clone the repo.
2. Install dependencies and run storybook: npm i, npm run storybook
3. Go to 'Actions'->'ActionLogger error' story
4. Click on [Click me] button

Result:
Storybook app crashed with the following exception:

Exception

Uncaught TypeError: Cannot create property 'count' on string '[Object]'
    at ActionLogger.<anonymous> (vendors-node_modules_storybook_addon-a11y_dist_esm_register_js-node_modules_storybook_addon-a-59857a.manager.bundle.js:6513:24)
    at getStateFromUpdate (vendors-node_modules_storybook_addon-a11y_dist_esm_register_js-node_modules_storybook_addon-a-59857a.manager.bundle.js:101313:35)
    at processUpdateQueue (vendors-node_modules_storybook_addon-a11y_dist_esm_register_js-node_modules_storybook_addon-a-59857a.manager.bundle.js:101444:22)
    at updateClassInstance (vendors-node_modules_storybook_addon-a11y_dist_esm_register_js-node_modules_storybook_addon-a-59857a.manager.bundle.js:102205:3)
    at updateClassComponent (vendors-node_modules_storybook_addon-a11y_dist_esm_register_js-node_modules_storybook_addon-a-59857a.manager.bundle.js:106127:20)
    at beginWork (vendors-node_modules_storybook_addon-a11y_dist_esm_register_js-node_modules_storybook_addon-a-59857a.manager.bundle.js:107640:16)
    at HTMLUnknownElement.callCallback (vendors-node_modules_storybook_addon-a11y_dist_esm_register_js-node_modules_storybook_addon-a-59857a.manager.bundle.js:89208:14)
    at Object.invokeGuardedCallbackDev (vendors-node_modules_storybook_addon-a11y_dist_esm_register_js-node_modules_storybook_addon-a-59857a.manager.bundle.js:89257:16)
    at invokeGuardedCallback (vendors-node_modules_storybook_addon-a11y_dist_esm_register_js-node_modules_storybook_addon-a-59857a.manager.bundle.js:89312:31)
    at beginWork$1 (vendors-node_modules_storybook_addon-a11y_dist_esm_register_js-node_modules_storybook_addon-a-59857a.manager.bundle.js:112223:7)

The above error occurred in the <ActionLogger> component:
    in ActionLogger
    in div (created by Context.Consumer)
    in Styled(div)
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown
    in Unknown
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout)
    in Unknown
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by SizeMeRenderer(Component))
    in SizeMeReferenceWrapper (created by SizeMeRenderer(Component))
    in SizeMeRenderer(Component) (created by SizeMe(Component))
    in SizeMe(Component)
    in ThemeProvider
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Manager)
    in EffectOnMount (created by Manager)
    in Manager (created by QueryLocation)
    in QueryLocation (created by Main)
    in Main (created by Root)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by Root)
    in HelmetProvider (created by Root)
    in Root
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

System
OS: Windows 10 10.0.19044
CPU: (8) x64 Intel(R) Core(TM) i7-4940MX CPU @ 3.10GHz
Binaries:
Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 97.0.4692.99
Edge: Spartan (44.19041.1266.0), Chromium (97.0.1072.76)
npmPackages:
@storybook/addon-a11y: ^6.4.18 => 6.4.18
@storybook/addon-actions: ^6.4.18 => 6.4.18
@storybook/addon-docs: ^6.4.18 => 6.4.18
@storybook/addon-essentials: ^6.4.18 => 6.4.18
@storybook/addon-knobs: ^6.4.0 => 6.4.0
@storybook/addon-links: ^6.4.18 => 6.4.18
@storybook/addon-viewport: ^6.4.18 => 6.4.18
@storybook/addons: ^6.4.18 => 6.4.18
@storybook/angular: ^6.4.18 => 6.4.18
@storybook/builder-webpack5: ^6.4.18 => 6.4.18
@storybook/manager-webpack5: ^6.4.18 => 6.4.18
@storybook/source-loader: ^6.4.18 => 6.4.18

[mgameover]

It looks like the issue is in channel-postmessage/src/index.ts#L107 and might be related to 'telejson' lib.

stringify method serialize args as ["[Object]"]:

@shilman, guys, could you please take a look? that's quite critical because it crashes the app.
Thanks.

[mukundkatpatal]

We are facing the same issue.
"@storybook/addon-a11y": "^6.4.20",
"@storybook/addon-actions": "^6.4.20",
"@storybook/addon-essentials": "^6.4.20",
"@storybook/addon-links": "^6.4.20",
"@storybook/addon-storysource": "^6.4.20",
"@storybook/addons": "^6.4.20",
"@storybook/angular": "^6.4.20",
"@storybook/builder-webpack5": "^6.4.20",
"@storybook/manager-webpack5": "^6.4.20",

Can this be looked into?

[dartoism]

Same issue (^6.5.7). Can this be investigated? Thanks!

[AlexanderShushunov]

@mgameover, set { depth: 6 }. I think the "transport" has been changed and 4 auxiliary layers have been added.
According to the docs, an action is sent over the channel.

The line where an action is sent

storybook/code/addons/actions/src/runtime/action.ts

Line 65 in d99735b

channel.emit(EVENT_ID, actionDisplayToEmit);

data - the action
depth - from config

The line where depth option is converted to maxDepth telejson option

storybook/lib/channel-postmessage/src/index.ts

Line 100 in 9bc627d

stringifyOptions.maxDepth = options.depth;

The serialization line. Event has several auxiliary layers

storybook/lib/channel-postmessage/src/index.ts

Line 107 in 9bc627d

const data = stringify(

So your action is serialized to “Object”.