• examples/convex/package.json
• pnpm-lock.yaml

examples/convex/app/server/page.tsx (1)

25-25: Simplify JSON processing.

The code performs JSON.stringify(JSON.parse(userInfo), null, 2) which suggests userInfo is already a JSON string. If getUserInfo returns a JSON string, this double processing is redundant and could be simplified.

Consider one of these approaches:

1. If the query returns an object, remove JSON.parse:

-          <pre>{JSON.stringify(JSON.parse(userInfo), null, 2)}</pre>
+          <pre>{JSON.stringify(userInfo, null, 2)}</pre>

2. If the query returns a JSON string, remove JSON.stringify:

-          <pre>{JSON.stringify(JSON.parse(userInfo), null, 2)}</pre>
+          <pre>{JSON.parse(userInfo)}</pre>

examples/convex/app/page.tsx (1)

51-65: Add error handling for async button click handlers.

The async operations in the onClick handlers lack error handling. If the promises reject, users will see unhandled promise rejections in the console without any feedback in the UI.

Apply this diff to add error handling:

         <button className="bg-foreground text-background text-sm px-4 py-2 rounded-md" onClick={() => {
           getUserInfoConvexHttpClient().then(userInfo => {
             alert(userInfo);
-          });
+          }).catch(error => {
+            alert(`Error fetching user info: ${error.message}`);
+          });
         }}>
           View user info (http client)
         </button>
         <button className="bg-foreground text-background text-sm px-4 py-2 rounded-md" onClick={() => {
           getUserInfoConvexClient().then(userInfo => {
             alert(userInfo);
-          });
+          }).catch(error => {
+            alert(`Error fetching user info: ${error.message}`);
+          });
         }}>
           View user info (js client)
         </button>

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

examples/convex/convex/myActions.ts (2)

18-18: Remove redundant optional chaining.

Line 18 uses optional chaining (partialUser?.id) after already checking !partialUser on Line 15. The optional chaining is redundant since partialUser is guaranteed to be non-null at this point.

Apply this diff:

-    const user = await stackServerApp.getUser(partialUser?.id);
+    const user = await stackServerApp.getUser(partialUser.id);

---

22-25: Add explicit return value and error handling.

The action currently:

1. Returns undefined implicitly after a successful metadata update, which may confuse callers
2. Lacks error handling for the setClientReadOnlyMetadata call, which could throw

Consider returning a success indicator and wrapping the update in try-catch.

Apply this diff:

-    await user.setClientReadOnlyMetadata({
-      test: args.testMetadata,
-    })
+    try {
+      await user.setClientReadOnlyMetadata({
+        test: args.testMetadata,
+      });
+      return { success: true };
+    } catch (error) {
+      console.error("Failed to update metadata:", error);
+      return { success: false, error: String(error) };
+    }
   },
 });

examples/convex/app/action/page.tsx (2)

22-22: Add label for accessibility.

The input field lacks an associated label, which impacts keyboard navigation and screen reader users.

Apply this diff to add a label:

+      <label htmlFor="metadata-input" className="text-sm font-medium">Test Metadata</label>
-      <input type="text" placeholder="test 123" className="border border-slate-300 rounded-md p-2" onChange={(e) => setData(e.target.value)} />
+      <input id="metadata-input" type="text" placeholder="test 123" className="border border-slate-300 rounded-md p-2" onChange={(e) => setData(e.target.value)} />

---

23-31: Add error handling and improve UX.

The button click handler has several issues:

1. No error handling for the action call—failures will silently break the flow
2. Using alert() interrupts the user experience
3. Requiring a manual refresh to see changes is suboptimal
4. Button text "My Action" is not descriptive of what it does

Apply this diff:

+      const [isUpdating, setIsUpdating] = useState(false);
+      const [message, setMessage] = useState<string | null>(null);
+
       <button
         className="bg-foreground text-background text-sm px-4 py-2 rounded-md"
+        disabled={isUpdating}
         onClick={async () => {
-          await myAction({ testMetadata: data ?? "" })
-          alert("User's client read-only metadata updated, refresh to see changes")
+          setIsUpdating(true);
+          setMessage(null);
+          try {
+            await myAction({ testMetadata: data ?? "" });
+            setMessage("Metadata updated successfully!");
+            // Optionally trigger a user refetch here instead of requiring manual refresh
+          } catch (error) {
+            setMessage(`Failed to update metadata: ${error}`);
+          } finally {
+            setIsUpdating(false);
+          }
         }}
       >
-        My Action
+        {isUpdating ? "Updating..." : "Update Metadata"}
       </button>
+      {message && <div className="text-sm">{message}</div>}

Note: You'll need to add the state declarations near the top of the component (after line 11).

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro