Implement navigate to 404 error page when accessing non-existent URL in workspaceSlug (#244)

* Add 404 NotFound Page

* Add query error exception handling condition

* Navigate to page 404 according to error conditions

* Fix to Specify specific error code

* Add error and loading conditions

* Move to Global Logic of axios Error status

* Remove Logic of Axios Error

* Comment to change it to navigate

* Move File hooks to utils

* Fix: CustomNavigate

* Revert "Fix: CustomNavigate"

This reverts commit 3a48e1e.

* Fix customNavigate to window.location.href

* Remove customNavigate

* Rebase: Code Conflict

Author: KimKyuHoi

frontend/src/App.tsx

@@ -22,6 +22,7 @@ import AuthProvider from "./providers/AuthProvider";
 import { useErrorHandler } from "./hooks/useErrorHandler";
 import * as Sentry from "@sentry/react";
 import { useGetSettingsQuery } from "./hooks/api/settings";
+import { isAxios404Error, isAxios500Error } from "./utils/axios.default";
 
 if (import.meta.env.PROD) {
 	Sentry.init({
@@ -76,7 +77,15 @@ function App() {
 	const queryClient = useMemo(() => {
 		return new QueryClient({
 			queryCache: new QueryCache({
-				onError: handleError,
+				onError: (error) => {
+					if (isAxios404Error(error)) {
+						window.location.href = "/404";
+					} else if (isAxios500Error(error)) {
+						window.location.href = "/404";
+					} else {
+						handleError(error);
+					}
+				},
 			}),
 			defaultOptions: {
 				mutations: {

frontend/src/pages/error/index.tsx

@@ -0,0 +1,42 @@
+import { Box, Typography, Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+
+const NotFound = () => {
+	const navigate = useNavigate();
+
+	const handleGoHome = () => {
+		navigate("/");
+	};
+
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				flexDirection: "column",
+				justifyContent: "center",
+				alignItems: "center",
+				height: "100vh",
+				width: "100vw",
+				textAlign: "center",
+				bgcolor: "background.default",
+				color: "text.primary",
+				p: 3,
+			}}
+		>
+			<Typography variant="h1" component="h1" gutterBottom>
+				404
+			</Typography>
+			<Typography variant="h5" component="p" gutterBottom>
+				Page Not Found
+			</Typography>
+			<Typography variant="body1" component="p" gutterBottom>
+				The page you are looking for does not exist.
+			</Typography>
+			<Button variant="contained" color="primary" onClick={handleGoHome} sx={{ mt: 2 }}>
+				Go to Home
+			</Button>
+		</Box>
+	);
+};
+
+export default NotFound;

frontend/src/pages/workspace/Index.tsx

@@ -4,7 +4,7 @@ import {
 	useGetWorkspaceDocumentListQuery,
 } from "../../hooks/api/workspaceDocument";
 import { useGetWorkspaceQuery } from "../../hooks/api/workspace";
-import { Box, Button, CircularProgress, Grid, Stack, Typography } from "@mui/material";
+import { Backdrop, Box, Button, CircularProgress, Grid, Stack, Typography } from "@mui/material";
 import DocumentCard from "../../components/cards/DocumentCard";
 import { useMemo, useState } from "react";
 import { Document } from "../../hooks/api/types/document.d";
@@ -15,7 +15,8 @@ import AddIcon from "@mui/icons-material/Add";
 function WorkspaceIndex() {
 	const params = useParams();
 	const navigate = useNavigate();
-	const { data: workspace } = useGetWorkspaceQuery(params.workspaceSlug);
+	const { data: workspace, isLoading } = useGetWorkspaceQuery(params.workspaceSlug);
+
 	const {
 		data: documentPageList,
 		fetchNextPage,
@@ -31,6 +32,14 @@ function WorkspaceIndex() {
 		);
 	}, [documentPageList?.pages]);
 
+	if (isLoading) {
+		return (
+			<Backdrop open>
+				<CircularProgress color="inherit" />
+			</Backdrop>
+		);
+	}
+
 	const handleCreateDocumentModalOpen = () => {
 		setCreateDocumentModalOpen((prev) => !prev);
 	};

frontend/src/pages/workspace/document/Index.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { setClient, setDoc } from "../../../store/editorSlice";
 import { useDispatch, useSelector } from "react-redux";
-import { Box } from "@mui/material";
+import { Backdrop, Box, CircularProgress } from "@mui/material";
 import { useParams } from "react-router-dom";
 import { selectUser } from "../../../store/userSlice";
 import { useGetDocumentQuery } from "../../../hooks/api/workspaceDocument";
@@ -14,10 +14,16 @@ import { selectSetting } from "../../../store/settingSlice";
 function DocumentIndex() {
 	const dispatch = useDispatch();
 	const params = useParams();
+
 	const userStore = useSelector(selectUser);
 	const settingStore = useSelector(selectSetting);
-	const { data: workspace } = useGetWorkspaceQuery(params.workspaceSlug);
-	const { data: document } = useGetDocumentQuery(workspace?.id, params.documentId);
+	const { data: workspace, isLoading: isWorkspaceLoading } = useGetWorkspaceQuery(
+		params.workspaceSlug
+	);
+	const { data: document, isLoading: isDocumentLoading } = useGetDocumentQuery(
+		workspace?.id,
+		params.documentId
+	);
 	const { doc, client } = useYorkieDocument(document?.yorkieDocumentId, userStore.data?.nickname);
 
 	useEffect(() => {
@@ -32,6 +38,14 @@ function DocumentIndex() {
 		};
 	}, [dispatch, client, doc]);
 
+	if (isDocumentLoading || isWorkspaceLoading) {
+		return (
+			<Backdrop open>
+				<CircularProgress color="inherit" />
+			</Backdrop>
+		);
+	}
+
 	return (
 		<Box height="calc(100% - 64px)">
 			<DocumentView />

frontend/src/routes.tsx

@@ -11,6 +11,7 @@ import DocumentIndex from "./pages/workspace/document/Index";
 import DocumentShareIndex from "./pages/workspace/document/share/Index";
 import JoinIndex from "./pages/workspace/join/Index";
 import MemberIndex from "./pages/workspace/member/Index";
+import NotFound from "./pages/error";
 import ProfileIndex from "./pages/settings/profile/Index";
 import SettingLayout from "./components/layouts/SettingLayout";
 
@@ -85,6 +86,11 @@ const codePairRoutes: Array<CodePairRoute> = [
 		accessType: AccessType.PRIVATE,
 		element: <JoinIndex />,
 	},
+	{
+		path: "/404",
+		accessType: AccessType.PUBLIC,
+		element: <NotFound />,
+	},
 	{
 		path: "settings/profile",
 		accessType: AccessType.PRIVATE,

frontend/src/utils/axios.default.ts

@@ -0,0 +1,9 @@
+import { AxiosError } from "axios";
+
+export const isAxios404Error = (error: unknown): boolean => {
+	return error instanceof AxiosError && error.response?.status === 404;
+};
+
+export const isAxios500Error = (error: unknown): boolean => {
+	return error instanceof AxiosError && error.response?.status === 500;
+};