fix: Improve errors and remove parser to get accurate toasts (#2115)

* remove trpcError parser

Update errors to handle DB fails which will give a user a good error if
a DB operation fails

* Fix root key to actually error

* [autofix.ci] apply automated fixes

* Update apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-name.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update update-key-name.tsx

* [autofix.ci] apply automated fixes

* Update update-root-key-name.tsx

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/role-toggle.tsx

@@ -3,7 +3,6 @@
 import { Checkbox } from "@/components/ui/checkbox";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { parseTrpcError } from "@/lib/utils";
 import { Loader2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -33,10 +32,9 @@ export const RoleToggle: React.FC<Props> = ({ roleId, keyId, checked }) => {
         },
       });
     },
-    onError: (err) => {
+    onError(err) {
       console.error(err);
-      const message = parseTrpcError(err);
-      toast.error(message);
+      toast.error(err.message);
     },
     onSettled: () => {
       router.refresh();
@@ -58,10 +56,9 @@ export const RoleToggle: React.FC<Props> = ({ roleId, keyId, checked }) => {
         },
       });
     },
-    onError: (err) => {
+    onError(err) {
       console.error(err);
-      const message = parseTrpcError(err);
-      toast.error(message);
+      toast.error(err.message);
     },
     onSettled: () => {
       router.refresh();

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/delete-key.tsx

@@ -17,7 +17,6 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { trpc } from "@/lib/trpc/client";
-import { parseTrpcError } from "@/lib/utils";
 import { useRouter } from "next/navigation";
 
 type Props = {
@@ -39,8 +38,7 @@ export const DeleteKey: React.FC<Props> = ({ apiKey, keyAuthId }) => {
     },
     onError(err) {
       console.error(err);
-      const message = parseTrpcError(err);
-      toast.error(message);
+      toast.error(err.message);
     },
   });
 

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-enabled.tsx

@@ -13,7 +13,6 @@ import { Form, FormControl, FormField, FormItem, FormLabel } from "@/components/
 import { Switch } from "@/components/ui/switch";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { parseTrpcError } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
@@ -52,8 +51,7 @@ export const UpdateKeyEnabled: React.FC<Props> = ({ apiKey }) => {
     },
     onError(err) {
       console.error(err);
-      const message = parseTrpcError(err);
-      toast.error(message);
+      toast.error(err.message);
     },
   });
 

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-expiration.tsx

@@ -22,7 +22,7 @@ import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { cn, parseTrpcError } from "@/lib/utils";
+import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { format } from "date-fns";
 
@@ -74,8 +74,7 @@ export const UpdateKeyExpiration: React.FC<Props> = ({ apiKey }) => {
     },
     onError(err) {
       console.error(err);
-      const message = parseTrpcError(err);
-      toast.error(message);
+      toast.error(err.message);
     },
   });
 

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-metadata.tsx

@@ -14,7 +14,6 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { parseTrpcError } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
@@ -54,8 +53,7 @@ export const UpdateKeyMetadata: React.FC<Props> = ({ apiKey }) => {
     },
     onError(err) {
       console.error(err);
-      const message = parseTrpcError(err);
-      toast.error(message);
+      toast.error(err.message);
     },
   });
 

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-name.tsx

@@ -14,7 +14,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { cn, parseTrpcError } from "@/lib/utils";
+import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
@@ -56,8 +56,7 @@ export const UpdateKeyName: React.FC<Props> = ({ apiKey }) => {
     },
     onError(err) {
       console.error(err);
-      const message = parseTrpcError(err);
-      toast.error(message);
+      toast.error(err.message);
     },
   });
 

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-owner-id.tsx

@@ -14,7 +14,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { cn, parseTrpcError } from "@/lib/utils";
+import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
@@ -57,8 +57,7 @@ export const UpdateKeyOwnerId: React.FC<Props> = ({ apiKey }) => {
     },
     onError(err) {
       console.error(err);
-      const message = parseTrpcError(err);
-      toast.error(message);
+      toast.error(err.message);
     },
   });
 

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-ratelimit.tsx

@@ -23,7 +23,7 @@ import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { cn, parseTrpcError } from "@/lib/utils";
+import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { Key } from "@unkey/db";
 import { useRouter } from "next/navigation";
@@ -90,8 +90,7 @@ export const UpdateKeyRatelimit: React.FC<Props> = ({ apiKey }) => {
     },
     onError(err) {
       console.error(err);
-      const message = parseTrpcError(err);
-      toast.error(message);
+      toast.error(err.message);
     },
   });
   async function onSubmit(values: z.infer<typeof formSchema>) {

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/update-key-remaining.tsx

@@ -30,7 +30,7 @@ import {
 import { Switch } from "@/components/ui/switch";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { cn, parseTrpcError } from "@/lib/utils";
+import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
@@ -95,14 +95,15 @@ export const UpdateKeyRemaining: React.FC<Props> = ({ apiKey }) => {
     },
     onError(err) {
       console.error(err);
-      const message = parseTrpcError(err);
-      toast.error(message);
+      toast.error(err.message);
     },
   });
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
     if (values.refill?.interval !== "none" && !values.refill?.amount) {
-      form.setError("refill.amount", { message: "Please enter the number of uses per interval" });
+      form.setError("refill.amount", {
+        message: "Please enter the number of uses per interval",
+      });
       return;
     }
     if (values.refill.interval !== "none" && values.remaining === undefined) {

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx

@@ -30,7 +30,6 @@ import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { parseTrpcError } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { AlertCircle } from "lucide-react";
 import Link from "next/link";
@@ -176,8 +175,7 @@ export const CreateKey: React.FC<Props> = ({ apiId, keyAuthId }) => {
     },
     onError(err) {
       console.error(err);
-      const message = parseTrpcError(err);
-      toast.error(message);
+      toast.error(err.message);
     },
   });
 

