feat: [ErrorBoundary] support FallbackComponent props

Author: akai

src/components/ErrorBoundary/index.tsx

@@ -1,23 +1,42 @@
 import React from 'react';
 
-export interface ErrorBoundaryProps {
-  fallback?: React.ReactNode;
-}
+export type ErrorBoundaryState = {
+  error: Error | null;
+  errorInfo: React.ErrorInfo | null;
+};
+
+type FallbackProps = ErrorBoundaryState;
+
+export type ErrorBoundaryProps = {
+  FallbackComponent?: React.ComponentType<FallbackProps>;
+  [k: string]: any;
+};
 
-export class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
-  state = { hasError: false };
+export class ErrorBoundary extends React.Component<
+  React.PropsWithRef<React.PropsWithChildren<ErrorBoundaryProps>>,
+  ErrorBoundaryState
+> {
+  state = {
+    error: null,
+    errorInfo: null,
+  };
 
-  static getDerivedStateFromError() {
-    return { hasError: true };
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    this.setState({ error, errorInfo });
   }
 
   render() {
-    const { fallback, children } = this.props;
-    const { hasError } = this.state;
+    const { FallbackComponent, children, ...rest } = this.props;
+    const { error, errorInfo } = this.state;
 
-    if (hasError) {
-      return fallback || null;
+    if (errorInfo) {
+      if (FallbackComponent) {
+        return <FallbackComponent error={error} errorInfo={errorInfo} {...rest} />;
+      }
+
+      return null;
     }
+
     return children;
   }
 }

src/index.ts

@@ -30,6 +30,8 @@ export { Divider } from './components/Divider';
 export type { DividerProps } from './components/Divider';
 export { Empty } from './components/Empty';
 export type { EmptyProps } from './components/Empty';
+export { ErrorBoundary } from './components/ErrorBoundary';
+export type { ErrorBoundaryProps } from './components/ErrorBoundary';
 export { Flex, FlexItem } from './components/Flex';
 export type { FlexProps, FlexItemProps } from './components/Flex';
 export { Form, FormActions, FormItem } from './components/Form';

storybook/stories/ErrorBoundary.stories.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Meta } from '@storybook/react/types-6-0';
+
+import { ErrorBoundary } from '../../src';
+
+export default {
+  title: 'ErrorBoundary',
+  component: ErrorBoundary,
+  decorators: [
+    (Story) => (
+      <div>
+        <h3>My title</h3>
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta;
+
+export const WillCrashed = () => <BuggyCounter />;
+
+export const NoFallback = () => (
+  <ErrorBoundary>
+    <BuggyCounter />
+  </ErrorBoundary>
+);
+
+export const FallbackComponent = () => (
+  <div>
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <BuggyCounter />
+    </ErrorBoundary>
+  </div>
+);
+
+export const NoError = (args) => (
+  <ErrorBoundary {...args}>
+    <p>no error</p>
+  </ErrorBoundary>
+);
+
+// https://codepen.io/gaearon/pen/wqvxGa?editors=0010
+class BuggyCounter extends React.Component<{}, { counter: number }> {
+  state = { counter: 0 };
+
+  handleClick = () => {
+    this.setState(({ counter }) => ({
+      counter: counter + 1,
+    }));
+  };
+
+  render() {
+    const { counter } = this.state;
+    if (counter === 5) {
+      // Simulate a JS error
+      throw new Error('I crashed!');
+    }
+    return <h1 onClick={this.handleClick}>{counter}</h1>;
+  }
+}
+
+function ErrorFallback({ error, errorInfo }) {
+  return (
+    <div>
+      <h2>Something went wrong.</h2>
+      <details style={{ whiteSpace: 'pre-wrap' }}>
+        {error && error.toString()}
+        <br />
+        {errorInfo.componentStack}
+      </details>
+    </div>
+  );
+}