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/dashboard/credit-overview.tsx

@@ -1,8 +1,10 @@
 "use client";
 
+import { useEffect } from "react";
 import { useQuery } from "convex/react";
 import { CreditCard } from "lucide-react";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -10,6 +12,8 @@ import { Progress } from "@/components/ui/progress";
 import { api } from "@/convex/_generated/api";
 import { formatEurFromCents } from "@/lib/utils";
 import { cn } from "@/lib/utils";
+import { toast } from "@/lib/toast";
+import { msg } from "@/lib/toast-messages";
 
 // ---------------------------------------------------------------------------
 // Tier-Config — monatliches Credit-Kontingent pro Tier (in Cent)
@@ -35,11 +39,32 @@ const TIER_BADGE_STYLES: Record<string, string> = {
 // Component
 // ---------------------------------------------------------------------------
 
+const LOW_CREDITS_THRESHOLD = 20;
+
 export function CreditOverview() {
+  const router = useRouter();
   const balance = useQuery(api.credits.getBalance);
   const subscription = useQuery(api.credits.getSubscription);
   const usageStats = useQuery(api.credits.getUsageStats);
 
+  useEffect(() => {
+    if (balance === undefined) return;
+    const available = balance.available;
+    if (available <= 0 || available >= LOW_CREDITS_THRESHOLD) return;
+
+    const key = "ls-low-credits-dashboard";
+    if (typeof window !== "undefined" && sessionStorage.getItem(key)) return;
+    sessionStorage.setItem(key, "1");
+
+    const { title, desc } = msg.billing.lowCredits(available);
+    toast.action(title, {
+      description: desc,
+      label: msg.billing.topUp,
+      onClick: () => router.push("/settings/billing"),
+      type: "warning",
+    });
+  }, [balance, router]);
+
   // ── Loading State ──────────────────────────────────────────────────────
   if (
     balance === undefined ||