diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.css index 399f83cec45b0..612fd7eb2840d 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.css +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.css @@ -1,21 +1,3 @@ -.Error { - justify-content: center; - align-items: center; - display: flex; - flex-direction: column; - height: 100%; - font-size: var(--font-size-sans-large); - font-weight: bold; - text-align: center; - background-color: var(--color-error-background); - color: var(--color-error-text); - border: 1px solid var(--color-error-border); - padding: 1rem; -} - -.Message { - margin-bottom: 1rem; -} - -.RetryButton { +.Wrapper { + border-left: 1px solid var(--color-border); } \ No newline at end of file diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js index 09c11664dcf77..8b892c8eaf7c0 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js @@ -8,13 +8,9 @@ */ import * as React from 'react'; -import {Component, useContext} from 'react'; -import {TreeDispatcherContext} from './TreeContext'; -import Button from 'react-devtools-shared/src/devtools/views/Button'; +import ErrorBoundary from '../ErrorBoundary'; import styles from './InspectedElementErrorBoundary.css'; -import type {DispatcherContext} from './InspectedElementErrorBoundary.css'; - type WrapperProps = {| children: React$Node, |}; @@ -22,72 +18,9 @@ type WrapperProps = {| export default function InspectedElementErrorBoundaryWrapper({ children, }: WrapperProps) { - const dispatch = useContext(TreeDispatcherContext); - return ( - +
+ {children} +
); } - -type Props = {| - children: React$Node, - dispatch: DispatcherContext, -|}; - -type State = {| - errorMessage: string | null, - hasError: boolean, -|}; - -const InitialState: State = { - errorMessage: null, - hasError: false, -}; - -class InspectedElementErrorBoundary extends Component { - state: State = InitialState; - - static getDerivedStateFromError(error: any) { - const errorMessage = - typeof error === 'object' && - error !== null && - error.hasOwnProperty('message') - ? error.message - : error; - - return { - errorMessage, - hasError: true, - }; - } - - render() { - const {children} = this.props; - const {errorMessage, hasError} = this.state; - - if (hasError) { - return ( -
-
{errorMessage || 'Error'}
- -
- ); - } - - return children; - } - - _retry = () => { - const {dispatch} = this.props; - dispatch({ - type: 'SELECT_ELEMENT_BY_ID', - payload: null, - }); - this.setState({ - errorMessage: null, - hasError: false, - }); - }; -} 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 63c67afdd9bc2..3ffa7536b72d2 100644 --- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js +++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js @@ -16,7 +16,8 @@ import SuspendingErrorView from './SuspendingErrorView'; type Props = {| children: React$Node, - store: Store, + canDismiss?: boolean, + store?: Store, |}; type State = {| @@ -70,18 +71,24 @@ export default class ErrorBoundary extends Component { } componentDidMount() { - this.props.store.addListener('error', this._onStoreError); + const {store} = this.props; + if (store != null) { + store.addListener('error', this._onStoreError); + } } componentWillUnmount() { - this.props.store.removeListener('error', this._onStoreError); + const {store} = this.props; + if (store != null) { + store.removeListener('error', this._onStoreError); + } } render() { - const {children} = this.props; + const {canDismiss: canDismissProp, children} = this.props; const { callStack, - canDismiss, + canDismiss: canDismissState, componentStack, errorMessage, hasError, @@ -92,7 +99,9 @@ export default class ErrorBoundary extends Component { }>