wrap all data mutations in error handling

app/(dashboard)/dashboard/_components/ActiveProtocolSwitch.tsx

@@ -16,6 +16,9 @@ const ActiveProtocolSwitch = ({
 
   const { data: isActive } = api.protocol.getActive.useQuery(hash, {
     initialData,
+    onError: (err) => {
+      throw new Error(err.message);
+    },
   });
 
   const { mutateAsync: setActive } = api.protocol.setActive.useMutation({
@@ -33,8 +36,7 @@ const ActiveProtocolSwitch = ({
     },
     onError: (err, _newState, previousState) => {
       utils.protocol.getActive.setData(hash, previousState);
-      // eslint-disable-next-line no-console
-      console.error(err);
+      throw new Error(err.message);
     },
     onSuccess: () => {
       router.refresh();

app/(dashboard)/dashboard/_components/AnonymousRecruitmentSwitch.tsx

@@ -13,6 +13,9 @@ const AnonymousRecruitmentSwitch = ({
   const { data: allowAnonymousRecruitment } =
     api.appSettings.get.allowAnonymousRecruitment.useQuery(undefined, {
       initialData,
+      onError(error) {
+        throw new Error(error.message);
+      },
     });
 
   const { mutateAsync: updateAnonymousRecruitment } =

app/(dashboard)/dashboard/_components/InterviewsTable/InterviewsTable.tsx

@@ -9,7 +9,11 @@ import { useState } from 'react';
 import { DeleteInterviewsDialog } from '../../interviews/_components/DeleteInterviewsDialog';
 
 export const InterviewsTable = () => {
-  const interviews = api.interview.get.all.useQuery();
+  const interviews = api.interview.get.all.useQuery(undefined, {
+    onError(error) {
+      throw new Error(error.message);
+    },
+  });
 
   const [interviewsToDelete, setInterviewsToDelete] = useState<Interview[]>();
   const [showDeleteModal, setShowDeleteModal] = useState(false);

app/(dashboard)/dashboard/_components/ParticipantsTable/ParticipantsTable.tsx

@@ -22,8 +22,6 @@ export const ParticipantsTable = ({
       initialData,
       refetchOnMount: false,
       onError(error) {
-        // eslint-disable-next-line no-console
-        console.error(error);
         throw new Error(error.message);
       },
     },

app/(dashboard)/dashboard/_components/ProtocolUploader.tsx

@@ -132,8 +132,14 @@ export default function ProtocolUploader({
     setOpen(false);
   }
 
-  const { data: lastUploadedProtocol } =
-    api.protocol.get.lastUploaded.useQuery();
+  const { data: lastUploadedProtocol } = api.protocol.get.lastUploaded.useQuery(
+    undefined,
+    {
+      onError(error) {
+        throw new Error(error.message);
+      },
+    },
+  );
 
   return (
     <>

app/(dashboard)/dashboard/_components/ProtocolsTable/ProtocolsTable.tsx

@@ -20,8 +20,7 @@ export const ProtocolsTable = ({
       initialData,
       refetchOnMount: false,
       onError(error) {
-        // eslint-disable-next-line no-console
-        console.error(error);
+        throw new Error(error.message);
       },
     },
   );

app/(dashboard)/dashboard/_components/ResetButton.tsx

@@ -9,7 +9,11 @@ import { Button } from '~/components/ui/Button';
 const ResetButton = () => {
   const [loading, setLoading] = useState(false);
   const router = useRouter();
-  const { mutateAsync: resetConfigured } = api.appSettings.reset.useMutation();
+  const { mutateAsync: resetConfigured } = api.appSettings.reset.useMutation({
+    onError(error) {
+      throw new Error(error.message);
+    },
+  });
 
   const reset = async () => {
     setLoading(true);

app/(dashboard)/dashboard/interviews/_components/DeleteInterviewsDialog.tsx

@@ -27,7 +27,11 @@ export const DeleteInterviewsDialog = ({
 }: DeleteInterviewsDialog) => {
   const [hasUnexported, setHasUnexported] = useState<boolean>(false);
   const { mutateAsync: deleteInterviews, isLoading: isDeleting } =
-    api.interview.delete.useMutation();
+    api.interview.delete.useMutation({
+      onError(error) {
+        throw new Error(error.message);
+      },
+    });
   const utils = api.useUtils();
 
   useEffect(() => {

app/(dashboard)/dashboard/participants/_components/DeleteAllParticipantsButton.tsx

@@ -23,6 +23,9 @@ export const DeleteAllParticipantsButton = () => {
         await utils.participant.get.all.refetch();
         setShowAlertDialog(false);
       },
+      onError(error) {
+        throw new Error(error.message);
+      },
     });
   return (
     <>

app/(dashboard)/dashboard/participants/_components/DeleteParticipantsDialog.tsx

@@ -44,7 +44,11 @@ export const DeleteParticipantsDialog = ({
     });
   }, [participantsToDelete]);
   const { mutateAsync: deleteParticipants, isLoading: isDeleting } =
-    api.participant.delete.byId.useMutation();
+    api.participant.delete.byId.useMutation({
+      onError(error) {
+        throw new Error(error.message);
+      },
+    });
   const utils = api.useUtils();
 
   const handleConfirm = async () => {

app/(dashboard)/dashboard/participants/_components/ImportCSVModal.tsx

@@ -34,7 +34,11 @@ const ImportCSVModal = ({
   const methods = useZodForm({ schema: formSchema, shouldUnregister: true });
   const utils = api.useUtils();
   const { mutateAsync: importParticipants } =
-    api.participant.create.useMutation();
+    api.participant.create.useMutation({
+      onError(error) {
+        throw new Error(error.message);
+      },
+    });
   const isSubmitting = methods.formState.isSubmitting;
   const [showImportDialog, setShowImportDialog] = useState(false);
   const selectedCSV = methods.watch('csvFile');

app/(dashboard)/dashboard/protocols/_components/DeleteProtocolsDialog.tsx

@@ -44,7 +44,11 @@ export const DeleteProtocolsDialog = ({
     });
   }, [protocolsToDelete]);
   const { mutateAsync: deleteProtocols, isLoading: isDeleting } =
-    api.protocol.delete.byHash.useMutation();
+    api.protocol.delete.byHash.useMutation({
+      onError(error) {
+        throw new Error(error.message);
+      },
+    });
 
   const utils = api.useUtils();
   const handleConfirm = async () => {

app/(dashboard)/dashboard/protocols/page.tsx

@@ -2,17 +2,21 @@ import { ProtocolsTable } from '~/app/(dashboard)/dashboard/_components/Protocol
 import { api } from '~/trpc/server';
 
 const ProtocolsPage = async () => {
-  const protocols = await api.protocol.get.all.query(undefined, {
-    context: {
-      revalidate: 0,
-    },
-  });
-  return (
-    <div className="rounded-lg bg-white p-6">
-      <h2 className="mb-6 text-2xl font-bold">Protocols management view</h2>
-      <ProtocolsTable initialData={protocols} />
-    </div>
-  );
+  try {
+    const protocols = await api.protocol.get.all.query(undefined, {
+      context: {
+        revalidate: 0,
+      },
+    });
+    return (
+      <div className="rounded-lg bg-white p-6">
+        <h2 className="mb-6 text-2xl font-bold">Protocols management view</h2>
+        <ProtocolsTable initialData={protocols} />
+      </div>
+    );
+  } catch (error) {
+    throw new Error('An error occurred while fetching protocols');
+  }
 };
 
 export default ProtocolsPage;

app/(onboard)/_components/OnboardWizard.tsx

@@ -21,16 +21,12 @@ function OnboardWizard() {
   const step = searchParams.get('step');
   const stepInt = parseInt(step ?? '1', 10);
 
-  const { data: expired, error } = api.appSettings.get.expired.useQuery(
-    undefined,
-    {
-      refetchInterval: 1000 * 10,
+  const { data: expired } = api.appSettings.get.expired.useQuery(undefined, {
+    refetchInterval: 1000 * 10,
+    onError(error) {
+      throw new Error(error.message);
     },
-  );
-
-  if (error) {
-    throw new Error(error.message);
-  }
+  });
 
   useEffect(() => {
     if (expired) {

app/(onboard)/expired/page.tsx

@@ -15,6 +15,9 @@ export default function Page() {
 
         window.location.replace('/setup');
       },
+      onError(error) {
+        throw new Error(error.message);
+      },
     },
   );
 

app/api/error.tsx

@@ -0,0 +1,32 @@
+'use client'; // Error components must be Client components
+
+import { useEffect } from 'react';
+import { Button } from '~/components/ui/Button';
+import { AlertTriangle } from 'lucide-react';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    // eslint-disable-next-line no-console
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="mx-auto my-4 flex max-w-md flex-col items-center rounded-lg border border-destructive p-4 text-center">
+      <AlertTriangle className="mb-2 h-12 w-12 text-destructive" />
+      <h2 className="mb-2 text-2xl font-semibold text-destructive">
+        API Error
+      </h2>
+      <p className="text-sm">{error.message}</p>
+      <div className="mt-4">
+        <Button onClick={() => reset()}>Try Again</Button>
+      </div>
+    </div>
+  );
+}

app/error.tsx

@@ -0,0 +1,32 @@
+'use client'; // Error components must be Client components
+
+import { useEffect } from 'react';
+import { Button } from '~/components/ui/Button';
+import { AlertTriangle } from 'lucide-react';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    // eslint-disable-next-line no-console
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="mx-auto my-4 flex max-w-md flex-col items-center rounded-lg border border-destructive p-4 text-center">
+      <AlertTriangle className="mb-2 h-12 w-12 text-destructive" />
+      <h2 className="mb-2 text-2xl font-semibold text-destructive">
+        Root Layout Error
+      </h2>
+      <p className="text-sm">{error.message}</p>
+      <div className="mt-4">
+        <Button onClick={() => reset()}>Try Again</Button>
+      </div>
+    </div>
+  );
+}

app/layout.tsx

@@ -18,23 +18,26 @@ export const dynamic = 'force-dynamic';
 async function RootLayout({ children }: { children: React.ReactNode }) {
   const session = await getServerSession();
 
-  const { configured, expired } =
-    await api.appSettings.get.allappSettings.query();
-
-  return (
-    <html lang="en">
-      <body>
-        <RedirectWrapper
-          configured={configured}
-          expired={expired}
-          session={session}
-        >
-          <Providers initialSession={session}>{children}</Providers>
-          <Toaster />
-        </RedirectWrapper>
-      </body>
-    </html>
-  );
+  try {
+    const { configured, expired } =
+      await api.appSettings.get.allappSettings.query();
+    return (
+      <html lang="en">
+        <body>
+          <RedirectWrapper
+            configured={configured}
+            expired={expired}
+            session={session}
+          >
+            <Providers initialSession={session}>{children}</Providers>
+            <Toaster />
+          </RedirectWrapper>
+        </body>
+      </html>
+    );
+  } catch (error) {
+    throw new Error('Failed to fetch app settings');
+  }
 }
 
 export default RootLayout;

app/not-found.tsx

@@ -11,12 +11,11 @@ export default function NotFound() {
   };
   return (
     <div className="flex h-screen flex-col items-center justify-center bg-gray-100">
-      <FileWarning className="mb-4 h-12 w-12 text-violet-600" />
+      <FileWarning className="mb-4 h-12 w-12 text-violet-700" />
       <h1 className="text-3xl font-extrabold text-violet-700">404</h1>
       <p className="text-lg text-gray-700">Page not found</p>
       <Button
-        variant="outline"
-        className="mt-4 bg-violet-600 text-white hover:bg-violet-700"
+        className="mt-4 bg-violet-600 hover:bg-violet-800"
         onClick={redirectToDashboard}
       >
         Back to Dashboard

providers/InterviewProvider.tsx

@@ -50,7 +50,11 @@ function InterviewProvider({
   );
   const [initialized, setInitialized] = useState(false);
   const { network, networkHandlers } = useNetwork(initialNetwork);
-  const { mutate: updateNetwork } = api.interview.updateNetwork.useMutation();
+  const { mutate: updateNetwork } = api.interview.updateNetwork.useMutation({
+    onError: (error) => {
+      throw new Error(error.message);
+    },
+  });
 
   const stages = protocol.stages;
   const protocolStageCount = stages.length;

providers/SessionProvider.tsx

@@ -48,6 +48,9 @@ export const SessionProvider = ({
           setSession(null);
         }
       },
+      onError: (error) => {
+        throw new Error(error.message);
+      },
     });
 
   // If we have an initial session, we don't need to fetch it again.
@@ -56,10 +59,9 @@ export const SessionProvider = ({
       return;
     }
 
-    getSession().catch((err) => {
-      // eslint-disable-next-line no-console
-      console.error(err);
+    getSession().catch((err: { message: string | undefined }) => {
       setSession(null);
+      throw new Error(err.message);
     });
   }, [initialSession, getSession]);