feat: add error catcher component

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;

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 />}

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);