fix: error not correctly handled client side

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",

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",

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

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({

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" />
+      <AppErrorBoundary>
         <Component {...pageProps} />
+      </AppErrorBoundary>
     </SessionProvider>
   );
 }

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