From f038c683b0713aa068f6383b3bc66a0f59b4f526 Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Tue, 14 Mar 2023 22:06:06 +0800
Subject: [PATCH] feat: add error catcher component

---
 src/common/component/ErrorCatcher.tsx         | 27 +++++++++++++++++++
 .../component/StyledSettingContainer.tsx      |  3 +++
 src/routes/chat/index.tsx                     |  5 ++--
 3 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 src/common/component/ErrorCatcher.tsx

diff --git a/src/common/component/ErrorCatcher.tsx b/src/common/component/ErrorCatcher.tsx
new file mode 100644
index 00000000..21ddcca8
--- /dev/null
+++ b/src/common/component/ErrorCatcher.tsx
@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react';
+import { ErrorBoundary } from "react-error-boundary";
+
+type FallbackProps = {
+    error: Error,
+    resetErrorBoundary: (...args: Array<unknown>) => void
+}
+function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
+    return (
+        <div role="alert" className='text-lg text-red-600'>
+            <p>Something went wrong:</p>
+            <pre>{error.message}</pre>
+            <button onClick={resetErrorBoundary}>Try again</button>
+        </div>
+    );
+}
+type Props = {
+    children: ReactNode
+}
+
+const ErrorCatcher = ({ children }: Props) => {
+    return (
+        <ErrorBoundary FallbackComponent={ErrorFallback}>{children}</ErrorBoundary>
+    );
+};
+
+export default ErrorCatcher;
\ No newline at end of file
diff --git a/src/common/component/StyledSettingContainer.tsx b/src/common/component/StyledSettingContainer.tsx
index d0a0d5be..229b0a15 100644
--- a/src/common/component/StyledSettingContainer.tsx
+++ b/src/common/component/StyledSettingContainer.tsx
@@ -5,6 +5,7 @@ import { Nav } from "../../routes/settingChannel/navs";
 import clsx from "clsx";
 import GoBackNav from "./GoBackNav";
 import MobileNavs from "../../routes/home/MobileNavs";
+// import ErrorCatcher from "./ErrorCatcher";
 export interface Danger {
   title: string;
   handler: () => void;
@@ -69,7 +70,9 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
         <div className={clsx("relative bg-white w-full max-h-full overflow-auto px-4 md:px-8 py-2 md:py-8 dark:bg-gray-700", !nav ? "hidden md:block" : "!pb-4")}>
           <GoBackNav path={pathPrefix} className="!left-1 top-1.5" />
           {nav && <h4 className="font-bold text-xl text-center md:text-left text-gray-600 mb-4 md:mb-8 pl-4 md:pl-0 dark:text-gray-100">{nav.title}</h4>}
+          {/* <ErrorCatcher> */}
           {children}
+          {/* </ErrorCatcher> */}
         </div>
       </div>
       {!nav && <MobileNavs />}
diff --git a/src/routes/chat/index.tsx b/src/routes/chat/index.tsx
index 99c6f2b9..5074c797 100644
--- a/src/routes/chat/index.tsx
+++ b/src/routes/chat/index.tsx
@@ -13,6 +13,7 @@ import { useAppSelector } from "../../app/store";
 import GuestBlankPlaceholder from "./GuestBlankPlaceholder";
 import GuestChannelChat from "./GuestChannelChat";
 import GuestSessionList from "./GuestSessionList";
+import ErrorCatcher from "../../common/component/ErrorCatcher";
 
 function ChatPage() {
   const isHomePath = useMatch(`/`);
@@ -49,7 +50,7 @@ function ChatPage() {
   const placeholderVisible = channel_id == 0 && user_id == 0;
   const isMainPath = isHomePath || isChatHomePath;
   return (
-    <>
+    <ErrorCatcher>
       {channelModalVisible && (
         <ChannelModal closeModal={toggleChannelModalVisible} personal={true} />
       )}
@@ -76,7 +77,7 @@ function ChatPage() {
           {user_id !== 0 && <DMChat uid={+user_id} />}
         </div>
       </div>
-    </>
+    </ErrorCatcher>
   );
 }
 export default memo(ChatPage);