feat: better error handling ux + toas fixes

src/backend/routers/user.ts

@@ -1,6 +1,7 @@
 import { hasAuthenticated, hasAdmin, router } from "../trpc";
 import { z } from "zod";
 import { UserType, ROLE_OPTIONS } from "@/types/auth";
+import { TRPCError } from "@trpc/server";
 
 export const sortOrderSchema = z.enum(["asc", "desc"]).default("asc");
 export const sortBySchema = z
@@ -130,7 +131,10 @@ export const user = router({
       .executeTakeFirst();
 
     if (existingUser) {
-      throw new Error("User with this email already exists");
+      throw new TRPCError({
+        code: "BAD_REQUEST",
+        message: "User with this email already exists",
+      });
     }
 
     const user = await req.ctx.db

src/components/CustomToast.tsx

@@ -1,43 +1,37 @@
-import React, { useState } from "react";
+import React from "react";
 import styles from "./styles/Toast.module.css";
 import Image from "next/image";
 
 interface CustomToastProps {
   errorMessage: string;
+  onClose: () => void;
 }
 
-const CustomToast = ({ errorMessage }: CustomToastProps) => {
-  const [showToast, setShowToast] = useState(true);
-
+const CustomToast = ({ errorMessage, onClose }: CustomToastProps) => {
   const handleCloseToast = () => {
-    setShowToast(false);
+    onClose();
   };
 
   return (
-    <>
-      {showToast && (
-        <div className={styles.customToastWrapper}>
-          <div className={styles.customToast}>
-            <Image
-              src="/img/error.filled.svg"
-              alt="Error Img"
-              width={24}
-              height={24}
-            ></Image>
-            <div>{errorMessage ?? null}</div>
-
-            <button className={styles.closeButton} onClick={handleCloseToast}>
-              <Image
-                src="/img/cross-outline.svg"
-                alt="Close Toast"
-                width={24}
-                height={24}
-              ></Image>
-            </button>
-          </div>
-        </div>
-      )}
-    </>
+    <div className={styles.customToastWrapper}>
+      <div className={styles.customToast}>
+        <Image
+          src="/img/error.filled.svg"
+          alt="Error Img"
+          width={24}
+          height={24}
+        />
+        <div>{errorMessage}</div>
+        <button className={styles.closeButton} onClick={handleCloseToast}>
+          <Image
+            src="/img/cross-outline.svg"
+            alt="Close Toast"
+            width={24}
+            height={24}
+          />
+        </button>
+      </div>
+    </div>
   );
 };
 

src/components/styles/Toast.module.css

@@ -3,6 +3,7 @@
   bottom: 0;
   right: 0;
   width: 400px;
+  z-index: 9999;
 }
 
 .customToast {

src/pages/_app.tsx

@@ -3,10 +3,10 @@ import { SessionProvider } from "next-auth/react";
 import type { AppProps } from "next/app";
 import { trpc } from "@/client/lib/trpc";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { httpBatchLink, loggerLink } from "@trpc/client";
+import { httpBatchLink, loggerLink, TRPCClientError } from "@trpc/client";
 import { useState } from "react";
 import "../styles/globals.css";
-import { QueryCache } from "@tanstack/react-query";
+import { QueryCache, MutationCache } from "@tanstack/react-query";
 import toast from "react-hot-toast";
 import Head from "next/head";
 import superjson from "superjson";
@@ -17,6 +17,7 @@ import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
 import { compassTheme as theme } from "@/theme";
 import { FontProvider } from "@/components/font-provider";
+import { AppRouter } from "@/backend/routers/_app";
 
 interface CustomPageProps {
   session: Session;
@@ -42,20 +43,21 @@ export default function App({
     () =>
       new QueryClient({
         queryCache: new QueryCache({
-          onError: (error) => {
-            if (error instanceof Error) {
-              const errorMessages: { [key: string]: string } = {
-                BAD_REQUEST: "400: Bad request, please try again",
-                UNAUTHORIZED: "401: Unauthorized Error",
-                NOT_FOUND: "404: Page not found",
-              };
-
-              const defaultMessage = "An error occured. Please try again";
-              const msg = errorMessages[error.message] || defaultMessage;
-              setErrorMessage(msg);
-            }
+          onError: (error: unknown) => {
+            handleTRPCError(error);
+          },
+        }),
+        mutationCache: new MutationCache({
+          onError: (error: unknown) => {
+            handleTRPCError(error);
           },
         }),
+        defaultOptions: {
+          queries: {
+            retry: false,
+            refetchOnWindowFocus: false,
+          },
+        },
       })
   );
 
@@ -77,6 +79,21 @@ export default function App({
     })
   );
 
+  const handleTRPCError = (error: unknown) => {
+    const trpcError = error as TRPCClientError<AppRouter>;
+    const errorCode = trpcError.data?.code as keyof typeof errorMessages;
+    const errorMessage = trpcError.message;
+
+    const errorMessages = {
+      BAD_REQUEST: errorMessage || "400: Bad request, please try again",
+      UNAUTHORIZED: "401: Unauthorized Error",
+      NOT_FOUND: "404: Page not found",
+      FORBIDDEN: "403: Access denied",
+    } as const;
+
+    setErrorMessage(errorMessages[errorCode] ?? "An unexpected error occurred");
+  };
+
   return (
     <>
       <Head>
@@ -92,7 +109,10 @@ export default function App({
                 <QueryClientProvider client={queryClient}>
                   <SessionProvider session={pageProps.session}>
                     {errorMessage && (
-                      <CustomToast errorMessage={errorMessage} />
+                      <CustomToast
+                        errorMessage={errorMessage}
+                        onClose={() => setErrorMessage("")}
+                      />
                     )}
                     <Layout>
                       <Component {...pageProps} showErrorToast={toast.error} />