Add error handler

frontend/src/App.tsx

@@ -6,11 +6,13 @@ import "./App.css";
 import { Box, CssBaseline, ThemeProvider, createTheme, useMediaQuery } from "@mui/material";
 import { useSelector } from "react-redux";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { selectConfig } from "./store/configSlice";
 import axios from "axios";
 import { routes } from "./routes";
-import CodePairErrorBoundary from "./components/common/CodePairError";
+import { QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import AuthProvider from "./providers/AuthProvider";
+import { useErrorHandler } from "./hooks/useErrorHandler";
 
 const router = createBrowserRouter(routes);
 
@@ -33,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,
+				},
+			},
+		});
+	}, []);
 
 	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/hooks/useErrorHandler.ts

@@ -0,0 +1,7 @@
+import { useCallback } from "react";
+
+export function useErrorHandler() {
+	const handleError = useCallback((error: Error) => {}, []);
+
+	return handleError;
+}

frontend/src/main.tsx

@@ -6,21 +6,14 @@ 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";
 
 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>
+				<App />
 			</PersistGate>
 		</Provider>
 	</React.StrictMode>