apps/dashboard/app/(app)/apis/[apiId]/settings/delete-api.tsx

@@ -31,7 +31,7 @@ import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
-import { cn, parseTrpcError } from "@/lib/utils";
+import { cn } from "@/lib/utils";
 import { revalidate } from "./actions";
 
 type Props = {
@@ -74,8 +74,7 @@ export const DeleteApi: React.FC<Props> = ({ api, keys }) => {
     },
     onError(err) {
       console.error(err);
-      const message = parseTrpcError(err);
-      toast.error(message);
+      toast.error(err.message);
     },
   });
 

apps/dashboard/app/(app)/apis/[apiId]/settings/delete-protection.tsx

@@ -29,8 +29,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
-
-import { parseTrpcError } from "@/lib/utils";
 import { revalidate } from "./actions";
 
 type Props = {
@@ -68,15 +66,17 @@ export const DeleteProtection: React.FC<Props> = ({ api }) => {
     },
     onError(err) {
       console.error(err);
-      const message = parseTrpcError(err);
-      toast.error(message);
+      toast.error(err.message);
     },
   });
 
   const isValid = form.watch("name") === api.name;
 
   async function onSubmit(_: z.infer<typeof formSchema>) {
-    updateDeleteProtection.mutate({ apiId: api.id, enabled: !api.deleteProtection });
+    updateDeleteProtection.mutate({
+      apiId: api.id,
+      enabled: !api.deleteProtection,
+    });
   }
 
   if (api.deleteProtection) {

apps/dashboard/app/(app)/apis/[apiId]/settings/update-api-name.tsx

@@ -13,7 +13,6 @@ import { FormField } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { parseTrpcError } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
@@ -50,8 +49,7 @@ export const UpdateApiName: React.FC<Props> = ({ api }) => {
     },
     onError(err) {
       console.error(err);
-      const message = parseTrpcError(err);
-      toast.error(message);
+      toast.error(err.message);
     },
   });
   async function onSubmit(values: z.infer<typeof formSchema>) {

apps/dashboard/app/(app)/apis/[apiId]/settings/update-ip-whitelist.tsx

@@ -14,7 +14,7 @@ import { FormField } from "@/components/ui/form";
 import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { cn, parseTrpcError } from "@/lib/utils";
+import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { Workspace } from "@unkey/db";
 import Link from "next/link";
@@ -60,8 +60,7 @@ export const UpdateIpWhitelist: React.FC<Props> = ({ api, workspace }) => {
     },
     onError(err) {
       console.error(err);
-      const message = parseTrpcError(err);
-      toast.error(message);
+      toast.error(err.message);
     },
   });
 

apps/dashboard/app/(app)/apis/create-api-button.tsx

@@ -14,7 +14,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { parseTrpcError } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Plus } from "lucide-react";
 import { useRouter } from "next/navigation";
@@ -38,9 +37,8 @@ export const CreateApiButton = ({ ...rest }: React.ButtonHTMLAttributes<HTMLButt
       router.push(`/apis/${res.id}`);
     },
     onError(err) {
-      console.error(err.message);
-      const message = parseTrpcError(err);
-      toast.error(message);
+      console.error(err);
+      toast.error(err.message);
     },
   });
   async function onSubmit(values: z.infer<typeof formSchema>) {

apps/dashboard/app/(app)/authorization/permissions/[permissionId]/client.tsx

@@ -17,7 +17,6 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { parseTrpcError } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { Permission } from "@unkey/db";
 import { useRouter } from "next/navigation";
@@ -50,11 +49,6 @@ export const Client: React.FC<Props> = ({ permission }) => {
       toast.success("Permission updated");
       router.refresh();
     },
-    onError(err) {
-      console.error(err);
-      const message = parseTrpcError(err);
-      toast.error(message);
-    },
   });
 
   async function onSubmit(values: z.infer<typeof formSchema>) {

apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx

@@ -23,7 +23,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { parseTrpcError } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { DialogTrigger } from "@radix-ui/react-dialog";
 import { useRouter } from "next/navigation";
@@ -60,11 +59,6 @@ export const DeletePermission: React.FC<Props> = ({ trigger, permission }) => {
       revalidate("/authorization/permissions");
       router.push("/authorization/permissions");
     },
-    onError(err) {
-      console.error(err);
-      const message = parseTrpcError(err);
-      toast.error(message);
-    },
   });
 
   async function onSubmit() {

apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx

@@ -25,7 +25,6 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { parseTrpcError } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { DialogTrigger } from "@radix-ui/react-dialog";
 import { useRouter } from "next/navigation";
@@ -68,11 +67,6 @@ export const CreateNewPermission: React.FC<Props> = ({ trigger }) => {
       });
       setOpen(false);
     },
-    onError(err) {
-      console.error(err);
-      const message = parseTrpcError(err);
-      toast.error(message);
-    },
   });
 
   async function onSubmit(values: z.infer<typeof formSchema>) {

apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx

@@ -22,7 +22,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { parseTrpcError } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { DialogTrigger } from "@radix-ui/react-dialog";
 import { useRouter } from "next/navigation";
@@ -61,11 +60,6 @@ export const DeleteRole: React.FC<Props> = ({ trigger, role }) => {
       toast.success("Role deleted successfully");
       router.push("/authorization/roles");
     },
-    onError(err) {
-      console.error(err);
-      const message = parseTrpcError(err);
-      toast.error(message);
-    },
   });
 
   async function onSubmit() {