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 {
}>