feat(react): Add render key option

Author: AbhiPrasad

packages/react/src/errorboundary.tsx

@@ -9,16 +9,21 @@ export type ErrorBoundaryProps = {
   showDialog?: boolean;
   dialogOptions?: Sentry.ReportDialogOptions;
   fallback?: React.ReactNode;
-  fallbackRender?(error: Error | null, componentStack: string | null, resetErrorBoundary: () => void): React.ReactNode;
+  renderKey?: string | number;
+  fallbackRender?(fallback: {
+    error: Error | null;
+    componentStack: string | null;
+    resetError(): void;
+  }): React.ReactNode;
   onError?(error: Error, componentStack: string): void;
   onMount?(): void;
   onReset?(error: Error | null, componentStack: string | null): void;
   onUnmount?(error: Error | null, componentStack: string | null): void;
 };
 
 type ErrorBoundaryState = {
-  error: Error | null;
   componentStack: string | null;
+  error: Error | null;
 };
 
 const INITIAL_STATE = {
@@ -51,6 +56,17 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
     }
   }
 
+  public componentDidUpdate(prevProps: ErrorBoundaryProps): void {
+    const { error } = this.state;
+    const { renderKey, onReset } = this.props;
+    if (error !== null && !Object.is(renderKey, prevProps.renderKey)) {
+      if (onReset) {
+        onReset(this.state.error, this.state.componentStack);
+      }
+      this.setState(INITIAL_STATE);
+    }
+  }
+
   public componentWillUnmount(): void {
     const { error, componentStack } = this.state;
     const { onUnmount } = this.props;
@@ -73,7 +89,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
 
     if (error) {
       if (typeof fallbackRender === 'function') {
-        return fallbackRender(error, componentStack, this.resetErrorBoundary);
+        return fallbackRender({ error, componentStack, resetError: this.resetErrorBoundary });
       }
       if (React.isValidElement(fallback)) {
         return fallback;

packages/react/test/errorboundary.test.tsx

@@ -140,9 +140,11 @@ describe('ErrorBoundary', () => {
       let compStack = '';
       const { baseElement } = render(
         <TestApp
-          fallbackRender={(error: Error, componentStack: string) => {
-            errorString = error.toString();
-            compStack = componentStack;
+          fallbackRender={({ error, componentStack }) => {
+            if (error && componentStack) {
+              errorString = error.toString();
+              compStack = componentStack;
+            }
             return <div>Fallback here</div>;
           }}
         >
@@ -209,14 +211,12 @@ describe('ErrorBoundary', () => {
       expect(mockShowReportDialog).toHaveBeenCalledWith(options);
     });
 
-    it('it resets to initial state when reset', async () => {
+    it('resets to initial state when reset', () => {
       const mockOnReset = jest.fn();
-      const { baseElement, debug } = render(
+      const { baseElement } = render(
         <TestApp
           onReset={mockOnReset}
-          fallbackRender={(_, __, resetErrorBoundary: () => void) => (
-            <button data-testid="reset" onClick={resetErrorBoundary} />
-          )}
+          fallbackRender={({ resetError }) => <button data-testid="reset" onClick={resetError} />}
         >
           <h1>children</h1>
         </TestApp>,