feat: implement error handling in getCreditBalanceAction and add CreditsTest component for credit consumption testing

src/actions/get-credit-balance.ts

@@ -9,8 +9,19 @@ import { userActionClient } from '@/lib/safe-action';
  */
 export const getCreditBalanceAction = userActionClient.action(
   async ({ ctx }) => {
-    const currentUser = (ctx as { user: User }).user;
-    const credits = await getUserCredits(currentUser.id);
-    return { success: true, credits };
+    try {
+      const currentUser = (ctx as { user: User }).user;
+      const credits = await getUserCredits(currentUser.id);
+      return { success: true, credits };
+    } catch (error) {
+      console.error('get credit balance error:', error);
+      return {
+        success: false,
+        error:
+          error instanceof Error
+            ? error.message
+            : 'Failed to fetch credit balance',
+      };
+    }
   }
 );

src/app/[locale]/(marketing)/(pages)/about/page.tsx

@@ -1,6 +1,4 @@
-import { CreditsTest } from '@/components/dev/credits-test';
 import Container from '@/components/layout/container';
-import { BlurFadeDemo } from '@/components/magicui/example/blur-fade-example';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button, buttonVariants } from '@/components/ui/button';
 import { websiteConfig } from '@/config/website';
@@ -99,12 +97,6 @@ export default async function AboutPage() {
             </div>
           </div>
         </div>
-
-        {/* image section */}
-        {/* <BlurFadeDemo /> */}
-
-        {/* credits test */}
-        {/* <CreditsTest /> */}
       </div>
     </Container>
   );

src/app/[locale]/(marketing)/(pages)/test/page.tsx

@@ -0,0 +1,13 @@
+import Container from '@/components/layout/container';
+import { CreditsTest } from '@/components/test/credits-test';
+
+export default async function TestPage() {
+  return (
+    <Container className="py-16 px-4">
+      <div className="max-w-4xl mx-auto space-y-8">
+        {/* credits test */}
+        <CreditsTest />
+      </div>
+    </Container>
+  );
+}

src/hooks/use-credits.ts

@@ -31,7 +31,9 @@ export function useCreditBalance() {
       console.log('Fetching credit balance...');
       const result = await getCreditBalanceAction();
       if (!result?.data?.success) {
-        throw new Error('Failed to fetch credit balance');
+        throw new Error(
+          result?.data?.error || 'Failed to fetch credit balance'
+        );
       }
       console.log('Credit balance fetched:', result.data.credits);
       return result.data.credits || 0;