feat(react): Add report dialog

Author: AbhiPrasad

packages/react/src/errorboundary.tsx

@@ -4,10 +4,12 @@ import * as React from 'react';
 export const FALLBACK_ERR_MESSAGE = 'No fallback component has been set';
 
 export type ErrorBoundaryProps = {
+  showDialog?: boolean;
+  dialogOptions?: Sentry.ReportDialogOptions;
   fallback?: React.ReactNode;
   fallbackRender?(error: Error | null, componentStack: string | null, resetErrorBoundary: () => void): React.ReactNode;
   onError?(error: Error, componentStack: string): void;
-  onMount?(error: Error | null, componentStack: string | null): void;
+  onMount?(): void;
   onReset?(error: Error | null, componentStack: string | null): void;
   onUnmount?(error: Error | null, componentStack: string | null): void;
 };
@@ -30,18 +32,20 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
       scope.setExtra('componentStack', componentStack);
       Sentry.captureException(error);
     });
-    const { onError } = this.props;
+    const { onError, showDialog, dialogOptions } = this.props;
     if (onError) {
       onError(error, componentStack);
     }
+    if (showDialog) {
+      Sentry.showReportDialog(dialogOptions);
+    }
     this.setState({ error, componentStack });
   }
 
   public componentDidMount(): void {
-    const { error, componentStack } = this.state;
     const { onMount } = this.props;
     if (onMount) {
-      onMount(error, componentStack);
+      onMount();
     }
   }
 

packages/react/test/errorboundary.test.tsx

@@ -1,31 +1,240 @@
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import * as React from 'react';
 
