From b38af5820c5762c8c4127062c28de8f37383fbd6 Mon Sep 17 00:00:00 2001
From: yyb <yyb1033@icloud.com>
Date: Mon, 19 Aug 2024 21:46:28 +0800
Subject: [PATCH] chore: new error boundary style

---
 src/component/PageWrapper/PageWrapper.tsx | 30 ++++++++++++-----------
 src/lib/ErrorBoundary.tsx                 |  3 ++-
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/component/PageWrapper/PageWrapper.tsx b/src/component/PageWrapper/PageWrapper.tsx
index 97efc11..47e2a62 100644
--- a/src/component/PageWrapper/PageWrapper.tsx
+++ b/src/component/PageWrapper/PageWrapper.tsx
@@ -78,18 +78,20 @@ const PageWrapperRaw: FC<{
   const ratio = height / width;
 
   return (
-    <div ref={ref} className="page-wrapper" data-preview={preview}>
-      <svg className="size-holder" viewBox={`0 0 100 ${ratio * 100}`} />
-      {drawShow && (
-        <DrawWrapper
-          drawState={drawState}
-          otherStates={otherStates}
-          updateState={updateState}
-          imgSrc={fullImg || thumbnail}
-          preview={preview}
-        />
-      )}
-    </div>
+    <ErrorBoundary>
+      <div ref={ref} className="page-wrapper" data-preview={preview}>
+        <svg className="size-holder" viewBox={`0 0 100 ${ratio * 100}`} />
+        {drawShow && (
+          <DrawWrapper
+            drawState={drawState}
+            otherStates={otherStates}
+            updateState={updateState}
+            imgSrc={fullImg || thumbnail}
+            preview={preview}
+          />
+        )}
+      </div>
+    </ErrorBoundary>
   );
 };
 PageWrapperRaw.displayName = "PageWrapper";
@@ -139,7 +141,7 @@ const DrawWrapper: FC<{
       readonly
     />
   ) : (
-    <ErrorBoundary>
+    <>
       <Draw
         drawState={drawState}
         otherStates={otherStates}
@@ -162,6 +164,6 @@ const DrawWrapper: FC<{
           renderSlow={renderSlow}
         />
       )}
-    </ErrorBoundary>
+    </>
   );
 };
diff --git a/src/lib/ErrorBoundary.tsx b/src/lib/ErrorBoundary.tsx
index 3fb4c8c..6b8dd8e 100644
--- a/src/lib/ErrorBoundary.tsx
+++ b/src/lib/ErrorBoundary.tsx
@@ -1,3 +1,4 @@
+import { Result } from "antd";
 import { Component, ErrorInfo, ReactNode } from "react";
 
 interface Props {
@@ -23,7 +24,7 @@ export class ErrorBoundary extends Component<Props, State> {
 
   public render() {
     if (this.state.hasError) {
-      return <p>Error</p>;
+      return <Result status="error" title="Something went wrong." />;
     }
 
     return this.props.children;