feat(react): Setup basic error boundary props

Author: AbhiPrasad

packages/react/src/errorboundary.tsx

@@ -1,34 +1,61 @@
-import * as React from 'react';
 import * as Sentry from '@sentry/browser';
+import * as React from 'react';
 
-interface ErrorBoundaryProps {}
+export type ErrorBoundaryProps = {
+  fallback?: React.ReactNode;
+  fallbackRender?(error: Error | null, componentStack: string | null, resetErrorBoundary: () => void): React.ReactNode;
+  onError?(error: Error, componentStack: string): void;
+  onReset?(error: Error | null, componentStack: string | null): void;
+};
 
-interface ErrorBoundaryState {
-  hasError: boolean;
-}
+type ErrorBoundaryState = {
+  error: Error | null;
+  componentStack: string | null;
+};
+
+const INITIAL_STATE = {
+  componentStack: null,
+  error: null,
+};
 
 class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-    this.state = {
-      hasError: false,
-    };
-  }
+  public state: ErrorBoundaryState = INITIAL_STATE;
 
-  public static getDerivedStateFromError(_: Error): ErrorBoundaryState {
-    return { hasError: true };
+  public componentDidCatch(error: Error, { componentStack }: React.ErrorInfo): void {
+    Sentry.withScope(scope => {
+      scope.setExtra('componentStack', componentStack);
+      Sentry.captureException(error);
+    });
+    const { onError } = this.props;
+    if (onError) {
+      onError(error, componentStack);
+    }
+    this.setState({ error, componentStack });
   }
 
-  public componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
-    Sentry.captureException(Error);
-    console.log(error);
-    console.log(errorInfo.componentStack);
-  }
+  public resetErrorBoundary = () => {
+    const { onReset } = this.props;
+    if (onReset) {
+      onReset(this.state.error, this.state.componentStack);
+    }
+    this.setState(INITIAL_STATE);
+  };
 
   public render(): React.ReactNode {
-    if (this.state.hasError) {
-      return null;
+    const { fallback, fallbackRender } = this.props;
+    const { error, componentStack } = this.state;
+
+    if (error) {
+      if (typeof fallbackRender === 'function') {
+        return fallbackRender(error, componentStack, this.resetErrorBoundary);
+      }
+      if (React.isValidElement(fallback)) {
+        return fallback;
+      }
+
+      throw new Error('No fallback component has been set');
     }
+
     return this.props.children;
   }
 }

packages/react/src/profiler.tsx

@@ -56,9 +56,9 @@ const getInitActivity = (name: string): number | null => {
   return null;
 };
 
-interface ProfilerProps {
+export type ProfilerProps = {
   name: string;
-}
+};
 
 class Profiler extends React.Component<ProfilerProps> {
   public activity: number | null;

packages/react/test/errorboundary.test.tsx

@@ -1,14 +1,28 @@
+import { render } from '@testing-library/react';
 import * as React from 'react';
 
-import { ErrorBoundary } from '../src/errorboundary';
+import { ErrorBoundary, ErrorBoundaryProps } from '../src/errorboundary';
 
 describe('ErrorBoundary', () => {
-  it('Does not fail', () => {
-    function Bomb() {
-      return <h1>{new Error('💥 CABOOM 💥')}</h1>;
+  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>;
     }
 
-    create(
+    render(
       <ErrorBoundary>
         <Bomb />
       </ErrorBoundary>,

packages/react/tslint.json

@@ -6,6 +6,7 @@
       "dev"
     ],
     "variable-name": false,
-    "completed-docs": false
+    "completed-docs": false,
+    "interface-over-type-literal": false
   }
 }