feat: include FallbackComponent in ErrorBoundaryProvider (#4)

* feat: include FallbackComponent in ErrorBoundaryProvider

* chore: pr feedback

Author: P0lip

src/ErrorBoundary.tsx

@@ -39,9 +39,9 @@ export class ErrorBoundary<P extends object = {}> extends React.PureComponent<
     if (this.props.reportErrors !== false) {
       try {
         if (errorInfo !== null) {
-          this.context.error(error.message, { errorInfo });
+          this.context.reporter.error(error.message, { errorInfo });
         } else {
-          this.context.error(error);
+          this.context.reporter.error(error);
         }
       } catch (ex) {
         console.error('Error could not be reported', ex);
@@ -76,7 +76,7 @@ export class ErrorBoundary<P extends object = {}> extends React.PureComponent<
 
   public render() {
     const {
-      props: { FallbackComponent: Fallback = FallbackComponent, children },
+      props: { FallbackComponent: Fallback = this.context.FallbackComponent || FallbackComponent, children },
       state: { error, componentStack },
     } = this;
 

src/ErrorBoundaryProvider.tsx

@@ -1,9 +1,18 @@
 import { ICoreReportingAPI } from '@stoplight/reporter';
 import * as React from 'react';
+import { FallbackComponent } from './FallbackComponent';
+import { FallbackProps } from './types';
 
-export const ErrorBoundaryContext = React.createContext<ICoreReportingAPI>(console);
+export type ErrorBoundaryContext = {
+  reporter: ICoreReportingAPI;
+  FallbackComponent?: React.ElementType<FallbackProps>;
+};
 
-export const ErrorBoundaryProvider: React.FunctionComponent<{ reporter: ICoreReportingAPI }> = ({
-  reporter,
-  children,
-}) => <ErrorBoundaryContext.Provider value={reporter}>{children}</ErrorBoundaryContext.Provider>;
+export const ErrorBoundaryContext = React.createContext<ErrorBoundaryContext>({
+  reporter: console,
+  FallbackComponent,
+});
+
+export const ErrorBoundaryProvider: React.FunctionComponent<ErrorBoundaryContext> = ({ children, ...props }) => (
+  <ErrorBoundaryContext.Provider value={props}>{children}</ErrorBoundaryContext.Provider>
+);

src/__tests__/ErrorBoundary.test.tsx

@@ -115,26 +115,73 @@ describe('ErrorBoundary component', () => {
     });
 
     describe('and a custom fallback component is provided', () => {
-      it('renders it pass error-related props', () => {
-        const CustomFallbackComponent = () => <div>foo</div>;
-
-        const wrapper = mount(
-          <ErrorBoundaryProvider reporter={reporter}>
-            <ErrorBoundary FallbackComponent={CustomFallbackComponent}>
-              <TestComponent value={0} />
-            </ErrorBoundary>
-          </ErrorBoundaryProvider>,
-        );
+      describe('at the props level', () => {
+        it('renders it pass error-related props', () => {
+          const CustomFallbackComponent = () => <div>foo</div>;
+
+          const wrapper = mount(
+            <ErrorBoundaryProvider reporter={reporter}>
+              <ErrorBoundary FallbackComponent={CustomFallbackComponent}>
+                <TestComponent value={0} />
+              </ErrorBoundary>
+            </ErrorBoundaryProvider>,
+          );
+
+          expect(wrapper.find(FallbackComponent)).not.toExist(); // makes sure we don't render the original one
+          expect(wrapper.find(CustomFallbackComponent)).toExist();
+          expect(wrapper.find(CustomFallbackComponent)).toHaveProp({
+            error: ex,
+            componentStack: expect.stringContaining('in TestComponent'),
+            tryRecovering: (wrapper.find(ErrorBoundary).instance() as any).recover,
+          });
+
+          wrapper.unmount();
+        });
+      });
 
-        expect(wrapper.find(FallbackComponent)).not.toExist(); // makes sure we don't render the original one
-        expect(wrapper.find(CustomFallbackComponent)).toExist();
-        expect(wrapper.find(CustomFallbackComponent)).toHaveProp({
-          error: ex,
-          componentStack: expect.stringContaining('in TestComponent'),
-          tryRecovering: (wrapper.find(ErrorBoundary).instance() as any).recover,
+      describe('at the provider level', () => {
+        it('renders it pass error-related props', () => {
+          const CustomFallbackComponent = () => <div>foo</div>;
+
+          const wrapper = mount(
+            <ErrorBoundaryProvider reporter={reporter} FallbackComponent={CustomFallbackComponent}>
+              >
+              <ErrorBoundary>
+                <TestComponent value={0} />
+              </ErrorBoundary>
+            </ErrorBoundaryProvider>,
+          );
+
+          expect(wrapper.find(FallbackComponent)).not.toExist(); // makes sure we don't render the original one
+          expect(wrapper.find(CustomFallbackComponent)).toExist();
+          expect(wrapper.find(CustomFallbackComponent)).toHaveProp({
+            error: ex,
+            componentStack: expect.stringContaining('in TestComponent'),
+            tryRecovering: (wrapper.find(ErrorBoundary).instance() as any).recover,
+          });
+
+          wrapper.unmount();
         });
+      });
 
-        wrapper.unmount();
+      describe('at both the provider and props level', () => {
+        it('prefers the props one', () => {
+          const CustomFallbackContextComponent = () => <div>context!</div>;
+          const CustomFallbackPropsComponent = () => <div>level!</div>;
+
+          const wrapper = mount(
+            <ErrorBoundaryProvider reporter={reporter} FallbackComponent={CustomFallbackContextComponent}>
+              <ErrorBoundary FallbackComponent={CustomFallbackPropsComponent}>
+                <TestComponent value={0} />
+              </ErrorBoundary>
+            </ErrorBoundaryProvider>,
+          );
+
+          expect(wrapper.find(FallbackComponent)).not.toExist(); // makes sure we don't render the original one
+          expect(wrapper.find(CustomFallbackContextComponent)).not.toExist();
+          expect(wrapper.find(CustomFallbackPropsComponent)).toExist();
+          wrapper.unmount();
+        });
       });
 
       it('fallback component can try to recover', () => {

src/hooks/__tests__/useReporter.test.ts

@@ -3,5 +3,5 @@ import { useContext } from 'react';
 import { ErrorBoundaryContext } from '../ErrorBoundaryProvider';
 
 export const useReporter = (): ICoreReportingAPI => {
-  return useContext<ICoreReportingAPI>(ErrorBoundaryContext);
+  return useContext(ErrorBoundaryContext).reporter;
 };