diff --git a/app/react/src/client/preview/render.tsx b/app/react/src/client/preview/render.tsx index be14c1fdb213..e4d935246bfa 100644 --- a/app/react/src/client/preview/render.tsx +++ b/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 = ( - + ); diff --git a/app/react/src/client/preview/types.ts b/app/react/src/client/preview/types.ts index 5bf2c374c172..e19ed722c680 100644 --- a/app/react/src/client/preview/types.ts +++ b/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; }