-import { ErrorBoundary, ErrorBoundaryProps } from '../src/errorboundary';
+import { ErrorBoundary, ErrorBoundaryProps, FALLBACK_ERR_MESSAGE } from '../src/errorboundary';
+
+const mockSetExtra = jest.fn();
+const mockCaptureException = jest.fn();
+const mockShowReportDialog = jest.fn();
+
+jest.mock('@sentry/browser', () => ({
+  captureException: (err: any) => {
+    mockCaptureException(err);
+  },
+  showReportDialog: (options: any) => {
+    mockShowReportDialog(options);
+  },
+  withScope: (callback: Function) => {
+    callback({
+      setExtra: mockSetExtra,
+    });
+  },
+}));
+
+const TestApp: React.FC<ErrorBoundaryProps> = ({ children, ...props }) => {
+  const [isError, setError] = React.useState(false);
+  return (
+    <ErrorBoundary {...props}>
+      {isError ? <Bam /> : children}
+      <button
+        data-testid="errorBtn"
+        onClick={() => {
+          setError(true);
+        }}
+      />
+    </ErrorBoundary>
+  );
+};
+
+function Bam(): JSX.Element {
+  throw new Error('boom');
+}
 
 describe('ErrorBoundary', () => {
-  const DEFAULT_PROPS: ErrorBoundaryProps = {
-    fallback: <h1>Error Component</h1>,
-    fallbackRender: (error: Error, componentStack: string, resetErrorBoundary: () => void) => (
-      <React.Fragment>
-        <h1>{error.toString()}</h1>
-        <h2>{componentStack}</h2>
-        <button onClick={resetErrorBoundary} />
-      </React.Fragment>
-    ),
-    onError: jest.fn(),
-    onReset: jest.fn(),
-  };
-
-  it('Renders children with no failure', () => {
-    function Bomb(): JSX.Element {
-      return <p>Testing children</p>;
-    }
+  const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
 
+  afterEach(() => {
+    consoleErrorSpy.mockClear();
+    mockSetExtra.mockClear();
+    mockCaptureException.mockClear();
+    mockShowReportDialog.mockClear();
+  });
+
+  it('throws an error if not given a valid `fallbackRender` prop', () => {
+    expect(() => {
+      render(
+        // @ts-ignore
+        <ErrorBoundary fallbackRender={'ok'}>
+          <Bam />
+        </ErrorBoundary>,
+      );
+    }).toThrowError(FALLBACK_ERR_MESSAGE);
+    expect(consoleErrorSpy).toHaveBeenCalled();
+  });
+
+  it('throws an error if not given a valid `fallback` prop', () => {
+    expect(() => {
+      render(
+        <ErrorBoundary fallback={new Error('true')}>
+          <Bam />
+        </ErrorBoundary>,
+      );
+    }).toThrowError(FALLBACK_ERR_MESSAGE);
+    expect(consoleErrorSpy).toHaveBeenCalled();
+  });
+
+  it('does not throw an error if a fallback is given', () => {
+    expect(() => {
+      render(
+        <ErrorBoundary fallback={<h1>Error Component</h1>}>
+          <h1>children</h1>
+        </ErrorBoundary>,
+      );
+    }).not.toThrowError();
+  });
+
+  it('calls `onMount` when mounted', () => {
+    const mockOnMount = jest.fn();
     render(
-      <ErrorBoundary>
-        <Bomb />
+      <ErrorBoundary fallback={<h1>Error Component</h1>} onMount={mockOnMount}>
+        <h1>children</h1>
       </ErrorBoundary>,
     );
+
+    expect(mockOnMount).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls `onUnmount` when unmounted', () => {
+    const mockOnUnmount = jest.fn();
+    const { unmount } = render(
+      <ErrorBoundary fallback={<h1>Error Component</h1>} onUnmount={mockOnUnmount}>
+        <h1>children</h1>
+      </ErrorBoundary>,
+    );
+
+    expect(mockOnUnmount).toHaveBeenCalledTimes(0);
+    unmount();
+    expect(mockOnUnmount).toHaveBeenCalledTimes(1);
+    expect(mockOnUnmount).toHaveBeenCalledWith(null, null);
+  });
+
+  it('renders children correctly when there is no error', () => {
+    const { baseElement } = render(
+      <ErrorBoundary fallback={<h1>Error Component</h1>}>
+        <h1>children</h1>
+      </ErrorBoundary>,
+    );
+
+    expect(baseElement.outerHTML).toContain('<h1>children</h1>');
+  });
+
+  describe('fallback', () => {
+    it('renders a fallback component', async () => {
+      const { baseElement } = render(
+        <TestApp fallback={<p>You have hit an error</p>}>
+          <h1>children</h1>
+        </TestApp>,
+      );
+
+      expect(baseElement.outerHTML).toContain('<h1>children</h1>');
+
+      const btn = screen.getByTestId('errorBtn');
+      fireEvent.click(btn);
+
+      expect(baseElement.outerHTML).not.toContain('<h1>children</h1>');
+      expect(baseElement.outerHTML).toContain('<p>You have hit an error</p>');
+    });
+
+    it('renders a fallbackRender component', async () => {
+      let errorString = '';
+      let compStack = '';
+      const { baseElement } = render(
+        <TestApp
+          fallbackRender={(error: Error, componentStack: string) => {
+            errorString = error.toString();
+            compStack = componentStack;
+            return <div>Fallback here</div>;
+          }}
+        >
+          <h1>children</h1>
+        </TestApp>,
+      );
+
+      expect(baseElement.outerHTML).toContain('<h1>children</h1>');
+
+      const btn = screen.getByTestId('errorBtn');
+      fireEvent.click(btn);
+
+      expect(baseElement.outerHTML).not.toContain('<h1>children</h1');
+      expect(baseElement.outerHTML).toContain('<div>Fallback here</div>');
+
+      expect(errorString).toBe('Error: boom');
+      expect(compStack).toBe(`
+    in Bam (created by TestApp)
+    in ErrorBoundary (created by TestApp)
+    in TestApp`);
+    });
+  });
+
+  describe('error', () => {
+    it('calls `componentDidCatch() when an error occurs`', () => {
+      const mockOnError = jest.fn();
+      render(
+        <TestApp fallback={<p>You have hit an error</p>} onError={mockOnError}>
+          <h1>children</h1>
+        </TestApp>,
+      );
+
+      expect(mockOnError).toHaveBeenCalledTimes(0);
+      expect(mockCaptureException).toHaveBeenCalledTimes(0);
+      expect(mockSetExtra).toHaveBeenCalledTimes(0);
+
+      const btn = screen.getByTestId('errorBtn');
+      fireEvent.click(btn);
+
+      expect(mockOnError).toHaveBeenCalledTimes(1);
+      expect(mockOnError).toHaveBeenCalledWith(expect.any(Error), expect.any(String));
+
+      expect(mockCaptureException).toHaveBeenCalledTimes(1);
+      expect(mockCaptureException).toHaveBeenCalledWith(expect.any(Error));
+
+      expect(mockSetExtra).toHaveBeenCalledTimes(1);
+      expect(mockSetExtra).toHaveBeenCalledWith('componentStack', expect.any(String));
+    });
+
+    it('shows a Sentry Report Dialog with correct options', () => {
+      const options = { title: 'custom title' };
+      render(
+        <TestApp fallback={<p>You have hit an error</p>} showDialog dialogOptions={options}>
+          <h1>children</h1>
+        </TestApp>,
+      );
+
+      expect(mockShowReportDialog).toHaveBeenCalledTimes(0);
+
+      const btn = screen.getByTestId('errorBtn');
+      fireEvent.click(btn);
+
+      expect(mockShowReportDialog).toHaveBeenCalledTimes(1);
+      expect(mockShowReportDialog).toHaveBeenCalledWith(options);
+    });
+
+    it('it resets to initial state when reset', async () => {
+      const mockOnReset = jest.fn();
+      const { baseElement, debug } = render(
+        <TestApp
+          onReset={mockOnReset}
+          fallbackRender={(_, __, resetErrorBoundary: () => void) => (
+            <button data-testid="reset" onClick={resetErrorBoundary} />
+          )}
+        >
+          <h1>children</h1>
+        </TestApp>,
+      );
+
+      expect(baseElement.outerHTML).toContain('<h1>children</h1>');
+      expect(mockOnReset).toHaveBeenCalledTimes(0);
+
+      const btn = screen.getByTestId('errorBtn');
+      fireEvent.click(btn);
+
+      expect(baseElement.outerHTML).toContain('<button data-testid="reset">');
+      expect(mockOnReset).toHaveBeenCalledTimes(0);
+
+      const reset = screen.getByTestId('reset');
+      fireEvent.click(reset);
+      expect(mockOnReset).toHaveBeenCalledTimes(1);
+      expect(mockOnReset).toHaveBeenCalledWith(expect.any(Error), expect.any(String));
+    });
   });
 });

packages/react/tslint.json

@@ -7,6 +7,8 @@
     ],
     "variable-name": false,
     "completed-docs": false,
-    "interface-over-type-literal": false
+    "interface-over-type-literal": false,
+    "jsx-no-lambda": false,
+    "jsx-boolean-value": false
   }
 }