diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js index 45441a925df65..63c67afdd9bc2 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js @@ -21,6 +21,7 @@ type Props = {| type State = {| callStack: string | null, + canDismiss: boolean, componentStack: string | null, errorMessage: string | null, hasError: boolean, @@ -28,6 +29,7 @@ type State = {| const InitialState: State = { callStack: null, + canDismiss: false, componentStack: null, errorMessage: null, hasError: false, @@ -77,13 +79,20 @@ export default class ErrorBoundary extends Component { render() { const {children} = this.props; - const {callStack, componentStack, errorMessage, hasError} = this.state; + const { + callStack, + canDismiss, + componentStack, + errorMessage, + hasError, + } = this.state; if (hasError) { return ( }> { return children; } + _dismissError = () => { + this.setState(InitialState); + }; + _onStoreError = (error: Error) => { if (!this.state.hasError) { - this.setState(ErrorBoundary.getDerivedStateFromError(error)); + this.setState({ + ...ErrorBoundary.getDerivedStateFromError(error), + canDismiss: true, + }); } }; } diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js index 6ec792408fe9c..baff24e522e1b 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js @@ -8,12 +8,15 @@ */ import * as React from 'react'; +import Button from '../Button'; +import ButtonIcon from '../ButtonIcon'; import styles from './shared.css'; type Props = {| callStack: string | null, children: React$Node, componentStack: string | null, + dismissError: Function | null, errorMessage: string | null, |}; @@ -21,14 +24,23 @@ export default function ErrorView({ callStack, children, componentStack, + dismissError = null, errorMessage, }: Props) { return (
{children}
-
- Uncaught Error: {errorMessage || ''} +
+
+ Uncaught Error: {errorMessage || ''} +
+ {dismissError !== null && ( + + )}
{!!callStack && (
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css index 267cfad7b7e88..bef5c945c226e 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css @@ -37,12 +37,22 @@ overflow: auto; } -.Header { +.HeaderRow { + display: flex; + flex-direction: row; font-size: var(--font-size-sans-large); font-weight: bold; color: var(--color-error-text); } +.Header { + flex: 1 1 auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + min-width: 0; +} + .Stack { margin-top: 0.5rem; white-space: pre-wrap; @@ -75,9 +85,21 @@ .ReproSteps { margin-left: 0.25rem; color: var(--color-console-warning-text); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + min-width: 0; } .UpdateExistingIssuePrompt { margin-right: 0.25rem; color: var(--color-console-warning-text); +} + +.CloseButton { + font-weight: bold; +} + +.CloseButtonIcon { + margin-left: 0.25rem; } \ No newline at end of file