feat(error-boundary): create errorBundary and refactor withSuspence (#…

…196)

src/pages/newtab/Newtab.tsx

@@ -5,6 +5,7 @@ import "@pages/newtab/Newtab.scss";
 import useStorage from "@src/shared/hooks/useStorage";
 import exampleThemeStorage from "@src/shared/storages/exampleThemeStorage";
 import withSuspense from "@src/shared/hoc/withSuspense";
+import withErrorBoundary from "@src/shared/hoc/withErrorBoundary";
 
 const Newtab = () => {
   const theme = useStorage(exampleThemeStorage);
@@ -41,4 +42,7 @@ const Newtab = () => {
   );
 };
 
-export default withSuspense(Newtab);
+export default withErrorBoundary(
+  withSuspense(Newtab, <div> Loading ... </div>),
+  <div> Error Occur </div>
+);

src/pages/popup/Popup.tsx

@@ -4,6 +4,7 @@ import "@pages/popup/Popup.css";
 import useStorage from "@src/shared/hooks/useStorage";
 import exampleThemeStorage from "@src/shared/storages/exampleThemeStorage";
 import withSuspense from "@src/shared/hoc/withSuspense";
+import withErrorBoundary from "@src/shared/hoc/withErrorBoundary";
 
 const Popup = () => {
   const theme = useStorage(exampleThemeStorage);
@@ -36,4 +37,7 @@ const Popup = () => {
   );
 };
 
-export default withSuspense(Popup);
+export default withErrorBoundary(
+  withSuspense(Popup, <div> Loading ... </div>),
+  <div> Error Occur </div>
+);

src/shared/hoc/withErrorBoundary.tsx

@@ -0,0 +1,42 @@
+import { Component, ComponentType, ReactElement } from "react";
+
+class ErrorBoundary extends Component<
+  {
+    children: ReactElement;
+    fallback: ReactElement;
+  },
+  {
+    hasError: boolean;
+  }
+> {
+  state = { hasError: false };
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error(error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default function withErrorBoundary<T extends Record<string, unknown>>(
+  Component: ComponentType<T>,
+  ErrorComponent: ReactElement
+) {
+  return function WithErrorBoundary(props: T) {
+    return (
+      <ErrorBoundary fallback={ErrorComponent}>
+        <Component {...props} />
+      </ErrorBoundary>
+    );
+  };
+}

src/shared/hoc/withSuspense.tsx

@@ -1,8 +1,8 @@
-import { ComponentType, ReactNode, Suspense } from "react";
+import { ComponentType, ReactElement, Suspense } from "react";
 
 export default function withSuspense<T extends Record<string, unknown>>(
   Component: ComponentType<T>,
-  SuspenseComponent: ReactNode = null
+  SuspenseComponent: ReactElement
 ) {
   return function WithSuspense(props: T) {
     return (