Consistent error handling for addon-interactions

[shilman]

Currently we handle errors differently between errors thrown on instrumented functions and errors thrown on non-instrumented functions:

const Instrumented = Template.bind({});
Instrumented.play = async ({ canvasElement }) => {
  const taskInput = await findByRole(canvas, 'textbox');
  await fireEvent.change(taskInput, {
    target: { value: 'Fix bug in the textarea error state' },
  });
}

const NonInstrumented = Template.bind({});
NonInstrumented.play = async ({ canvasElement }) => {
  throw new Error('hahaha');
};

The former shows an error in the interactions tab:

The latter shows a typical storybook error:

Should this handling be consistent?

[ghengeveld]

Preferably we wouldn't show a red box for simple errors at all, but rather something like the interactions panel. However, the interactions addon might not be installed, even when using the play function and instrumented libraries. That means we can't simply catch everything thrown in the play function, because doing so would gobble it up and go nowhere.

We could simply catch it, log the error to console and call it a day.
We could detect whether the Interactions addon is installed and only catch if it is.
We could introduce a bespoke UI component in the Storybook manager to surface exceptions. Basically a nicer version of the redbox, somewhere in a modal or something. This could tie in nicely with a render phase indicator.

[tmeasday]

I think @ghengeveld's ideas make sense; I would just say that for now whatever we do I think we should be consistent between normal and intercepted errors. For 6.4 that probably means logging to the console and showing in the interactions panel.

[shilman]

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-beta.29 containing PR #16590 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

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

[ghengeveld]

Reopening because the PR that handles this is still pending: #16592

[tmeasday]

Sorry not sure why I referenced this issue

[shilman]

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.11 containing PR #16592 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb upgrade --prerelease