Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Oct 4, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
95a3b25
Show exception rather than error on react error boundary
shilman Sep 17, 2019
c9fc79a
Fix unused import
shilman Sep 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 7 additions & 7 deletions app/react/src/client/preview/render.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;

Expand All @@ -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 };
Expand All @@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's actually do it again

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm will wait for @tmeasday 's feedback on this. Apparently it interacts with Chromatic in some way

Copy link
Member

@Hypnosphi Hypnosphi Sep 17, 2019 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

chromatic can't test pages with errors anyway
#8087 (comment)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please at least remove the comment if we're not actually stripping anything

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Hypnosphi FYI the issue here was that tools like Chromatic listen to to the storyThrewException event in order to show the user a stack trace of broken stories. This was reverting a regression where the wrong event was fired in that case.

Would be good to handle the distinction between "user code error" and "react error" somehow though.

showError({ title: message.split(/\n/)[0], description: stack });
showException(err);
}

render() {
Expand All @@ -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>
);
Expand Down
1 change: 1 addition & 0 deletions app/react/src/client/preview/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export interface RenderMainArgs {
selectedStory: string;
showMain: () => void;
showError: (args: ShowErrorArgs) => void;
showException: (err: Error) => void;
forceRender: boolean;
}

Expand Down