feat: ErrorBoundary增加重试功能

client/web/src/components/ErrorBoundary.tsx

@@ -1,3 +1,4 @@
+import { Button } from 'antd';
 import React, { PropsWithChildren } from 'react';
 import { t } from 'tailchat-shared';
 import { Problem } from './Problem';
@@ -7,6 +8,13 @@ interface ErrorBoundaryProps {
   description?: string;
 }
 
+const defaultState = {
+  error: undefined,
+  info: {
+    componentStack: '',
+  },
+};
+
 export class ErrorBoundary extends React.Component<
   PropsWithChildren<ErrorBoundaryProps>,
   {
@@ -16,17 +24,16 @@ export class ErrorBoundary extends React.Component<
     };
   }
 > {
-  state = {
-    error: undefined,
-    info: {
-      componentStack: '',
-    },
-  };
+  state = defaultState;
 
   componentDidCatch(error: Error | null, info: any) {
     this.setState({ error, info });
   }
 
+  reset = () => {
+    this.setState(defaultState);
+  };
+
   render() {
     const { message, description, children } = this.props;
     const { error, info } = this.state;
@@ -36,6 +43,7 @@ export class ErrorBoundary extends React.Component<
       typeof message === 'undefined' ? (error || '').toString() : message;
     const errorDescription =
       typeof description === 'undefined' ? componentStack : description;
+
     if (error) {
       return (
         <Problem
@@ -43,6 +51,9 @@ export class ErrorBoundary extends React.Component<
             <>
               <h3>{t('页面出现了一些问题')}</h3>
               <p title={errorDescription ?? ''}>{errorMessage}</p>
+              <Button size="small" onClick={this.reset}>
+                {t('重试')}
+              </Button>
             </>
           }
         />