feat: show errors on current page instead of navigating to error page

KBDEV-1488
show error either as alert on page
or use snackbar
for pages where data is necessary to render page in any meaningful way, throw error to boundary

Author: areisle

.storybook/preview.tsx

@@ -17,6 +17,7 @@ import { SnackbarProvider } from 'notistack';
 import { AuthContext, AuthContextState } from '../src/components/Auth';
 import { expect, waitFor } from 'storybook/test';
 import { CircularProgress } from '@mui/material';
+import ErrorView from '../src/views/ErrorView';
 
 function wrapAsResponse<T extends Record<string, any> | any[]>(maybeResponse: T | HttpResponse<T>): HttpResponse<T> {
   if (maybeResponse instanceof Response) {
@@ -148,9 +149,11 @@ export interface ViewPreviewType {
 function View() {
   return (
       <div style={{height: '100%', minWidth: '300px'}}>
+        <ErrorView>
           <Suspense fallback={(<CircularProgress color="secondary" />)}>
             <AppRoutes />
           </Suspense>
+        </ErrorView>
       </div>
   )
 }

src/components/DetailDrawer/index.tsx

@@ -54,6 +54,7 @@ interface DetailDrawerProps {
   /** Ontology to be displayed in drawer. */
   node?: GeneralRecordType;
   onClose?: () => void;
+  error?: ReactNode;
 }
 
 /**
@@ -65,6 +66,7 @@ function DetailDrawer(props: DetailDrawerProps) {
     node,
     onClose,
     isEdge = false,
+    error,
   } = props;
   const auth = useAuth();
 
@@ -249,6 +251,7 @@ function DetailDrawer(props: DetailDrawerProps) {
             <CloseIcon />
           </IconButton>
         </div>
+        {error}
         <Divider />
         {otherProps}
         <ListItem

src/components/RecordForm/__tests__/index.test.tsx

@@ -66,7 +66,6 @@ describe('RecordForm', () => {
   });
 
   const onSubmitSpy = vi.fn();
-  const onErrorSpy = vi.fn();
   const onToggleStateSpy = vi.fn();
   const snackbarSpy = vi.fn();
 
@@ -78,7 +77,6 @@ describe('RecordForm', () => {
             <SnackbarProvider onEnter={snackbarSpy}>
               <RecordForm
                 modelName="User"
-                onError={onErrorSpy}
                 onSubmit={onSubmitSpy}
                 onToggleState={onToggleStateSpy}
                 title="blargh monkeys"
@@ -127,7 +125,6 @@ describe('RecordForm', () => {
             <SnackbarProvider onEnter={snackbarSpy}>
               <RecordForm
                 modelName="User"
-                onError={onErrorSpy}
                 onSubmit={onSubmitSpy}
                 onToggleState={onToggleStateSpy}
                 title="blargh monkeys"
@@ -175,7 +172,6 @@ describe('RecordForm', () => {
             <AuthContext.Provider value={auth}>
               <RecordForm
                 modelName="User"
-                onError={onErrorSpy}
                 onSubmit={onSubmitSpy}
                 onToggleState={onToggleStateSpy}
                 title="blargh monkeys"

src/components/RecordForm/index.tsx

@@ -17,6 +17,7 @@ import RecordFormStateToggle from '@/components/RecordFormStateToggle';
 import { GeneralRecordType } from '@/components/types';
 import { cleanPayload, FORM_VARIANT } from '@/components/util';
 import api from '@/services/api';
+import { ErrorMessage } from '@/services/errors';
 import schema from '@/services/schema';
 
 import { useAuth } from '../Auth';
@@ -31,7 +32,6 @@ interface RecordFormProps {
   title: string;
   /** name of class model to be displayed */
   modelName?: string;
-  onError?: (arg: { error: { name?: string; message?: string }; content: unknown }) => void;
   onSubmit?: (record?: GeneralRecordType) => void;
   onToggleState?: (newState: FORM_VARIANT | 'graph') => void;
   /** values of individual properties of passed class model */
@@ -49,7 +49,6 @@ const RecordForm = ({
   title,
   onToggleState,
   onSubmit,
-  onError,
   variant = FORM_VARIANT.VIEW,
 }: RecordFormProps) => {
   const snackbar = useSnackbar();
@@ -63,7 +62,7 @@ const RecordForm = ({
     formIsDirty, setFormIsDirty, formContent, formErrors, formHasErrors,
   } = form;
 
-  const { mutate: addNewAction, isPending: isAdding } = useMutation({
+  const { mutate: addNewAction, isPending: isAdding, error: errorAdding } = useMutation({
     mutationFn: async (content: GeneralRecordType) => {
       const payload = cleanPayload(content);
       const { routeName } = schemaDefn.get(payload);
@@ -73,11 +72,6 @@ const RecordForm = ({
       snackbar.enqueueSnackbar(`Sucessfully created the record ${result['@rid']}`, { variant: 'success' });
       onSubmit?.(result);
     },
-    onError: (err: Error, content) => {
-      console.error(err);
-      snackbar.enqueueSnackbar(`Error (${err.name}) in creating the record`, { variant: 'error' });
-      onError?.({ error: err, content });
-    },
   });
 
   /**
@@ -101,7 +95,7 @@ const RecordForm = ({
     }
   }, [addNewAction, formContent, formErrors, formHasErrors, modelName, setFormIsDirty, snackbar]);
 
-  const { mutate: deleteAction, isPending: isDeleting } = useMutation({
+  const { mutate: deleteAction, isPending: isDeleting, error: errorDeleting } = useMutation({
     mutationFn: async (content: GeneralRecordType) => {
       const { routeName } = schemaDefn.get(content);
       return api.delete(`${routeName}/${content['@rid']!.replace(/^#/, '')}`);
@@ -110,10 +104,6 @@ const RecordForm = ({
       snackbar.enqueueSnackbar(`Successfully deleted the record ${content['@rid']}`, { variant: 'success' });
       onSubmit?.();
     },
-    onError: (err: Error, content) => {
-      snackbar.enqueueSnackbar(`Error (${err.name}) in deleting the record (${content['@rid']})`, { variant: 'error' });
-      onError?.({ error: err, content });
-    },
   });
 
   /**
@@ -128,7 +118,7 @@ const RecordForm = ({
     deleteAction(content);
   }, [deleteAction, formContent, modelName]);
 
-  const { mutate: updateAction, isPending: isUpdating } = useMutation({
+  const { mutate: updateAction, isPending: isUpdating, error: errorUpdating } = useMutation({
     mutationFn: async (content: GeneralRecordType) => {
       const payload = cleanPayload(content);
       const { routeName } = schemaDefn.get(payload);
@@ -138,10 +128,6 @@ const RecordForm = ({
       snackbar.enqueueSnackbar(`Successfully edited the record ${result['@rid']}`, { variant: 'success' });
       onSubmit?.(result);
     },
-    onError: (err: Error, content) => {
-      snackbar.enqueueSnackbar(`Error (${err.name}) in editing the record (${content['@rid']})`, { variant: 'error' });
-      onError?.({ error: err, content });
-    },
   });
 
   /**
@@ -215,6 +201,9 @@ const RecordForm = ({
           )}
         </>
       )}
+      <ErrorMessage error={errorAdding}>An error occurred while creating record.</ErrorMessage>
+      <ErrorMessage error={errorDeleting}>An error occurred while deleting record.</ErrorMessage>
+      <ErrorMessage error={errorUpdating}>An error occurred while updating record.</ErrorMessage>
       <div className="record-form__action-buttons">
         {variant === FORM_VARIANT.EDIT && !formContent.deletedAt
           ? (

src/components/RecordFormDialog/index.tsx

@@ -29,7 +29,6 @@ const RecordFormDialog = (props: RecordFormDialogProps) => {
     isOpen = false,
     modelName,
     onClose,
-    onError,
     onSubmit,
     title = '',
     variant,
@@ -65,7 +64,6 @@ const RecordFormDialog = (props: RecordFormDialogProps) => {
       <DialogContent>
         <RecordForm
           modelName={modelName}
-          onError={onError}
           onSubmit={onSubmit}
           onToggleState={onToggleState}
           title={title}

src/components/StatementForm/index.stories.tsx

@@ -14,7 +14,6 @@ const meta = preview.meta({
   decorators: [withSnackbar, withAuth, withRouter],
   args: {
     title: 'blargh monkeys',
-    onError: fn(),
     onSubmit: fn(),
     value: {},
   },

src/components/StatementForm/index.tsx

@@ -24,6 +24,7 @@ import RecordFormStateToggle from '@/components/RecordFormStateToggle';
 import { GeneralRecordType } from '@/components/types';
 import { cleanPayload, FORM_VARIANT, tuple } from '@/components/util';
 import api from '@/services/api';
+import { ErrorMessage } from '@/services/errors';
 
 import CivicEvidenceLink from './CivicEvidenceLink';
 import ReviewDialog from './ReviewDialog';
@@ -33,7 +34,6 @@ const FIELD_EXCLUSIONS = ['groupRestrictions'];
 interface StatementFormProps {
   /** the title for this form */
   title: string;
-  onError?: (arg: { error: { name?: string; message?: string }; content: unknown }) => void;
   onSubmit?: (record?: GeneralRecordType) => void;
   onToggleState?: (newState: FORM_VARIANT | 'graph') => void;
   /** values of individual properties of passed class model */
@@ -50,7 +50,6 @@ const StatementForm = ({
   title,
   onToggleState,
   onSubmit,
-  onError,
   variant = FORM_VARIANT.VIEW,
 }: StatementFormProps) => {
   const params = useParams();
@@ -109,6 +108,7 @@ const StatementForm = ({
     queryKey: [`/statements/${params.rid}?neighbors=1`],
     queryFn: async ({ queryKey: [route] }) => api.get(route),
     enabled: (isempty(initialValue) && Boolean(params.rid)),
+    throwOnError: true,
   });
 
   const snackbar = useSnackbar();
@@ -208,7 +208,7 @@ const StatementForm = ({
     return updatedContent;
   }, [auth]);
 
-  const { mutate: addNewAction, isPending: isAdding } = useMutation({
+  const { mutate: addNewAction, isPending: isAdding, error: errorAdding } = useMutation({
     mutationFn: async (content: GeneralRecordType) => {
       const payload = cleanPayload(content);
       const { routeName } = schemaDefn.get(payload);
@@ -218,11 +218,6 @@ const StatementForm = ({
       snackbar.enqueueSnackbar(`Sucessfully created the record ${result['@rid']}`, { variant: 'success' });
       onSubmit?.(result);
     },
-    onError: (err: Error, content) => {
-      console.error(err);
-      snackbar.enqueueSnackbar(`Error (${err.name}) in creating the record`, { variant: 'error' });
-      onError?.({ error: err, content });
-    },
   });
 
   /**
@@ -242,7 +237,7 @@ const StatementForm = ({
     }
   }, [addNewAction, formContent, formErrors, formHasErrors, model.name, setFormIsDirty, snackbar, statementReviewCheck]);
 
-  const { mutate: deleteAction, isPending: isDeleting } = useMutation({
+  const { mutate: deleteAction, isPending: isDeleting, error: errorDeleting } = useMutation({
     mutationFn: async (content: GeneralRecordType) => {
       const { routeName } = schemaDefn.get(content);
       return api.delete(`${routeName}/${content['@rid']!.replace(/^#/, '')}`);
@@ -251,10 +246,6 @@ const StatementForm = ({
       snackbar.enqueueSnackbar(`Sucessfully deleted the record ${content['@rid']}`, { variant: 'success' });
       onSubmit?.();
     },
-    onError: (err: Error, content) => {
-      snackbar.enqueueSnackbar(`Error (${err.name}) in deleting the record (${content['@rid']})`, { variant: 'error' });
-      onError?.({ error: err, content });
-    },
   });
 
   /**
@@ -265,7 +256,7 @@ const StatementForm = ({
     deleteAction(content);
   }, [deleteAction, formContent, model.name]);
 
-  const { mutate: updateAction, isPending: isUpdating } = useMutation({
+  const { mutate: updateAction, isPending: isUpdating, error: errorUpdating } = useMutation({
     mutationFn: async (content: GeneralRecordType) => {
       const payload = cleanPayload(content);
       const { routeName } = schemaDefn.get(payload);
@@ -275,10 +266,6 @@ const StatementForm = ({
       snackbar.enqueueSnackbar(`Sucessfully edited the record ${result['@rid']}`, { variant: 'success' });
       onSubmit?.(result);
     },
-    onError: (err: Error, content) => {
-      snackbar.enqueueSnackbar(`Error (${err.name}) in editing the record (${content['@rid']})`, { variant: 'error' });
-      onError?.({ error: err, content });
-    },
   });
 
   /**
@@ -381,6 +368,9 @@ const StatementForm = ({
           modelName={model.name}
         />
       </FormContext.Provider>
+      <ErrorMessage error={errorAdding}>An error occurred while creating record.</ErrorMessage>
+      <ErrorMessage error={errorDeleting}>An error occurred while deleting record.</ErrorMessage>
+      <ErrorMessage error={errorUpdating}>An error occurred while updating record.</ErrorMessage>
       <div className="statement-form__action-buttons">
         {variant === FORM_VARIANT.EDIT && !formContent.deletedAt
           ? (

src/components/VariantForm/SteppedForm/index.tsx

@@ -30,10 +30,11 @@ interface SteppedFormProps {
   formVariant?: FORM_VARIANT;
   isLoading?: boolean;
   value?: Record<string, unknown>;
+  errors?: ReactNode;
 }
 
 const SteppedForm = ({
-  children, modelName, properties, onSubmit, className = '', value = {}, formVariant = FORM_VARIANT.NEW, onDelete, isLoading = false,
+  children, modelName, properties, onSubmit, className = '', value = {}, formVariant = FORM_VARIANT.NEW, onDelete, isLoading = false, errors,
 }: SteppedFormProps) => {
   const snackbar = useSnackbar();
   const [activeStep, setActiveStep] = useState(0);
@@ -102,6 +103,7 @@ const SteppedForm = ({
             </Step>
           );
         })}
+        {errors}
         <div className="stepped-form__actions">
           {formVariant === FORM_VARIANT.EDIT && (
           <ActionButton

src/components/VariantForm/__tests__/index.test.tsx

@@ -27,7 +27,7 @@ describe('NewVariant', () => {
       getByText, getByTestId, queryByText,
     } = render(
       <QueryClientProvider client={api.queryClient}>
-        <NewVariant onError={vi.fn()} onSubmit={vi.fn()} />
+        <NewVariant onSubmit={vi.fn()} />
       </QueryClientProvider>,
     ));
   });

src/components/VariantForm/index.tsx

@@ -16,6 +16,7 @@ import FieldGroup from '@/components/FormLayout/FieldGroup';
 import RadioSelect from '@/components/RadioSelect';
 import { cleanPayload, FORM_VARIANT, sortAndGroupFields } from '@/components/util';
 import api from '@/services/api';
+import { ErrorMessage } from '@/services/errors';
 
 import { GeneralRecordType } from '../types';
 import BreakpointForm from './BreakpointForm';
@@ -92,8 +93,6 @@ const pickInputType = (record) => {
 };
 
 interface VariantFormProps {
-  /** the handler to be called when the submission throws an error */
-  onError: (arg: { error: { name?: string; message?: string }; content: unknown }) => void;
   /** the handler to be called when the form is submitted */
   onSubmit: (record?: GeneralRecordType | null) => void;
   formVariant?: FORM_VARIANT;
@@ -104,7 +103,7 @@ interface VariantFormProps {
  * Input form for new Variants
  */
 const VariantForm = ({
-  onSubmit, onError, value = {}, formVariant = FORM_VARIANT.NEW,
+  onSubmit, value = {}, formVariant = FORM_VARIANT.NEW,
 }: VariantFormProps) => {
   let defaultCoordinateType;
 
@@ -207,12 +206,6 @@ const VariantForm = ({
       snackbar.enqueueSnackbar(`Sucessfully ${actionType} the record ${result['@rid']}`, { variant: 'success' });
       onSubmit(result);
     },
-    onError: (error: any, content) => {
-      const actionType = formVariant === FORM_VARIANT.NEW ? 'creating' : 'editing';
-      console.error(error);
-      snackbar.enqueueSnackbar(`Error (${error.name}) in ${actionType} the record`, { variant: 'error' });
-      onError({ error, content });
-    },
   });
 
   const deleteMutation = useMutation({
@@ -226,11 +219,6 @@ const VariantForm = ({
       snackbar.enqueueSnackbar(`Sucessfully deleted the record ${result['@rid']}`, { variant: 'success' });
       onSubmit(null);
     },
-    onError: (error: any, content) => {
-      console.error(error);
-      snackbar.enqueueSnackbar(`Error (${error.name}) in deleting the record`, { variant: 'error' });
-      onError({ error, content });
-    },
   });
 
   const handleSubmitAction = useCallback((content) => {
@@ -244,6 +232,12 @@ const VariantForm = ({
   return model && (
     <SteppedForm
       className="new-variant"
+      errors={(
+        <>
+          <ErrorMessage error={submitMutation.error}>An error occurred while creating/editing record.</ErrorMessage>
+          <ErrorMessage error={deleteMutation.error}>An error occurred while deleting record.</ErrorMessage>
+        </>
+      )}
       formVariant={formVariant}
       isLoading={submitMutation.isPending || deleteMutation.isPending}
       modelName={model.name}