fix: refactor trpc errors (#1511)

apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx

@@ -7,7 +7,6 @@ import { useLingui } from '@lingui/react';
 import { signOut } from 'next-auth/react';
 
 import type { User } from '@documenso/prisma/client';
-import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
@@ -52,30 +51,20 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
 
       return await signOut({ callbackUrl: '/' });
     } catch (err) {
-      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
-        toast({
-          title: _(msg`An error occurred`),
-          description: err.message,
-          variant: 'destructive',
-        });
-      } else {
-        toast({
-          title: _(msg`An unknown error occurred`),
-          variant: 'destructive',
-          description:
-            err.message ??
-            _(
-              msg`We encountered an unknown error while attempting to delete your account. Please try again later.`,
-            ),
-        });
-      }
+      toast({
+        title: _(msg`An unknown error occurred`),
+        variant: 'destructive',
+        description: _(
+          msg`We encountered an unknown error while attempting to delete your account. Please try again later.`,
+        ),
+      });
     }
   };
 
   return (
     <div className={className}>
       <Alert
-        className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row "
+        className="flex flex-col items-center justify-between gap-4 p-6 md:flex-row"
         variant="neutral"
       >
         <div>

apps/web/src/app/(signing)/sign/[token]/complete/claim-account.tsx

@@ -9,7 +9,7 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
-import { TRPCClientError } from '@documenso/trpc/client';
+import { AppError } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { Button } from '@documenso/ui/primitives/button';
@@ -25,6 +25,8 @@ import { Input } from '@documenso/ui/primitives/input';
 import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { signupErrorMessages } from '~/components/forms/v2/signup';
+
 export type ClaimAccountProps = {
   defaultName: string;
   defaultEmail: string;
@@ -33,7 +35,10 @@ export type ClaimAccountProps = {
 
 export const ZClaimAccountFormSchema = z
   .object({
-    name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
+    name: z
+      .string()
+      .trim()
+      .min(1, { message: msg`Please enter a valid name.`.id }),
     email: z.string().email().min(1),
     password: ZPasswordSchema,
   })
@@ -43,7 +48,7 @@ export const ZClaimAccountFormSchema = z
       return !password.includes(name) && !password.includes(email.split('@')[0]);
     },
     {
-      message: 'Password should not be common or based on personal information',
+      message: msg`Password should not be common or based on personal information`.id,
       path: ['password'],
     },
   );
@@ -86,22 +91,16 @@ export const ClaimAccount = ({ defaultName, defaultEmail }: ClaimAccountProps) =
         email,
         timestamp: new Date().toISOString(),
       });
-    } catch (error) {
-      if (error instanceof TRPCClientError && error.data?.code === 'BAD_REQUEST') {
-        toast({
-          title: _(msg`An error occurred`),
-          description: error.message,
-          variant: 'destructive',
-        });
-      } else {
-        toast({
-          title: _(msg`An unknown error occurred`),
-          description: _(
-            msg`We encountered an unknown error while attempting to sign you up. Please try again later.`,
-          ),
-          variant: 'destructive',
-        });
-      }
+    } catch (err) {
+      const error = AppError.parseError(err);
+
+      const errorMessage = signupErrorMessages[error.code] ?? signupErrorMessages.INVALID_REQUEST;
+
+      toast({
+        title: _(msg`An error occurred`),
+        description: _(errorMessage),
+        variant: 'destructive',
+      });
     }
   };
 

apps/web/src/components/forms/avatar-image.tsx

@@ -13,10 +13,10 @@ import { match } from 'ts-pattern';
 import { z } from 'zod';
 
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import { AppError } from '@documenso/lib/errors/app-error';
 import { base64 } from '@documenso/lib/universal/base64';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import type { Team, User } from '@documenso/prisma/client';
-import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
 import { Avatar, AvatarFallback, AvatarImage } from '@documenso/ui/primitives/avatar';
@@ -111,21 +111,18 @@ export const AvatarImageForm = ({ className, user, team }: AvatarImageFormProps)
 
       router.refresh();
     } catch (err) {
-      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
-        toast({
-          title: _(msg`An error occurred`),
-          description: err.message,
-          variant: 'destructive',
-        });
-      } else {
-        toast({
-          title: _(msg`An unknown error occurred`),
-          description: _(
-            msg`We encountered an unknown error while attempting to update the avatar. Please try again later.`,
-          ),
-          variant: 'destructive',
-        });
-      }
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code).otherwise(
+        () =>
+          msg`We encountered an unknown error while attempting to update your password. Please try again later.`,
+      );
+
+      toast({
+        title: _(msg`An error occurred`),
+        description: _(errorMessage),
+        variant: 'destructive',
+      });
     }
   };
 

