Survey not found error handling

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';
@@ -21,16 +21,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/Routes.tsx

@@ -32,7 +32,7 @@ import {
   ResetPasswordPage,
   AccountSettingsPage,
 } from './views';
-import { useUser } from './api/queries';
+import { useSurvey, useUser } from './api/queries';
 import { ROUTES } from './constants';
 import { CentredLayout, BackgroundPageLayout, MainPageLayout } from './layout';
 import { SurveyLayout, useSurveyForm } from './features';
@@ -102,14 +102,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 <NotFoundPage 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 />}>

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/components/ErrorDisplay.tsx

@@ -0,0 +1,51 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ */
+
+import React, { ReactNode } from 'react';
+import styled from 'styled-components';
+import { Paper, Typography } from '@material-ui/core';
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Container = styled(Paper).attrs({
+  elevation: 0,
+})`
+  padding: 1rem;
+  width: 100%;
+  max-width: 40rem;
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+  h1 {
+    margin-bottom: 1rem;
+  }
+  ${({ theme }) => theme.breakpoints.up('sm')} {
+    padding: 1.5rem 2.5rem;
+  }
+`;
+
+export const ErrorDisplay = ({
+  error,
+  children,
+  title,
+}: {
+  error?: Error | null;
+  children?: ReactNode;
+  title;
+}) => {
+  return (
+    <Wrapper>
+      <Container>
+        <Typography variant="h1">{title}</Typography>
+        {error && <Typography variant="body1">{error.message}</Typography>}
+        {children}
+      </Container>
+    </Wrapper>
+  );
+};

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

@@ -15,3 +15,4 @@ export { Tile } from './Tile';
 export * from './Icons';
 export { SmallModal } from './SmallModal';
 export { CancelConfirmModal } from './CancelConfirmModal';
+export { ErrorDisplay } from './ErrorDisplay';

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

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

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

@@ -18,7 +18,6 @@ import {
 } 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;