Core: Show exception rather than error on react error boundary (#8100)

Core: Show exception rather than error on react error boundary

app/react/src/client/preview/render.tsx

@@ -1,7 +1,7 @@
 import { document } from 'global';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { RenderMainArgs, ShowErrorArgs } from './types';
+import { RenderMainArgs } from './types';
 
 const rootEl = document ? document.getElementById('root') : null;
 
@@ -15,7 +15,7 @@ const render = (node: React.ReactElement, el: Element) =>
   });
 
 class ErrorBoundary extends React.Component<{
-  showError: (args: ShowErrorArgs) => void;
+  showException: (err: Error) => void;
   showMain: () => void;
 }> {
   state = { hasError: false };
@@ -32,10 +32,10 @@ class ErrorBoundary extends React.Component<{
     }
   }
 
-  componentDidCatch({ message, stack }: Error) {
-    const { showError } = this.props;
+  componentDidCatch(err: Error) {
+    const { showException } = this.props;
     // message partially duplicates stack, strip it
-    showError({ title: message.split(/\n/)[0], description: stack });
+    showException(err);
   }
 
   render() {
@@ -49,11 +49,11 @@ class ErrorBoundary extends React.Component<{
 export default async function renderMain({
   storyFn: StoryFn,
   showMain,
-  showError,
+  showException,
   forceRender,
 }: RenderMainArgs) {
   const element = (
-    <ErrorBoundary showMain={showMain} showError={showError}>
+    <ErrorBoundary showMain={showMain} showException={showException}>
       <StoryFn />
     </ErrorBoundary>
   );

app/react/src/client/preview/types.ts

@@ -11,6 +11,7 @@ export interface RenderMainArgs {
   selectedStory: string;
   showMain: () => void;
   showError: (args: ShowErrorArgs) => void;
+  showException: (err: Error) => void;
   forceRender: boolean;
 }