Use route-level error boundary for task selection page

In the case of a 404 error, present a "Project Not Found" message like before and for the rest of the error while fetching project summary, the fallback error component will be displayed.

frontend/src/routes.js

@@ -58,6 +58,7 @@ export const router = createBrowserRouter(
           );
           return { Component: SelectTask };
         }}
+        ErrorBoundary={FallbackComponent}
       />
       <Route
         path="projects/:id/map"

frontend/src/views/taskSelection.js

@@ -1,21 +1,20 @@
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate, useParams } from 'react-router-dom';
-import { ErrorBoundary } from 'react-error-boundary';
 
 import { TaskSelection } from '../components/taskSelection';
 import { NotFound } from './notFound';
 import { useProjectSummaryQuery } from '../api/projects';
 import { Preloader } from '../components/preloader';
-import { FallbackComponent } from './fallback';
-
-const ProjectError = ({ error }) => <span>Error:{error.message}</span>;
 
 export function SelectTask() {
   const { id } = useParams();
   const navigate = useNavigate();
   const token = useSelector((state) => state.auth.token);
-  const { data, status, error } = useProjectSummaryQuery(id);
+  const { data, status, error } = useProjectSummaryQuery(id, {
+    useErrorBoundary: (error) => error.response.status !== 404,
+  });
+
 
   useEffect(() => {
     if (!token) {
@@ -31,12 +30,7 @@ export function SelectTask() {
     if (error.response.status === 404) {
       return <NotFound projectId={id} />;
     }
-    return <ProjectError error={error} />;
   }
 
-  return (
-    <ErrorBoundary FallbackComponent={FallbackComponent}>
-      <TaskSelection project={data} />
-    </ErrorBoundary>
-  );
+  return <TaskSelection project={data} />;
 }