Addon Actions is not handling React events properly

Describe the bug Attempting to use action from @storybook/addon-actions causes console errors and the output doesn’t match the docs, possibly due to how the React Synthetic Events are being serialized.

To Reproduce

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

Then the demo button in the “Button” “with Text” story is clicked. Google Chrome gives a deprecation warning:

[Deprecation] 'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.

The output in the Storybook Actions addon panel doesn’t match the output shown in the docs, reading as clicked: [Class] instead of the clicked: ["[SyntheticEvent]", null, "[SyntheticEvent]"] shown on https://storybook.js.org/docs/addons/introduction/

clicked: [Class]
0: Class
_dispatchInstances: Object
_dispatchListeners: function action()
_targetInst: Object
altKey: false
bubbles: true
button: 0
buttons: 0
cancelable: true
clientX: 82
clientY: 32
ctrlKey: false
currentTarget: HTMLButtonElement
defaultPrevented: false
detail: 1
dispatchConfig: Object
eventPhase: 3
getModifierState: function modifierStateGetter()
isDefaultPrevented: function functionThatReturnsFalse()
isPropagationStopped: function functionThatReturnsFalse()
isTrusted: true
metaKey: false
movementX: 0
movementY: 0
nativeEvent: MouseEvent
pageX: 82
pageY: 32
relatedTarget: null
screenX: 292
screenY: 185
shiftKey: false
target: HTMLButtonElement
timeStamp: 266833.9550000001
type: "click"
view: Window

Additionally, if react and react-dom is downgraded to 16.3.2 (the version I was using when I encountered the issue), there is also another console error:

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're adding a new property in the synthetic event object. The property is never released. See https://fb.me/react-event-pooling for more information.

Expected behavior No console errors or warnings, and for the Action panel to match the docs.

System:

• OS: macOS Mojave Version 10.14.4
• Device: MacBook Pro
• Browser: Google Chrome Version 73.0.3683.103 (Official Build) (64-bit)
• Framework: react
• Addons: addon-actions
• Version: react@^16.8.6 react-dom@^16.8.6 react-scripts@2.1.8 @storybook/react@^5.0.6 @storybook/addon-actions@^5.0.6 @storybook/addon-links@^5.0.6 @storybook/addons@^5.0.6 @babel/core@^7.4.3 babel-loader@^8.0.5

Additional context I was unable to recreate this additional error, but in my own setup I also saw telejson / JSON.stringify choke on something (Date-related?) with an error of Uncaught TypeError: toISOString is not a function

[petermikitsh]

This is my solution to action logging concerning React synthetic events.

The key is to set view to undefined, because it’s a reference to window, and logging window substantially slows down the performance of storybook (because window is giant-- that’s by no means Storybook’s fault or anything).

Use this facade for Storybook’s action function throughout your project:

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

/* Partial event logging, as full logging can be expensive/slow
 * Invocation: partialLog('actionName')(eventObj, ...args)
 */
export const partialAction = (actionName) => {
  const beacon = action(actionName);
  return (eventObj, ...args) => {
    beacon({ ...eventObj, view: undefined }, ...args);
  };
};

Literal example in a story:

const Template: Story<AccordionProps> = (args) => <Accordion {...args} />;

export const Simple = Template.bind({});
Simple.args = {
  header: 'Hello World',
  body: 'This is my example accordion.',
  onChange: partialAction('onChange'), // fires whenever my accordion expands or collapses
};

This fix gets rid of React error message:

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method `isDefaultPrevented` on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information.

It’s a good compromise of logging nearly all the data (except the ‘view’ property), and keeping Storybook fast.

[wonskarol]

Im facing similar issue.