apps/web/src/components/forms/password.tsx

@@ -4,10 +4,11 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
 import { z } from 'zod';
 
+import { AppError } from '@documenso/lib/errors/app-error';
 import type { User } from '@documenso/prisma/client';
-import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { ZCurrentPasswordSchema, ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
@@ -73,21 +74,25 @@ export const PasswordForm = ({ className }: PasswordFormProps) => {
         duration: 5000,
       });
     } catch (err) {
-      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
-        toast({
-          title: _(msg`An error occurred`),
-          description: err.message,
-          variant: 'destructive',
-        });
-      } else {
-        toast({
-          title: _(msg`An unknown error occurred`),
-          description: _(
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with('NO_PASSWORD', () => msg`User has no password.`)
+        .with('INCORRECT_PASSWORD', () => msg`Current password is incorrect.`)
+        .with(
+          'SAME_PASSWORD',
+          () => msg`Your new password cannot be the same as your old password.`,
+        )
+        .otherwise(
+          () =>
             msg`We encountered an unknown error while attempting to update your password. Please try again later.`,
-          ),
-          variant: 'destructive',
-        });
-      }
+        );
+
+      toast({
+        title: _(msg`An error occurred`),
+        description: _(errorMessage),
+        variant: 'destructive',
+      });
     }
   };
 

apps/web/src/components/forms/reset-password.tsx

@@ -6,9 +6,10 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { useForm } from 'react-hook-form';
+import { match } from 'ts-pattern';
 import { z } from 'zod';
 
-import { TRPCClientError } from '@documenso/trpc/client';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
@@ -76,21 +77,25 @@ export const ResetPasswordForm = ({ className, token }: ResetPasswordFormProps)
 
       router.push('/signin');
     } catch (err) {
-      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
-        toast({
-          title: _(msg`An error occurred`),
-          description: err.message,
-          variant: 'destructive',
-        });
-      } else {
-        toast({
-          title: _(msg`An unknown error occurred`),
-          description: _(
+      const error = AppError.parseError(err);
+
+      const errorMessage = match(error.code)
+        .with(AppErrorCode.EXPIRED_CODE, () => msg`Token has expired. Please try again.`)
+        .with('INVALID_TOKEN', () => msg`Invalid token provided. Please try again.`)
+        .with(
+          'SAME_PASSWORD',
+          () => msg`Your new password cannot be the same as your old password.`,
+        )
+        .otherwise(
+          () =>
             msg`We encountered an unknown error while attempting to reset your password. Please try again later.`,
-          ),
-          variant: 'destructive',
-        });
-      }
+        );
+
+      toast({
+        title: _(msg`An error occurred`),
+        description: _(errorMessage),
+        variant: 'destructive',
+      });
     }
   };
 

apps/web/src/components/forms/signup.tsx

@@ -11,7 +11,7 @@ import { FcGoogle } from 'react-icons/fc';
 import { z } from 'zod';
 
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
-import { TRPCClientError } from '@documenso/trpc/client';
+import { AppError } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
@@ -29,6 +29,8 @@ import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+import { signupErrorMessages } from './v2/signup';
+
 const SIGN_UP_REDIRECT_PATH = '/documents';
 
 export const ZSignUpFormSchema = z
@@ -102,21 +104,15 @@ export const SignUpForm = ({
         timestamp: new Date().toISOString(),
       });
     } catch (err) {
-      if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
-        toast({
-          title: _(msg`An error occurred`),
-          description: err.message,
-          variant: 'destructive',
-        });
-      } else {
-        toast({
-          title: _(msg`An unknown error occurred`),
-          description: _(
-            msg`We encountered an unknown error while attempting to sign you up. Please try again later.`,
-          ),
-          variant: 'destructive',
-        });
-      }
+      const error = AppError.parseError(err);
+
+      const errorMessage = signupErrorMessages[error.code] ?? signupErrorMessages.INVALID_REQUEST;
+
+      toast({
+        title: _(msg`An error occurred`),
+        description: _(errorMessage),
+        variant: 'destructive',
+      });
     }
   };
 

