feat: add default toast on API error

package.json

@@ -62,6 +62,7 @@
     "react-day-picker": "^9.2.1",
     "react-dom": "^19.0.0-rc-fb9a90fa48-20240614",
     "reading-time": "^1.5.0",
+    "sonner": "^1.7.0",
     "superjson": "^2.2.1",
     "tailwind-merge": "^2.5.4",
     "tsparticles": "^3.5.0",

src/app/[locale]/layout.tsx

@@ -1,4 +1,5 @@
 import { RootProviders } from '@/components/providers/RootProviders';
+import { Toaster } from '@/components/ui/Toaster';
 import { routing } from '@/lib/locale';
 import { cx } from '@/lib/utils';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
@@ -84,6 +85,7 @@ export default async function LocaleLayout(props: LocaleLayoutProps) {
         <RootProviders locale={locale}>
           <div className='scrollbar-thin scrollbar-track-background scrollbar-thumb-primary/40 scrollbar-corner-background scrollbar-thumb-rounded-lg hover:scrollbar-thumb-primary/80 fixed top-0 bottom-0 flex h-full w-full flex-col overflow-y-scroll scroll-smooth'>
             {children}
+            <Toaster />
           </div>
         </RootProviders>
       </body>

src/components/ui/Toaster.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import {
+  CircleCheckIcon,
+  CircleXIcon,
+  InfoIcon,
+  LoaderIcon,
+  TriangleAlertIcon,
+} from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner, toast } from 'sonner';
+
+import { useMediaQuery } from '@/lib/hooks/useMediaQuery';
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme();
+  const isDesktop = useMediaQuery('(min-width: 768px)');
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className='toaster group'
+      position={isDesktop ? 'bottom-right' : 'top-center'}
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+          description: 'group-[.toast]:text-muted-foreground',
+          actionButton:
+            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+          cancelButton:
+            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+        },
+      }}
+      icons={{
+        success: <CircleCheckIcon />,
+        info: <InfoIcon />,
+        warning: <TriangleAlertIcon />,
+        error: <CircleXIcon />,
+        loading: <LoaderIcon />,
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster, toast };

src/lib/api/error.ts

@@ -0,0 +1,27 @@
+import { toast } from '@/components/ui/Toaster';
+import type { TRPCClientError } from '@/lib/api/types';
+
+function handleGlobalError(error: Error) {
+  const TRPCError = error as TRPCClientError;
+
+  if (TRPCError.toast) {
+    switch (TRPCError.toast) {
+      case 'success':
+        toast.success(TRPCError.message, { richColors: true });
+        break;
+      case 'info':
+        toast.info(TRPCError.message, { richColors: true });
+        break;
+      case 'warning':
+        toast.warning(TRPCError.message, { richColors: true });
+        break;
+      default:
+        toast.error(TRPCError.message, { richColors: true });
+        break;
+    }
+  } else {
+    throw error;
+  }
+}
+
+export { handleGlobalError };

src/lib/api/queryClient.ts

@@ -1,11 +1,21 @@
 import {
+  MutationCache,
+  QueryCache,
   QueryClient,
   defaultShouldDehydrateQuery,
 } from '@tanstack/react-query';
 import SuperJSON from 'superjson';
 
+import { handleGlobalError } from '@/lib/api/error';
+
 function createQueryClient() {
   return new QueryClient({
+    queryCache: new QueryCache({
+      onError: handleGlobalError,
+    }),
+    mutationCache: new MutationCache({
+      onError: handleGlobalError,
+    }),
     defaultOptions: {
       queries: {
         // With SSR, we usually want to set some default staleTime

src/lib/api/types.ts

@@ -0,0 +1,8 @@
+import type { router } from '@/server/api';
+import type { TRPCClientError as BaseTRPCClientError } from '@trpc/client';
+
+type TRPCClientError = BaseTRPCClientError<typeof router> & {
+  toast?: 'success' | 'info' | 'warning' | 'error';
+};
+
+export type { TRPCClientError };

src/server/api/index.ts

@@ -1,8 +1,9 @@
-import { testRouter } from '@/server/api/routers/test';
+import { authRouter, testRouter } from '@/server/api/routers';
 import { createCallerFactory, createRouter } from '@/server/api/trpc';
 
 const router = createRouter({
   test: testRouter,
+  auth: authRouter,
 });
 
 const createCaller = createCallerFactory(router);

src/server/api/routers/auth.ts

@@ -0,0 +1,26 @@
+import { publicProcedure } from '@/server/api/procedures';
+import { RefillingTokenBucket } from '@/server/api/rate-limit/refillingTokenBucket';
+import { createRouter } from '@/server/api/trpc';
+import { getFeideAuthorizationURL } from '@/server/auth/feide';
+
+import { TRPCError } from '@trpc/server';
+import { headers } from 'next/headers';
+
+const ipBucket = new RefillingTokenBucket<string>(5, 60);
+
+const authRouter = createRouter({
+  getFeideAuthorizationURL: publicProcedure.query(async () => {
+    const headerStore = await headers();
+    const clientIP = headerStore.get('X-Forwarded-For');
+
+    if (clientIP !== null && !ipBucket.check(clientIP, 1)) {
+      throw new TRPCError({
+        code: 'TOO_MANY_REQUESTS',
+        message: 'Rate limit exceeded. Please try again later.',
+      });
+    }
+    return getFeideAuthorizationURL();
+  }),
+});
+
+export { authRouter };

src/server/api/routers/index.ts

@@ -0,0 +1,2 @@
+export * from './test';
+export * from './auth';