feat: refactor errorBoundary (#308)

* feat: refactor errorBoundary

* feat: update ErrorBoundaryState interface name

---------

Co-authored-by: jialan <[email protected]>

Author: JackWang032

src/errorBoundary/__tests__/errorBoundary.test.tsx

@@ -37,9 +37,24 @@ describe('test ErrorBoundary', () => {
     });
     // 测试发生错误情况
     test('should render error when some error occur', () => {
-        const wrapper = render(<ErrorBoundary>{<ThrowError />}</ErrorBoundary>);
+        const errorFn = jest.fn();
+        const wrapper = render(
+            <ErrorBoundary onError={(err) => errorFn(err)}>
+                <ThrowError />
+            </ErrorBoundary>
+        );
         const element = wrapper.getByText('刷新');
         expect(element).toBeInTheDocument();
         expect(console.error).toHaveBeenCalledTimes(2);
+        expect(errorFn.mock.calls[0][0].message).toEqual('测试error, 请忽略');
+    });
+
+    test('should render custom error page', () => {
+        const wrapper = render(
+            <ErrorBoundary errorPage={<div>这是自定义错误页面</div>}>
+                <ThrowError />
+            </ErrorBoundary>
+        );
+        expect(wrapper.getByText('这是自定义错误页面')).toBeInTheDocument();
     });
 });

src/errorBoundary/demos/basic.tsx

@@ -1,45 +1,39 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ErrorBoundary } from 'dt-react-component';
+import { message } from 'antd';
 
-class ThrowError extends React.Component {
-    state = {
-        count: 0,
-    };
-    render() {
-        const { count } = this.state;
-        if (count % 2) throw new Error('test error');
-        else {
-            return (
-                <div
-                    style={{
-                        display: 'flex',
-                        flexDirection: 'column',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                    }}
-                >
-                    <button
-                        style={{
-                            border: 'none',
-                            backgroundColor: '#1890ff',
-                            cursor: 'pointer',
-                            height: '32px',
-                            borderRadius: '4px',
-                        }}
-                        onClick={() => this.setState({ count: count + 1 })}
-                    >
-                        catch error
-                    </button>
-                    <h2>hello, dt-react-component</h2>
-                </div>
-            );
-        }
-    }
-}
+const ThrowError = () => {
+    const [count, setCount] = useState(0);
+    if (count % 2) throw new Error('test error');
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+            }}
+        >
+            <button
+                style={{
+                    border: 'none',
+                    backgroundColor: '#1890ff',
+                    cursor: 'pointer',
+                    height: '32px',
+                    borderRadius: '4px',
+                }}
+                onClick={() => setCount((count) => count + 1)}
+            >
+                触发异常
+            </button>
+            <h2>hello, dt-react-component</h2>
+        </div>
+    );
+};
 
 export default () => {
     return (
-        <ErrorBoundary>
+        <ErrorBoundary onError={(err) => message.error('捕获到错误：' + err.message)}>
             <ThrowError />
         </ErrorBoundary>
     );

src/errorBoundary/demos/customErrorPage.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { ErrorBoundary } from 'dt-react-component';
+import { message } from 'antd';
+
+const ThrowError = () => {
+    const [count, setCount] = useState(0);
+    if (count % 2) throw new Error('test error');
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+            }}
+        >
+            <button
+                style={{
+                    border: 'none',
+                    backgroundColor: '#1890ff',
+                    cursor: 'pointer',
+                    height: '32px',
+                    borderRadius: '4px',
+                }}
+                onClick={() => setCount((count) => count + 1)}
+            >
+                触发异常
+            </button>
+            <h2>hello, dt-react-component</h2>
+        </div>
+    );
+};
+
+const ErrorPage = () => {
+    return (
+        <div style={{ textAlign: 'center' }}>
+            <h2>这是自定义捕获异常页面</h2>
+        </div>
+    );
+};
+
+export default () => {
+    return (
+        <ErrorBoundary
+            onError={(err) => message.error('捕获到错误：' + err.message)}
+            errorPage={<ErrorPage />}
+        >
+            <ThrowError />
+        </ErrorBoundary>
+    );
+};

src/errorBoundary/index.md

@@ -3,7 +3,7 @@ title: ErrorBoundary 错误边界
 group: 组件
 toc: content
 demo:
-    cols: 2
+    cols: 1
 ---
 
 # ErrorBoundary 错误边界
@@ -14,10 +14,13 @@ demo:
 
 ## 示例
 
-<code src="./demos/basic.tsx" iframe="true"></code>
+<code src="./demos/basic.tsx" iframe="true">基本使用</code>
+<code src="./demos/customErrorPage.tsx" iframe="true" description='可以自定义渲染错误处理页面'>自定义错误页面</code>
 
 ## API
 
-| 参数     | 说明   | 类型              | 默认值 |
-| -------- | ------ | ----------------- | ------ |
-| children | 子组件 | `React.ReactNode` | -      |
+| 参数      | 说明               | 类型                     | 默认值          |
+| --------- | ------------------ | ------------------------ | --------------- |
+| children  | 子组件             | `React.ReactNode`        | -               |
+| errorPage | 自定义错误展示页面 | `React.ReactNode`        | `<LoadError />` |
+| onError   | 发生错误捕获时触发 | `(error: Error) => void` | -               |

src/errorBoundary/index.tsx

@@ -1,33 +1,39 @@
 import React from 'react';
-import LoadError from '../loadError';
+import LoadError from './loadError';
 
-interface ErrorBoundaryProps {
+interface IErrorBoundaryProps {
     children?: React.ReactNode;
+    errorPage?: React.ReactNode;
+    onError?: (error: Error) => void;
 }
 
-interface ErrorBoundaryStates {
+interface IErrorBoundaryState {
     hasError: boolean;
 }
 export default class ErrorBoundary extends React.Component<
-    ErrorBoundaryProps,
-    ErrorBoundaryStates
+    IErrorBoundaryProps,
+    IErrorBoundaryState
 > {
     state = { hasError: false };
     static getDerivedStateFromError(_error: any) {
         // Update state so the next render will show the fallback UI.
         return { hasError: true };
     }
 
-    componentDidCatch(error: any, errorInfo: any) {
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
         this.setState({ hasError: true });
+        this.props.onError?.(error);
         console.log(error);
         console.log(errorInfo);
     }
 
     render() {
-        if (this.state.hasError) {
-            return <LoadError />;
+        const { children, errorPage = <LoadError /> } = this.props;
+        const { hasError } = this.state;
+
+        if (hasError) {
+            return errorPage;
         }
-        return this.props.children;
+        return children;
     }
 }

src/loadError/index.tsx src/errorBoundary/loadError.tsxsrc/loadError/index.tsx renamed to src/errorBoundary/loadError.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const LoadError: React.FC = function () {
     return (
-        <div className="error" data-testid="test-error">
+        <div className="dtc-error" data-testid="test-error">
             <div>
                 
                 <h2 style={{ textAlign: 'center' }} data-testid="test-error">

src/index.ts

@@ -11,7 +11,7 @@ export { default as Form } from './form';
 export { default as Fullscreen } from './fullscreen';
 export { default as GlobalLoading } from './globalLoading';
 export { default as KeyEventListener } from './keyEventListener';
-export { default as LoadError } from './loadError';
+export { default as LoadError } from './errorBoundary/loadError';
 export { default as MarkdownRender } from './markdownRender';
 export { default as ModalWithForm } from './modalWithForm';
 export { default as MultiSearchInput } from './multiSearchInput';