feat: add error boundary

Author: lottamus

package.json

@@ -48,7 +48,8 @@
     "lodash": "^4.17.11",
     "mobx-react-lite": "^1.3.1",
     "pluralize": "^7.0.0",
-    "json-schema-merge-allof": "^0.6.0"
+    "json-schema-merge-allof": "^0.6.0",
+    "react-error-boundary": "^1.2.5"
   },
   "devDependencies": {
     "@sambego/storybook-state": "^1.3.4",

src/components/JsonSchemaViewer.tsx

@@ -2,24 +2,17 @@ import { TreeStore } from '@stoplight/tree-list';
 import { Omit } from '@stoplight/types';
 import { runInAction } from 'mobx';
 import * as React from 'react';
+import ErrorBoundary, { ErrorBoundaryProps, FallbackProps } from 'react-error-boundary';
 
 import { isSchemaViewerEmpty, renderSchema } from '../utils';
 import { ISchemaTree, SchemaTree } from './SchemaTree';
 
-export interface IJsonSchemaViewer extends Omit<ISchemaTree, 'treeStore'> {
+export interface IJsonSchemaViewer extends ErrorBoundaryProps, Omit<ISchemaTree, 'treeStore'> {
   emptyText?: string;
   defaultExpandedDepth?: number;
 }
 
-export interface IJsonSchemaViewerState {
-  error: null | string;
-}
-
-export class JsonSchemaViewer extends React.PureComponent<IJsonSchemaViewer, IJsonSchemaViewerState> {
-  public state = {
-    error: null,
-  };
-
+class JsonSchemaViewerComponent extends React.PureComponent<IJsonSchemaViewer> {
   protected treeStore: TreeStore;
 
   constructor(props: IJsonSchemaViewer) {
@@ -31,11 +24,6 @@ export class JsonSchemaViewer extends React.PureComponent<IJsonSchemaViewer, IJs
     });
   }
 
-  // there is no error hook yet, see https://reactjs.org/docs/hooks-faq.html#how-do-lifecycle-methods-correspond-to-hooks
-  public static getDerivedStateFromError(error: Error): { error: IJsonSchemaViewerState['error'] } {
-    return { error: `Error rendering schema. ${error.message}` };
-  }
-
   protected get expandedDepth(): number {
     if (this.props.expanded) {
       return 2 ** 31 - 3; // tree-list kind of equivalent of expanded: all
@@ -67,13 +55,8 @@ export class JsonSchemaViewer extends React.PureComponent<IJsonSchemaViewer, IJs
   public render() {
     const {
       props: { emptyText = 'No schema defined', name, schema, expanded, defaultExpandedDepth, ...props },
-      state: { error },
     } = this;
 
-    if (error) {
-      return <div>{error}</div>;
-    }
-
     // an empty array or object is still a valid response, schema is ONLY really empty when a combiner type has no information
     if (isSchemaViewerEmpty(schema)) {
       return <div>{emptyText}</div>;
@@ -82,3 +65,25 @@ export class JsonSchemaViewer extends React.PureComponent<IJsonSchemaViewer, IJs
     return <SchemaTree expanded={expanded} name={name} schema={schema} treeStore={this.treeStore} {...props} />;
   }
 }
+
+const JsonSchemaFallbackComponent: React.FunctionComponent<FallbackProps> = ({ error }) => {
+  return (
+    <div className="p-4">
+      <b>Error</b>
+      {error && `: ${error.message}`}
+    </div>
+  );
+};
+
+export const JsonSchemaViewer: React.FunctionComponent<IJsonSchemaViewer> = ({
+  onError,
+  FallbackComponent = JsonSchemaFallbackComponent,
+  ...props
+}) => {
+  return (
+    <ErrorBoundary onError={onError} FallbackComponent={FallbackComponent}>
+      <JsonSchemaViewerComponent {...props} />
+    </ErrorBoundary>
+  );
+};
+JsonSchemaViewer.displayName = 'JsonSchemaViewer';

src/components/SchemaTree.tsx

@@ -15,7 +15,7 @@ import { DetailDialog, ISchemaRow, MaskedSchema, SchemaRow, TopBar } from './';
 
 const canDrag = () => false;
 
-export interface ISchemaTree extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'>, IMasking {
+export interface ISchemaTree extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onError'>, IMasking {
   name?: string;
   dereferencedSchema?: JSONSchema4;
   schema: JSONSchema4;

src/utils/isSchemaViewerEmpty.ts

@@ -4,8 +4,9 @@ import { get as _get, isEmpty as _isEmpty } from 'lodash';
 const combinerTypes = ['allOf', 'oneOf', 'anyOf'];
 
 export const isSchemaViewerEmpty = (schema: ISchema) => {
-  const objectKeys = Object.keys(schema);
+  if (typeof schema !== 'object' || schema === null) return true;
 
+  const objectKeys = Object.keys(schema);
   if (objectKeys.length === 1 && combinerTypes.includes(objectKeys[0])) {
     return _isEmpty(_get(schema, objectKeys[0], []));
   }

yarn.lock

@@ -12003,7 +12003,7 @@ react-draggable@^3.1.1, react-draggable@^3.3.0:
 
 react-error-boundary@^1.2.5:
   version "1.2.5"
-  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-1.2.5.tgz#a362cb799d2e58ff8f114f7c4bc25677ce4e4149"
+  resolved "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-1.2.5.tgz#a362cb799d2e58ff8f114f7c4bc25677ce4e4149"
   integrity sha512-5CPSeLJA2igJNppAgFRwnTL9aK3ojenk65enNzhVyoxYNbHpIJXnChUO7+4vPhkncRA9wvQMXq6Azp2XeXd+iQ==
 
 react-error-overlay@^5.1.4: