(FE) Add Global Error Handling

frontend/package.json

@@ -36,6 +36,7 @@
 		"color": "^4.2.3",
 		"lib0": "^0.2.88",
 		"moment": "^2.30.1",
+		"notistack": "^2.0.8",
 		"randomcolor": "^0.6.2",
 		"react": "^17.0.0 || ^18.0.0",
 		"react-dom": "^17.0.0 || ^18.0.0",

frontend/src/App.tsx

@@ -10,6 +10,9 @@ import { useMemo } from "react";
 import { selectConfig } from "./store/configSlice";
 import axios from "axios";
 import { routes } from "./routes";
+import { QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import AuthProvider from "./providers/AuthProvider";
+import { useErrorHandler } from "./hooks/useErrorHandler";
 
 const router = createBrowserRouter(routes);
 
@@ -32,14 +35,31 @@ function App() {
 			},
 		});
 	}, [config.theme, prefersDarkMode]);
+	const handleError = useErrorHandler();
+	const queryClient = useMemo(() => {
+		return new QueryClient({
+			queryCache: new QueryCache({
+				onError: handleError,
+			}),
+			defaultOptions: {
+				mutations: {
+					onError: handleError,
+				},
+			},
+		});
+	}, [handleError]);
 
 	return (
-		<ThemeProvider theme={theme}>
-			<CssBaseline />
-			<Box minHeight="100vh">
-				<RouterProvider router={router} />
-			</Box>
-		</ThemeProvider>
+		<QueryClientProvider client={queryClient}>
+			<AuthProvider>
+				<ThemeProvider theme={theme}>
+					<CssBaseline />
+					<Box minHeight="100vh">
+						<RouterProvider router={router} />
+					</Box>
+				</ThemeProvider>
+			</AuthProvider>
+		</QueryClientProvider>
 	);
 }
 

frontend/src/components/common/CodePairError.tsx

@@ -0,0 +1,19 @@
+import { Stack, Typography } from "@mui/material";
+import { isRouteErrorResponse, useRouteError } from "react-router-dom";
+
+function CodePairError() {
+	const error = useRouteError();
+
+	return (
+		<Stack width={1} height="100vh" alignItems="center" justifyContent="center">
+			<Stack alignItems="center">
+				<Typography variant="h5">Something went wrong</Typography>
+				{isRouteErrorResponse(error) && (
+					<Typography variant="subtitle1">Status Code: {error.status}</Typography>
+				)}
+			</Stack>
+		</Stack>
+	);
+}
+
+export default CodePairError;

frontend/src/hooks/useErrorHandler.ts

@@ -0,0 +1,14 @@
+import { useSnackbar } from "notistack";
+import { useCallback } from "react";
+
+export function useErrorHandler() {
+	const { enqueueSnackbar } = useSnackbar();
+	const handleError = useCallback(
+		(error: Error) => {
+			enqueueSnackbar(error.message || "Something went wrong...", { variant: "error" });
+		},
+		[enqueueSnackbar]
+	);
+
+	return handleError;
+}

frontend/src/main.tsx

@@ -6,21 +6,17 @@ import { store } from "./store/store";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
 import { persistStore } from "redux-persist";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import AuthProvider from "./providers/AuthProvider";
+import { SnackbarProvider } from "notistack";
 
 const persistor = persistStore(store);
-const queryClient = new QueryClient();
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
 	<React.StrictMode>
 		<Provider store={store}>
 			<PersistGate loading={null} persistor={persistor}>
-				<QueryClientProvider client={queryClient}>
-					<AuthProvider>
-						<App />
-					</AuthProvider>
-				</QueryClientProvider>
+				<SnackbarProvider maxSnack={3}>
+					<App />
+				</SnackbarProvider>
 			</PersistGate>
 		</Provider>
 	</React.StrictMode>

frontend/src/routes.tsx

@@ -7,14 +7,26 @@ import WorkspaceLayout from "./components/layouts/WorkspaceLayout";
 import GuestRoute from "./components/common/GuestRoute";
 import PrivateRoute from "./components/common/PrivateRoute";
 import WorkspaceIndex from "./pages/workspace/Index";
+import CodePairError from "./components/common/CodePairError";
+
+interface CodePairRoute {
+	path: string;
+	accessType: AccessType;
+	element: JSX.Element;
+	errorElement?: JSX.Element;
+	children?: {
+		path: string;
+		element: JSX.Element;
+	}[];
+}
 
 const enum AccessType {
 	PRIVATE, // Authroized user can access only
 	PUBLIC, // Everyone can access
 	GUEST, // Not authorized user can access only
 }
 
-const codePairRoutes = [
+const codePairRoutes: Array<CodePairRoute> = [
 	{
 		path: "",
 		accessType: AccessType.GUEST,
@@ -63,6 +75,8 @@ const injectProtectedRoute = (routes: typeof codePairRoutes) => {
 			route.element = <GuestRoute>{route.element}</GuestRoute>;
 		}
 
+		route.errorElement = <CodePairError />;
+
 		return route;
 	});
 };