From c0b65bb7d71d8f3093bfdab3768b99c6e5fe5fce Mon Sep 17 00:00:00 2001
From: Sonny <sonnyasdev@gmail.com>
Date: Wed, 28 Jun 2023 22:53:08 +0200
Subject: [PATCH] fix: error not correctly handled client side

---
 package-lock.json                   | 12 ++++++++++++
 package.json                        |  1 +
 src/components/AppErrorBoundary.tsx | 22 ++++++++++++++++++++++
 src/lib/api/handler.ts              |  2 +-
 src/pages/_app.tsx                  |  6 +++++-
 src/utils/front.ts                  |  8 ++++----
 6 files changed, 45 insertions(+), 6 deletions(-)
 create mode 100644 src/components/AppErrorBoundary.tsx

diff --git a/package-lock.json b/package-lock.json
index d858667..f3df2e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "nprogress": "^0.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-error-boundary": "^4.0.10",
         "react-hotkeys-hook": "^4.4.0",
         "react-icons": "^4.9.0",
         "react-select": "^5.7.3",
@@ -6099,6 +6100,17 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.10.tgz",
+      "integrity": "sha512-pvVKdi77j2OoPHo+p3rorgE43OjDWiqFkaqkJz8sJKK6uf/u8xtzuaVfj5qJ2JnDLIgF1De3zY5AJDijp+LVPA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-hotkeys-hook": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.4.0.tgz",
diff --git a/package.json b/package.json
index acba2bf..1ff70b0 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "nprogress": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.10",
     "react-hotkeys-hook": "^4.4.0",
     "react-icons": "^4.9.0",
     "react-select": "^5.7.3",
diff --git a/src/components/AppErrorBoundary.tsx b/src/components/AppErrorBoundary.tsx
new file mode 100644
index 0000000..e005078
--- /dev/null
+++ b/src/components/AppErrorBoundary.tsx
@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+
+function fallbackRender({ error, resetErrorBoundary }) {
+  return (
+    <div role="alert">
+      <p>Something went wrong:</p>
+      <pre style={{ color: "red" }}>{error.message}</pre>
+      <button onClick={resetErrorBoundary}>retry</button>
+    </div>
+  );
+}
+
+export default function AppErrorBoundary({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <ErrorBoundary fallbackRender={fallbackRender}>{children}</ErrorBoundary>
+  );
+}
diff --git a/src/lib/api/handler.ts b/src/lib/api/handler.ts
index ff1cda0..b66ec5e 100644
--- a/src/lib/api/handler.ts
+++ b/src/lib/api/handler.ts
@@ -68,7 +68,7 @@ function errorHandler(error: any, response: NextApiResponse) {
       : error.message;
 
   console.error(error);
-  return response.status(500).json({ message: errorMessage });
+  return response.status(500).json({ error: errorMessage });
 }
 
 function handlePrismaError({
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index b54c47b..030e022 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,6 +5,8 @@ import nProgress from "nprogress";
 import { useEffect } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 
+import AppErrorBoundary from "components/AppErrorBoundary";
+
 import * as Keys from "constants/keys";
 import PATHS from "constants/paths";
 
@@ -35,7 +37,9 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }) {
   return (
     <SessionProvider session={session}>
       <DefaultSeo titleTemplate="MyLinks — %s" defaultTitle="MyLinks" />
-      <Component {...pageProps} />
+      <AppErrorBoundary>
+        <Component {...pageProps} />
+      </AppErrorBoundary>
     </SessionProvider>
   );
 }
diff --git a/src/utils/front.ts b/src/utils/front.ts
index ff5fd25..56f430f 100644
--- a/src/utils/front.ts
+++ b/src/utils/front.ts
@@ -13,14 +13,14 @@ export function HandleAxiosError(error): string {
     if (error.response) {
       const responseError =
         error.response.data?.["error"] || error.response.data;
-      errorText = responseError || "Une erreur est survenue";
+      errorText = responseError || "An error has occured";
     } else if (error.request) {
-      errorText = "Aucune donnée renvoyée par le serveur";
+      errorText = "No data returned from the server";
     } else {
-      errorText = "Une erreur inconnue est survenue";
+      errorText = "Something went wrong";
     }
   } else {
-    errorText = "Une erreur est survenue";
+    errorText = "An error has occured";
   }
 
   console.error(error);