feat: basic client side error handling

Author: izadoesdev

apps/dashboard/app/demo/[id]/users/[userId]/page.tsx

@@ -0,0 +1,2 @@
+export { default } from "../../../../(main)/websites/[id]/users/[userId]/page";
+

apps/docs/components/feedback.tsx

@@ -31,6 +31,7 @@ export type Feedback = {
 
 export type ActionResponse = {
 	success: boolean;
+	error?: string;
 };
 
 interface Result extends Feedback {
@@ -46,6 +47,7 @@ export function Feedback({
 	const [previous, setPrevious] = useState<Result | null>(null);
 	const [opinion, setOpinion] = useState<"good" | "bad" | null>(null);
 	const [message, setMessage] = useState("");
+	const [error, setError] = useState<string | null>(null);
 	const [isPending, startTransition] = useTransition();
 
 	useEffect(() => {
@@ -72,19 +74,25 @@ export function Feedback({
 			return;
 		}
 
+		setError(null);
+
 		startTransition(() => {
 			const feedback: Feedback = {
 				opinion,
 				message,
 			};
 
 			onRateAction(url, feedback).then((response) => {
-				setPrevious({
-					response,
-					...feedback,
-				});
-				setMessage("");
-				setOpinion(null);
+				if (response.success) {
+					setPrevious({
+						response,
+						...feedback,
+					});
+					setMessage("");
+					setOpinion(null);
+				} else {
+					setError(response.error ?? "Something went wrong");
+				}
 			});
 		});
 
@@ -154,6 +162,7 @@ export function Feedback({
 							onClick={() => {
 								setOpinion(previous.opinion);
 								setPrevious(null);
+								setError(null);
 							}}
 							type="button"
 						>
@@ -164,8 +173,18 @@ export function Feedback({
 					<form className="flex flex-col gap-3" onSubmit={submit}>
 						<textarea
 							autoFocus
-							className="resize-none rounded border border-border bg-muted/30 p-3 text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50"
-							onChange={(e) => setMessage(e.target.value)}
+							className={cn(
+								"resize-none rounded border bg-muted/30 p-3 text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1",
+								error
+									? "border-red-500 focus-visible:ring-red-500/50"
+									: "border-border focus-visible:ring-primary/50"
+							)}
+							onChange={(e) => {
+								setMessage(e.target.value);
+								if (error) {
+									setError(null);
+								}
+							}}
 							onKeyDown={(e) => {
 								if (!e.shiftKey && e.key === "Enter") {
 									submit(e);
@@ -175,6 +194,7 @@ export function Feedback({
 							required
 							value={message}
 						/>
+						{error && <p className="text-red-500 text-sm">{error}</p>}
 						<button
 							className={cn(
 								buttonVariants({ variant: "outline" }),

apps/docs/lib/feedback-action.ts

@@ -8,17 +8,39 @@ const client = new Databuddy({
     debug: process.env.NODE_ENV === "development",
 });
 
+const MAX_MESSAGE_LENGTH = 1000;
+const VALID_OPINIONS = ["good", "bad"] as const;
+
 export async function onRateDocs(
     url: string,
     feedback: Feedback
 ): Promise<ActionResponse> {
+
+    if (!VALID_OPINIONS.includes(feedback.opinion)) {
+        return { success: false, error: "Please select good or bad" };
+    }
+
+    if (typeof feedback.message !== "string") {
+        return { success: false, error: "Message is required" };
+    }
+
+    const trimmedMessage = feedback.message.trim();
+
+    if (trimmedMessage.length === 0) {
+        return { success: false, error: "Message cannot be empty" };
+    }
+
+    if (trimmedMessage.length > MAX_MESSAGE_LENGTH) {
+        return { success: false, error: `Message must be under ${MAX_MESSAGE_LENGTH} characters` };
+    }
+
     try {
         await client.track({
             name: "docs_feedback",
             properties: {
                 url,
                 opinion: feedback.opinion,
-                message: feedback.message,
+                message: trimmedMessage,
             },
         });
 
@@ -27,7 +49,7 @@ export async function onRateDocs(
         return { success: true };
     } catch (error) {
         console.error("Failed to capture docs feedback:", error);
-        return { success: false };
+        return { success: false, error: "Something went wrong. Please try again." };
     }
 }