Docs: Show errors when stories throw in docs

[tmeasday]

Closes N/A

What I did

Made it so errors show up in docs mode:

Not perfect but a lot better than the nothing it showed before.

How to test

Create a story with an error, check it in docs.

Checklist

• Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
• Make sure to add/update documentation regarding your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Maintainers

• If this PR should be tested against many or all sandboxes,
  make sure to add the ci:merged or ci:daily GH label to it.
• Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

[tmeasday]

Previously we passed error callbacks that basically did nothing.

[tmeasday]

We could use this to show a spinner or something until the story has rendered but I'm not sure there's much call for that.

[JReinhold]

Great work! A few minor comments, but none blocking.

[tmeasday]

From @ndelangen :

Here’s a component we might be able to use/repurpose for displaying the error more neatly:

storybook/code/ui/manager/src/components/sidebar/RefBlocks.tsx

Lines 60 to 108 in 84f5f3b

	const ErrorFormatter: FC<{ error: Error }> = ({ error }) => {
	if (!error) {
	return <Fragment>This error has no stack or message</Fragment>;
	}
	if (!error.stack) {
	return <Fragment>{error.message || 'This error has no stack or message'}</Fragment>;
	}
	const input = error.stack.toString();
	const match = input.match(firstLineRegex);
	if (!match) {
	return <Fragment>{input}</Fragment>;
	}
	const [, type, name] = match;
	const rawLines = input.split(/\n/).slice(1);
	const [, ...lines] = rawLines
	.map((line) => {
	const r = line.match(linesRegex);
	return r ? { name: r[1], location: r[2].replace(document.location.origin, '') } : null;
	})
	.filter(Boolean);
	return (
	<Fragment>
	<span>{type}</span>: <ErrorName>{name}</ErrorName>
	<br />
	{lines.map((l, i) =>
	l.name ? (
	// eslint-disable-next-line react/no-array-index-key
	<Fragment key={i}>
	{' '}at <ErrorImportant>{l.name}</ErrorImportant> (
	<ErrorDetail>{l.location}</ErrorDetail>)
	<br />
	</Fragment>
	) : (
	// eslint-disable-next-line react/no-array-index-key
	<Fragment key={i}>
	{' '}at <ErrorDetail>{l.location}</ErrorDetail>
	<br />
	</Fragment>
	)
	)}
	</Fragment>
	);
	};

[tmeasday]

I updated to use @ndelangen's component. It looks better in Chrome, arguably worse in other browsers. I'll just merge and we can iterate -- @MichaelArestad when you have a min you can just work directly on the Story component: http://localhost:6010/?path=/story/storybook-blocks-components-story--inline-error or even ErrorFormatter: http://localhost:6010/?path=/story/storybook-components-errorformatter--chrome

[ndelangen]

I found out why the e2e test were failing (and why only for safari and firefox!)

The stacktrace in safari and firefox do not contain the error.message.

I improved the ErrorFormatter component to handle these cases better.

[MichaelArestad]

I will take a look at this on Monday. I am also doing a pass at styling docs in general and I could use a bit of help.

[tmeasday]

Thanks for sorting this @ndelangen. I guess we can wait to merge this then if @MichaelArestad is look at it so soon.

[ndelangen]

@shilman I'm going to merge this when it's green