ref(react): Overload fallback prop

Author: AbhiPrasad

packages/react/src/errorboundary.tsx

@@ -4,21 +4,31 @@ import * as React from 'react';
 
 export const UNKNOWN_COMPONENT = 'unknown';
 
+export type FallbackRender = (fallback: {
+  error: Error | null;
+  componentStack: string | null;
+  resetError(): void;
+}) => React.ReactNode;
+
 export type ErrorBoundaryProps = {
   showDialog?: boolean;
   dialogOptions?: Sentry.ReportDialogOptions;
-  fallback?: React.ReactNode;
-  fallbackRender?(fallback: {
-    error: Error | null;
-    componentStack: string | null;
-    resetError(): void;
-  }): React.ReactNode;
+  // tslint:disable-next-line: no-null-undefined-union
+  fallback?: React.ReactNode | FallbackRender;
   onError?(error: Error, componentStack: string): void;
   onMount?(): void;
   onReset?(error: Error | null, componentStack: string | null): void;
   onUnmount?(error: Error | null, componentStack: string | null): void;
 };
 
+/*
+  fallbackRender?(fallback: {
+    error: Error | null;
+    componentStack: string | null;
+    resetError(): void;
+  }): React.ReactNode;
+*/
+
 type ErrorBoundaryState = {
   componentStack: string | null;
   error: Error | null;
@@ -71,16 +81,16 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
   };
 
   public render(): React.ReactNode {
-    const { fallback, fallbackRender } = this.props;
+    const { fallback } = this.props;
     const { error, componentStack } = this.state;
 
     if (error) {
-      if (typeof fallbackRender === 'function') {
-        return fallbackRender({ error, componentStack, resetError: this.resetErrorBoundary });
-      }
       if (React.isValidElement(fallback)) {
         return fallback;
       }
+      if (typeof fallback === 'function') {
+        return fallback({ error, componentStack, resetError: this.resetErrorBoundary }) as FallbackRender;
+      }
 
       // Fail gracefully if no fallback provided
       return null;

packages/react/test/errorboundary.test.tsx

@@ -42,17 +42,6 @@ describe('ErrorBoundary', () => {
     mockShowReportDialog.mockClear();
   });
 
-  it('renders null if not given a valid `fallbackRender` prop', () => {
-    const { container } = render(
-      // @ts-ignore
-      <ErrorBoundary fallbackRender={'ok'}>
-        <Bam />
-      </ErrorBoundary>,
-    );
-
-    expect(container.innerHTML).toBe('');
-  });
-
   it('renders null if not given a valid `fallback` prop', () => {
     const { container } = render(
       // @ts-ignore
@@ -126,12 +115,12 @@ describe('ErrorBoundary', () => {
       expect(container.innerHTML).toBe('<p>You have hit an error</p>');
     });
 
-    it('renders a fallbackRender component', async () => {
+    it('renders a render props component', async () => {
       let errorString = '';
       let compStack = '';
       const { container } = render(
         <TestApp
-          fallbackRender={({ error, componentStack }) => {
+          fallback={({ error, componentStack }) => {
             if (error && componentStack) {
               errorString = error.toString();
               compStack = componentStack;
@@ -205,7 +194,7 @@ describe('ErrorBoundary', () => {
       const { container } = render(
         <TestApp
           onReset={mockOnReset}
-          fallbackRender={({ resetError }) => <button data-testid="reset" onClick={resetError} />}
+          fallback={({ resetError }) => <button data-testid="reset" onClick={resetError} />}
         >
           <h1>children</h1>
         </TestApp>,