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 (
+
+
Something went wrong:
+
{error.message}
+
+
+ );
+}
+
+export default function AppErrorBoundary({
+ children,
+}: {
+ children: ReactNode;
+}) {
+ return (
+ {children}
+ );
+}
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 (
-
+
+
+
);
}
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);