Survey not found error handling (#5160)

* Survey not found error handling

* Reorder imports

* Updates to route

* Fix types

* Remove unused imports

* Error page rename

* Rename page

packages/datatrak-web/src/AppProviders.tsx

@@ -3,7 +3,7 @@
  * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 import React, { ReactNode } from 'react';
-import { MutationCache, QueryClient, QueryClientProvider } from 'react-query';
+import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from 'react-query';
 import { ThemeProvider as MuiThemeProvider, StylesProvider } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider } from 'styled-components';
@@ -22,16 +22,20 @@ const defaultQueryClient = new QueryClient({
       }
     },
   }),
+  queryCache: new QueryCache({
+    // use the errorToast function to display errors by default. If you want to override this, apply an meta.applyCustomErrorHandling to the mutation or an onError to the query
+    onError: (error: any, query) => {
+      if (!query?.meta || !query?.meta?.applyCustomErrorHandling) {
+        errorToast(error.message);
+      }
+    },
+  }),
   defaultOptions: {
     queries: {
       staleTime: 1000 * 60 * 5, // 5 minutes
       refetchOnWindowFocus: false,
-      retry: 0,
+      retry: false,
       keepPreviousData: false,
-      // use the errorToast function to display errors by default. If you want to override this, apply an onError function to the query
-      onError: (error: any) => {
-        errorToast(error.message);
-      },
     },
   },
 });

packages/datatrak-web/src/api/queries/useSurvey.ts

@@ -13,6 +13,9 @@ export const useSurvey = (surveyCode?: string) => {
     (): Promise<DatatrakWebSurveyRequest.ResBody> => get(`surveys/${surveyCode}`),
     {
       enabled: !!surveyCode,
+      meta: {
+        applyCustomErrorHandling: true,
+      },
     },
   );
 };

packages/datatrak-web/src/routes/Routes.tsx

@@ -11,7 +11,7 @@ import {
   SurveySelectPage,
   LoginPage,
   VerifyEmailPage,
-  NotFoundPage,
+  ErrorPage,
   RegisterPage,
   VerifyEmailResendPage,
   SurveyReviewScreen,
@@ -24,7 +24,7 @@ import {
   AccountSettingsPage,
   SurveyResponsePage,
 } from '../views';
-import { useCurrentUser } from '../api';
+import { useCurrentUser, useSurvey } from '../api';
 import { ROUTES } from '../constants';
 import { CentredLayout, BackgroundPageLayout, MainPageLayout } from '../layout';
 import { SurveyLayout, useSurveyForm } from '../features';
@@ -52,14 +52,34 @@ const SurveyStartRedirect = () => {
 const SurveyPageRedirect = ({ children }) => {
   const { screenNumber } = useParams();
   const { visibleScreens } = useSurveyForm();
+
   if (visibleScreens && visibleScreens.length && visibleScreens.length < Number(screenNumber)) {
     return <SurveyStartRedirect />;
   }
   return children;
 };
 
+/**
+ * This is to redirect the user to the survey not found page if they try to access a survey that does not exist
+ */
+const SurveyNotFoundRedirect = ({ children }) => {
+  const { surveyCode } = useParams();
+  const { isError, error } = useSurvey(surveyCode);
+  if (isError) {
+    return <ErrorPage error={error as Error} title="Error fetching survey" />;
+  }
+  return children;
+};
+
 export const SurveyPageRoutes = (
-  <Route path={ROUTES.SURVEY} element={<SurveyPage />}>
+  <Route
+    path={ROUTES.SURVEY}
+    element={
+      <SurveyNotFoundRedirect>
+        <SurveyPage />
+      </SurveyNotFoundRedirect>
+    }
+  >
     <Route index element={<SurveyStartRedirect />} />
     <Route path={ROUTES.SURVEY_SUCCESS} element={<SurveySuccessScreen />} />
     <Route element={<SurveyLayout />}>
@@ -134,7 +154,7 @@ export const Routes = () => {
             </PrivateRoute>
           }
         />
-        <Route path="*" element={<NotFoundPage />} />
+        <Route path="*" element={<ErrorPage />} />
       </Route>
     </RouterRoutes>
   );

packages/datatrak-web/src/views/ErrorPage.tsx

@@ -0,0 +1,24 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import { DialogActions } from '@material-ui/core';
+import { Button, ErrorDisplay } from '../components';
+
+interface ErrorPageProps {
+  error?: Error;
+  title?: string;
+}
+
+export const ErrorPage = ({ error, title = '404: Page not found' }: ErrorPageProps) => {
+  return (
+    <ErrorDisplay title={title} error={error}>
+      <DialogActions>
+        <Button to="/" color="primary">
+          Return to home
+        </Button>
+      </DialogActions>
+    </ErrorDisplay>
+  );
+};

packages/datatrak-web/src/views/SurveyPage.tsx

@@ -12,7 +12,6 @@ import { CancelConfirmModal } from '../components';
 import { SurveyToolbar, useSurveyForm, useValidationResolver, SurveyContext } from '../features';
 import { SurveyParams } from '../types';
 import { HEADER_HEIGHT, SURVEY_TOOLBAR_HEIGHT } from '../constants';
-
 // wrap the entire page so that other content can be centered etc
 const PageWrapper = styled.div`
   display: flex;

packages/datatrak-web/src/views/index.ts

@@ -10,7 +10,7 @@ export { LoginPage } from './LoginPage';
 export { RegisterPage } from './RegisterPage';
 export { VerifyEmailResendPage } from './VerifyEmailResendPage';
 export { VerifyEmailPage } from './VerifyEmailPage';
-export { NotFoundPage } from './NotFoundPage';
+export { ErrorPage } from './ErrorPage';
 export { ProjectSelectPage } from './ProjectSelectPage';
 export { SurveyResponsePage } from './SurveyResponsePage';
 export { SurveySuccessScreen, SurveyReviewScreen, SurveyScreen } from '../features';