apps/web/src/components/forms/v2/signup.tsx

@@ -7,6 +7,7 @@ import Link from 'next/link';
 import { useRouter, useSearchParams } from 'next/navigation';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import type { MessageDescriptor } from '@lingui/core';
 import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -20,7 +21,6 @@ import communityCardsImage from '@documenso/assets/images/community-cards.png';
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
 import { NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
-import { TRPCClientError } from '@documenso/trpc/client';
 import { trpc } from '@documenso/trpc/react';
 import { ZPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
 import { cn } from '@documenso/ui/lib/utils';
@@ -47,17 +47,20 @@ type SignUpStep = 'BASIC_DETAILS' | 'CLAIM_USERNAME';
 
 export const ZSignUpFormV2Schema = z
   .object({
-    name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
+    name: z
+      .string()
+      .trim()
+      .min(1, { message: msg`Please enter a valid name.`.id }),
     email: z.string().email().min(1),
     password: ZPasswordSchema,
-    signature: z.string().min(1, { message: 'We need your signature to sign documents' }),
+    signature: z.string().min(1, { message: msg`We need your signature to sign documents`.id }),
     url: z
       .string()
       .trim()
       .toLowerCase()
-      .min(1, { message: 'We need a username to create your profile' })
+      .min(1, { message: msg`We need a username to create your profile`.id })
       .regex(/^[a-z0-9-]+$/, {
-        message: 'Username can only container alphanumeric characters and dashes.',
+        message: msg`Username can only container alphanumeric characters and dashes.`.id,
       }),
   })
   .refine(
@@ -66,10 +69,18 @@ export const ZSignUpFormV2Schema = z
       return !password.includes(name) && !password.includes(email.split('@')[0]);
     },
     {
-      message: 'Password should not be common or based on personal information',
+      message: msg`Password should not be common or based on personal information`.id,
     },
   );
 
+export const signupErrorMessages: Record<string, MessageDescriptor> = {
+  SIGNUP_DISABLED: msg`Signups are disabled.`,
+  [AppErrorCode.ALREADY_EXISTS]: msg`User with this email already exists. Please use a different email address.`,
+  [AppErrorCode.INVALID_REQUEST]: msg`We were unable to create your account. Please review the information you provided and try again.`,
+  [AppErrorCode.PROFILE_URL_TAKEN]: msg`This username has already been taken`,
+  [AppErrorCode.PREMIUM_PROFILE_URL]: msg`Only subscribers can have a username shorter than 6 characters`,
+};
+
 export type TSignUpFormV2Schema = z.infer<typeof ZSignUpFormV2Schema>;
 
 export type SignUpFormV2Props = {
@@ -139,28 +150,20 @@ export const SignUpFormV2 = ({
     } catch (err) {
       const error = AppError.parseError(err);
 
-      if (error.code === AppErrorCode.PROFILE_URL_TAKEN) {
+      const errorMessage = signupErrorMessages[error.code] ?? signupErrorMessages.INVALID_REQUEST;
+
+      if (
+        error.code === AppErrorCode.PROFILE_URL_TAKEN ||
+        error.code === AppErrorCode.PREMIUM_PROFILE_URL
+      ) {
         form.setError('url', {
           type: 'manual',
-          message: _(msg`This username has already been taken`),
-        });
-      } else if (error.code === AppErrorCode.PREMIUM_PROFILE_URL) {
-        form.setError('url', {
-          type: 'manual',
-          message: error.message,
-        });
-      } else if (err instanceof TRPCClientError && err.data?.code === 'BAD_REQUEST') {
-        toast({
-          title: _(msg`An error occurred`),
-          description: err.message,
-          variant: 'destructive',
+          message: _(errorMessage),
         });
       } else {
         toast({
-          title: _(msg`An unknown error occurred`),
-          description: _(
-            msg`We encountered an unknown error while attempting to sign you up. Please try again later.`,
-          ),
+          title: _(msg`An error occurred`),
+          description: _(errorMessage),
           variant: 'destructive',
         });
       }

apps/web/src/pages/api/trpc/[trpc].ts

@@ -21,8 +21,7 @@ export default trpcNext.createNextApiHandler({
   onError(opts) {
     const { error, path } = opts;
 
-    // Currently trialing changes with template and team router only.
-    if (!path || (!path.startsWith('template') && !path.startsWith('team'))) {
+    if (!path) {
       return;
     }