From 6a8adb98461c07ecbe03e80c2d53b06c8e7eb8ea Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <64608510+PatrykKuniczak@users.noreply.github.com>
Date: Sun, 15 Oct 2023 09:03:01 +0200
Subject: [PATCH] feat(error-boundary): create errorBundary and refactor
 withSuspence (#196)

---
 src/pages/newtab/Newtab.tsx          |  6 +++-
 src/pages/popup/Popup.tsx            |  6 +++-
 src/shared/hoc/withErrorBoundary.tsx | 42 ++++++++++++++++++++++++++++
 src/shared/hoc/withSuspense.tsx      |  4 +--
 4 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 src/shared/hoc/withErrorBoundary.tsx

diff --git a/src/pages/newtab/Newtab.tsx b/src/pages/newtab/Newtab.tsx
index fc2ee04f1..34ef5deca 100644
--- a/src/pages/newtab/Newtab.tsx
+++ b/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>
+);
diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx
index a964b8cec..c5bbc7221 100644
--- a/src/pages/popup/Popup.tsx
+++ b/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>
+);
diff --git a/src/shared/hoc/withErrorBoundary.tsx b/src/shared/hoc/withErrorBoundary.tsx
new file mode 100644
index 000000000..f9bec9d72
--- /dev/null
+++ b/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>
+    );
+  };
+}
diff --git a/src/shared/hoc/withSuspense.tsx b/src/shared/hoc/withSuspense.tsx
index d8a5e40bc..762235d25 100644
--- a/src/shared/hoc/withSuspense.tsx
+++ b/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 (