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