From 7b7f4ed58e3a11ce919daa8616644fde7b6604d4 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 25 Nov 2022 19:23:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20ErrorBoundary=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E9=87=8D=E8=AF=95=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/web/src/components/ErrorBoundary.tsx | 23 +++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/client/web/src/components/ErrorBoundary.tsx b/client/web/src/components/ErrorBoundary.tsx
index e313bb14..5c862407 100644
--- a/client/web/src/components/ErrorBoundary.tsx
+++ b/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>
             </>
           }
         />