feat: better error messages

app/components/LinkModal.vue

@@ -38,8 +38,8 @@ const onSubmit = async (event: FormSubmitEvent<Schema>) => {
       toast.add({ title: "Link created", color: "success" });
     }
     emit("close", true);
-  } catch {
-    toast.add({ title: "Something went wrong", color: "error" });
+  } catch (error) {
+    toast.add({ title: getApiError(error), color: "error" });
   } finally {
     submitting.value = false;
   }

app/utils/api.ts

@@ -0,0 +1,22 @@
+import { z } from "zod";
+
+const apiErrorSchema = z.object({
+  data: z.object({
+    statusCode: z.number(),
+    message: z.string(),
+  }),
+});
+
+export const getApiError = (
+  error: unknown,
+  defaultMessage: string = "Something went wrong",
+): string => {
+  const parsedError = apiErrorSchema.safeParse(error);
+  if (parsedError.success) {
+    if (parsedError.data.data.statusCode === 500) {
+      return `ERR-500: Internal server error`;
+    }
+    return `ERR-${parsedError.data.data.statusCode}: ${parsedError.data.data.message}`;
+  }
+  return defaultMessage;
+};