[inspector] Error boundary

jamesgpearce · jamesgpearce · commit ddff1a490500 · 2023-08-23T10:09:18.000-04:00
diff --git a/src/store-inspector/ErrorBoundary.tsx b/src/store-inspector/ErrorBoundary.tsx
@@ -0,0 +1,36 @@
+/** @jsx createElement */
+
+import {ErrorInfo, ReactNode} from 'react';
+import {PureComponent, createElement} from '../ui-react/common';
+
+interface Props {
+  readonly children: ReactNode;
+}
+
+interface State {
+  e: 0 | 1;
+}
+
+export class ErrorBoundary extends PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {e: 0};
+  }
+
+  static getDerivedStateFromError = () => ({e: 1});
+
+  // eslint-disable-next-line react/no-arrow-function-lifecycle
+  componentDidCatch = (error: Error, info: ErrorInfo) =>
+    // eslint-disable-next-line no-console
+    console.error(error, info.componentStack);
+
+  render() {
+    return this.state.e ? (
+      <span className="warn">
+        Inspector error: please see console for details.
+      </span>
+    ) : (
+      this.props.children
+    );
+  }
+}
diff --git a/src/store-inspector/Panel.tsx b/src/store-inspector/Panel.tsx
@@ -2,6 +2,7 @@
 
 import {OPEN_VALUE, POSITION_VALUE} from './common';
 import {Body} from './Body';
+import {ErrorBoundary} from './ErrorBoundary';
 import {Header} from './Header';
 import {StoreProp} from './types';
 import {createElement} from '../ui-react/common';
@@ -13,7 +14,9 @@ export const Panel = ({s}: StoreProp) => {
   return useValue(OPEN_VALUE, s) ? (
     <main data-position={position}>
       <Header s={s} />
-      <Body s={s} />
+      <ErrorBoundary>
+        <Body s={s} />
+      </ErrorBoundary>
     </main>
   ) : null;
 };
diff --git a/src/store-inspector/style.ts b/src/store-inspector/style.ts
@@ -85,6 +85,8 @@ export const APP_STYLESHEET = arrayJoin(
       'button.next': 'margin-right:0.5rem',
       [`th,#${UNIQUE_ID} td`]:
         'overflow:hidden;text-overflow:ellipsis;padding:0.25rem 0.5rem;max-width:12rem;white-space:nowrap;border-width:1px 0;border-style:solid;border-color:#777;text-align:left',
+
+      'span.warn': 'margin:0.25rem;color:#d81b60',
     },
     (style, selector) => (style ? `#${UNIQUE_ID} ${selector}{${style}}` : ''),
   ),
diff --git a/src/ui-react/common.ts b/src/ui-react/common.ts
@@ -7,8 +7,9 @@ import {Store} from '../types/store';
 import {isUndefined} from '../common/other';
 
 export const {
-  createElement,
+  PureComponent,
   Fragment,
+  createElement,
   useCallback,
   useLayoutEffect,
   useRef,
