feat: integrate Sentry for error tracking and enhance user notifications

- Added Sentry integration for error tracking across various components, including error boundaries and user actions.
- Updated global error handling to capture exceptions and provide detailed feedback to users.
- Enhanced user notifications with toast messages for actions such as credit management, image generation, and canvas exports.
- Improved user experience by displaying relevant messages during interactions, ensuring better visibility of system states and errors.

components/providers.tsx

@@ -1,18 +1,37 @@
 "use client";
 
-import { ReactNode } from "react";
+import * as Sentry from "@sentry/nextjs";
+import { ReactNode, useEffect } from "react";
 import { ConvexReactClient } from "convex/react";
 import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react";
 import { AuthUIProvider } from "@daveyplate/better-auth-ui";
 import { ThemeProvider } from "next-themes";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { GooeyToaster } from "goey-toast";
+import "goey-toast/styles.css";
 
 import { authClient } from "@/lib/auth-client";
-import { Toaster } from "@/components/ui/sonner";
 
 const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
 
+function SentryAuthUserSync() {
+  const { data: session } = authClient.useSession();
+
+  useEffect(() => {
+    if (session?.user) {
+      Sentry.setUser({
+        id: session.user.id,
+        email: session.user.email ?? undefined,
+      });
+    } else {
+      Sentry.setUser(null);
+    }
+  }, [session?.user]);
+
+  return null;
+}
+
 export function Providers({
   children,
   initialToken,
@@ -29,6 +48,7 @@ export function Providers({
         authClient={authClient}
         initialToken={initialToken}
       >
+        <SentryAuthUserSync />
         <AuthUIProvider
           authClient={authClient}
           navigate={router.push}
@@ -37,7 +57,13 @@ export function Providers({
           Link={Link}
         >
           {children}
-          <Toaster position="bottom-right" />
+          <GooeyToaster
+            position="bottom-right"
+            theme="dark"
+            visibleToasts={4}
+            maxQueue={8}
+            queueOverflow="drop-oldest"
+          />
         </AuthUIProvider>
       </ConvexBetterAuthProvider>
     </ThemeProvider>