chore: use @stoplight/react-error-boundary (#55)

* feat: use @stoplight/react-error-boundary

* chore: require node 10

* test: dive

Author: P0lip

.circleci/config.yml

@@ -1,9 +1,9 @@
 version: 2
 
 jobs:
-  test_node_8:
+  test_node_10:
     docker:
-      - image: circleci/node:8
+      - image: circleci/node:10
     steps:
       - checkout
       - run:
@@ -24,7 +24,7 @@ jobs:
 
   release:
     docker:
-      - image: circleci/node:8
+      - image: circleci/node:10
     steps:
       - checkout
       - run: yarn
@@ -37,10 +37,10 @@ workflows:
   version: 2
   test_and_release:
     jobs:
-      - test_node_8
+      - test_node_10
       - release:
           filters:
             branches:
               only: master
           requires:
-            - test_node_8
+            - test_node_10

package.json

@@ -17,7 +17,7 @@
     "**/*"
   ],
   "engines": {
-    "node": ">=8.3.0"
+    "node": ">=10.0"
   },
   "scripts": {
     "build": "sl-scripts build --sourcemap",
@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "@stoplight/json": "^3.1.1",
+    "@stoplight/react-error-boundary": "^1.0.0",
     "classnames": "^2.2.6",
     "json-schema-merge-allof": "https://github.com/stoplightio/json-schema-merge-allof",
     "lodash-es": "^4.17.15",

src/components/JsonSchemaViewer.tsx

@@ -1,3 +1,4 @@
+import { ErrorBoundaryForwardedProps, FallbackComponent, withErrorBoundary } from '@stoplight/react-error-boundary';
 import { TreeStore } from '@stoplight/tree-list';
 import { Intent, Spinner } from '@stoplight/ui-kit';
 import cn from 'classnames';
@@ -14,8 +15,6 @@ import { renderSchema } from '../utils/renderSchema';
 import { ComputeSchemaMessageData, isRenderedSchemaMessage } from '../workers/messages';
 import { SchemaTree } from './SchemaTree';
 
-export type FallbackComponent = React.ComponentType<{ error: Error | null }>;
-
 export interface IJsonSchemaViewer {
   schema: JSONSchema4;
   dereferencedSchema?: JSONSchema4;
@@ -29,15 +28,11 @@ export interface IJsonSchemaViewer {
   maxRows?: number;
   onGoToRef?: GoToRefHandler;
   mergeAllOf?: boolean;
-  FallbackComponent?: FallbackComponent;
+  FallbackComponent?: typeof FallbackComponent;
   rowRenderer?: RowRenderer;
 }
 
-export interface IJsonSchemaViewerComponent extends Omit<IJsonSchemaViewer, 'FallbackComponent'> {
-  onError(err: Error): void;
-}
-
-export class JsonSchemaViewerComponent extends React.PureComponent<IJsonSchemaViewerComponent> {
+export class JsonSchemaViewerComponent extends React.PureComponent<IJsonSchemaViewer & ErrorBoundaryForwardedProps> {
   protected treeStore: TreeStore;
   protected instanceId: string;
   public static schemaWorker?: WebWorker;
@@ -46,7 +41,7 @@ export class JsonSchemaViewerComponent extends React.PureComponent<IJsonSchemaVi
     computing: false,
   };
 
-  constructor(props: IJsonSchemaViewerComponent) {
+  constructor(props: IJsonSchemaViewer & ErrorBoundaryForwardedProps) {
     super(props);
 
     this.treeStore = new TreeStore({
@@ -81,8 +76,8 @@ export class JsonSchemaViewerComponent extends React.PureComponent<IJsonSchemaVi
       this.setState({ computing: false });
       if (data.error === null) {
         this.treeStore.nodes = data.nodes;
-      } else {
-        this.props.onError(new Error(data.error));
+      } else if (this.props.boundaryRef.current !== null) {
+        this.props.boundaryRef.current.throwError(new Error(data.error));
       }
     }
   });
@@ -205,7 +200,7 @@ export class JsonSchemaViewerComponent extends React.PureComponent<IJsonSchemaVi
   }
 }
 
-const JsonSchemaFallbackComponent: FallbackComponent = ({ error }) => {
+const JsonSchemaFallbackComponent: typeof FallbackComponent = ({ error }) => {
   return (
     <div className="p-4">
       <b className="text-danger">Error</b>
@@ -214,36 +209,8 @@ const JsonSchemaFallbackComponent: FallbackComponent = ({ error }) => {
   );
 };
 
-// react-error-boundary does not support recovering, see  https://github.com/bvaughn/react-error-boundary/pull/16/files
-export class JsonSchemaViewer extends React.PureComponent<IJsonSchemaViewer, { error: null | Error }> {
-  public state = {
-    error: null,
-  };
-
-  public componentDidUpdate(prevProps: Readonly<IJsonSchemaViewer>) {
-    if (
-      this.state.error !== null &&
-      (prevProps.schema !== this.props.schema || prevProps.dereferencedSchema !== this.props.dereferencedSchema)
-    ) {
-      this.setState({ error: null });
-    }
-  }
-
-  // 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) {
-    return { error };
-  }
-
-  private onError: IJsonSchemaViewerComponent['onError'] = error => {
-    this.setState({ error });
-  };
-
-  public render() {
-    const { FallbackComponent: Fallback = JsonSchemaFallbackComponent, ...props } = this.props;
-    if (this.state.error) {
-      return <Fallback error={this.state.error} />;
-    }
-
-    return <JsonSchemaViewerComponent {...props} onError={this.onError} />;
-  }
-}
+export const JsonSchemaViewer = withErrorBoundary<IJsonSchemaViewer>(JsonSchemaViewerComponent, {
+  FallbackComponent: JsonSchemaFallbackComponent,
+  recoverableProps: ['schema', 'dereferencedSchema'],
+  reportErrors: false,
+});

src/components/__tests__/JsonSchemaViewer.spec.tsx

@@ -1,9 +1,9 @@
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 import * as React from 'react';
 
 import { JSONSchema4 } from 'json-schema';
-import { JsonSchemaViewerComponent, SchemaTree } from '../../components';
+import { JsonSchemaViewer, SchemaTree } from '../../components';
 import { isSchemaViewerEmpty } from '../../utils/isSchemaViewerEmpty';
 import { renderSchema } from '../../utils/renderSchema';
 
@@ -47,21 +47,25 @@ describe('JSON Schema Viewer component', () => {
 
   test('should render empty message if schema is empty', () => {
     (isSchemaViewerEmpty as jest.Mock).mockReturnValue(true);
-    const wrapper = shallow(<JsonSchemaViewerComponent schema={{}} onError={jest.fn()} />);
+    const wrapper = shallow(<JsonSchemaViewer schema={{}} onError={jest.fn()} />)
+      .dive()
+      .dive();
     expect(isSchemaViewerEmpty).toHaveBeenCalledWith({});
     expect(wrapper.find(SchemaTree)).not.toExist();
   });
 
   test('should render SchemaView if schema is provided', () => {
-    const wrapper = shallow(<JsonSchemaViewerComponent schema={schema as JSONSchema4} onError={jest.fn()} />);
+    const wrapper = shallow(<JsonSchemaViewer schema={schema as JSONSchema4} onError={jest.fn()} />)
+      .dive()
+      .dive();
     expect(isSchemaViewerEmpty).toHaveBeenCalledWith(schema);
     expect(wrapper.find(SchemaTree)).toExist();
   });
 
   test('should not perform full processing in a worker if provided schema has fewer nodes than maxRows', () => {
-    const wrapper = shallow(
-      <JsonSchemaViewerComponent schema={schema as JSONSchema4} maxRows={10} onError={jest.fn()} />,
-    );
+    const wrapper = shallow(<JsonSchemaViewer schema={schema as JSONSchema4} maxRows={10} onError={jest.fn()} />)
+      .dive()
+      .dive();
     expect(SchemaWorker.prototype.postMessage).not.toHaveBeenCalled();
     expect(wrapper.instance()).toHaveProperty('treeStore.nodes.length', 4);
   });
@@ -81,7 +85,9 @@ describe('JSON Schema Viewer component', () => {
       ],
     };
 
-    shallow(<JsonSchemaViewerComponent schema={schemaAllOf} maxRows={10} onError={jest.fn()} />);
+    shallow(<JsonSchemaViewer schema={schemaAllOf} maxRows={10} onError={jest.fn()} />)
+      .dive()
+      .dive();
 
     expect(SchemaWorker.prototype.postMessage).toHaveBeenCalledWith({
       instanceId: expect.any(String),
@@ -105,15 +111,17 @@ describe('JSON Schema Viewer component', () => {
       ],
     };
 
-    shallow(<JsonSchemaViewerComponent schema={schemaAllOf} maxRows={10} mergeAllOf={false} onError={jest.fn()} />);
+    shallow(<JsonSchemaViewer schema={schemaAllOf} maxRows={10} mergeAllOf={false} onError={jest.fn()} />)
+      .dive()
+      .dive();
 
     expect(SchemaWorker.prototype.postMessage).not.toHaveBeenCalledWith();
   });
 
   test('should pre-render maxRows nodes and perform full processing in a worker if provided schema has more nodes than maxRows', () => {
-    const wrapper = shallow(
-      <JsonSchemaViewerComponent schema={schema as JSONSchema4} maxRows={1} onError={jest.fn()} />,
-    );
+    const wrapper = shallow(<JsonSchemaViewer schema={schema as JSONSchema4} maxRows={1} onError={jest.fn()} />)
+      .dive()
+      .dive();
     expect(SchemaWorker.prototype.postMessage).toHaveBeenCalledWith({
       instanceId: expect.any(String),
       mergeAllOf: true,
@@ -166,17 +174,17 @@ describe('JSON Schema Viewer component', () => {
 
   test('should render all nodes on main thread when worker cannot be spawned regardless of maxRows or schema', () => {
     SchemaWorker.prototype.isShim = true;
-    const wrapper = shallow(
-      <JsonSchemaViewerComponent schema={schema as JSONSchema4} maxRows={1} onError={jest.fn()} />,
-    );
+    const wrapper = shallow(<JsonSchemaViewer schema={schema as JSONSchema4} maxRows={1} onError={jest.fn()} />)
+      .dive()
+      .dive();
 
     expect(SchemaWorker.prototype.postMessage).not.toHaveBeenCalled();
     expect(wrapper.instance()).toHaveProperty('treeStore.nodes.length', 4);
   });
 
   test('should handle exceptions that may occur during full rendering', () => {
     const onError = jest.fn();
-    shallow(<JsonSchemaViewerComponent schema={schema as JSONSchema4} maxRows={1} onError={onError} />);
+    const wrapper = mount(<JsonSchemaViewer schema={schema as JSONSchema4} maxRows={1} onError={onError} />);
 
     SchemaWorker.prototype.addEventListener.mock.calls[0][1]({
       data: {
@@ -186,13 +194,14 @@ describe('JSON Schema Viewer component', () => {
       },
     });
 
-    expect(onError).toHaveBeenCalledWith(new Error('error occurred'));
+    expect(onError).toHaveBeenCalledWith(new Error('error occurred'), null);
+    wrapper.unmount();
   });
 
   test('should not apply result of full processing in a worker if instance ids do not match', () => {
-    const wrapper = shallow(
-      <JsonSchemaViewerComponent schema={schema as JSONSchema4} maxRows={0} onError={jest.fn()} />,
-    );
+    const wrapper = shallow(<JsonSchemaViewer schema={schema as JSONSchema4} maxRows={0} onError={jest.fn()} />)
+      .dive()
+      .dive();
     expect(SchemaWorker.prototype.postMessage).toHaveBeenCalledWith({
       instanceId: expect.any(String),
       mergeAllOf: true,
@@ -212,15 +221,18 @@ describe('JSON Schema Viewer component', () => {
   });
 
   test('should create one shared instance of schema worker one mounted for a first time and keep it', () => {
-    const worker = (shallow(
-      <JsonSchemaViewerComponent schema={schema as JSONSchema4} maxRows={0} onError={jest.fn()} />,
-    ).instance()!.constructor as any).schemaWorker;
+    const worker = (shallow(<JsonSchemaViewer schema={schema as JSONSchema4} maxRows={0} onError={jest.fn()} />)
+      .dive()
+      .dive()
+      .instance()!.constructor as any).schemaWorker;
 
     expect(SchemaWorker).toHaveBeenCalledTimes(1);
 
     expect(worker).toBe(
-      (shallow(<JsonSchemaViewerComponent schema={schema as JSONSchema4} maxRows={0} onError={jest.fn()} />).instance()!
-        .constructor as any).schemaWorker,
+      (shallow(<JsonSchemaViewer schema={schema as JSONSchema4} maxRows={0} onError={jest.fn()} />)
+        .dive()
+        .dive()
+        .instance()!.constructor as any).schemaWorker,
     );
 
     expect(SchemaWorker).toHaveBeenCalledTimes(1);

yarn.lock

@@ -1851,6 +1851,13 @@
     unified "~8.3.2"
     unist-util-select "~2.0"
 
+"@stoplight/react-error-boundary@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@stoplight/react-error-boundary/-/react-error-boundary-1.0.0.tgz#758dbee1ae3afa8f2cc42f6fc82aefc9d4efaa67"
+  integrity sha512-UH5ZyNqzQp8w/fm8cpq0tmsc63xtMBFmfp7g6ZYW4+/Bhnm/T1RhRpG/5d7/3ZkMLiJ7avsoslbHJ2JU6geEDQ==
+  dependencies:
+    "@stoplight/types" "^11.1.0"
+
 "@stoplight/scripts@7.0.4":
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/@stoplight/scripts/-/scripts-7.0.4.tgz#0099f9f7ef8e2e480bc38cc646d196e15f4c33d2"
@@ -1941,6 +1948,13 @@
   dependencies:
     "@types/json-schema" "^7.0.3"
 
+"@stoplight/types@^11.1.0":
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/@stoplight/types/-/types-11.1.1.tgz#a92d1833adb580a72439f42ba73de8f560fd68b4"
+  integrity sha512-IU8U9y/uO548z15DX/Jl053u9VQG8gCwNtypuD4RtskUA7pvHZl4+zzGK3klgIcO6Ql3Jk4/fcrFaN9vjmdEWg==
+  dependencies:
+    "@types/json-schema" "^7.0.3"
+
 "@stoplight/ui-kit@^2.10.0":
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/@stoplight/ui-kit/-/ui-kit-2.10.0.tgz#fb19fae334349572e4dbe4f10bd2148d10bd0fbd"