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/billing/manage-subscription.tsx

@@ -8,6 +8,8 @@ import { Button } from "@/components/ui/button";
 import { api } from "@/convex/_generated/api";
 import { authClient } from "@/lib/auth-client";
 import { normalizeTier, TIER_MONTHLY_CREDITS } from "@/lib/polar-products";
+import { toast } from "@/lib/toast";
+import { msg } from "@/lib/toast-messages";
 
 const TIER_LABELS: Record<keyof typeof TIER_MONTHLY_CREDITS, string> = {
   free: "Free",
@@ -39,7 +41,16 @@ export function ManageSubscription() {
       </div>
 
       {tier !== "free" && (
-        <Button variant="outline" onClick={() => authClient.customer.portal()}>
+        <Button
+          variant="outline"
+          onClick={() => {
+            toast.info(
+              msg.billing.openingPortal.title,
+              msg.billing.openingPortal.desc,
+            );
+            void authClient.customer.portal();
+          }}
+        >
           <ExternalLink className="mr-2 h-4 w-4" />
           Manage
         </Button>

components/billing/pricing-cards.tsx

@@ -12,6 +12,8 @@ import {
   SUBSCRIPTION_PRODUCTS,
   TIER_MONTHLY_CREDITS,
 } from "@/lib/polar-products";
+import { toast } from "@/lib/toast";
+import { msg } from "@/lib/toast-messages";
 
 const TIER_ORDER = ["free", "starter", "pro", "max"] as const;
 
@@ -20,6 +22,10 @@ export function PricingCards() {
   const currentTier = normalizeTier(subscription?.tier);
 
   async function handleCheckout(polarProductId: string) {
+    toast.info(
+      msg.billing.redirectingToCheckout.title,
+      msg.billing.redirectingToCheckout.desc,
+    );
     await authClient.checkout({ products: [polarProductId] });
   }
 

components/billing/topup-panel.tsx

@@ -8,6 +8,8 @@ import { Slider } from "@/components/ui/slider";
 import { authClient } from "@/lib/auth-client";
 import { TOPUP_PRODUCTS } from "@/lib/polar-products";
 import { calculateCustomTopup } from "@/lib/topup-calculator";
+import { toast } from "@/lib/toast";
+import { msg } from "@/lib/toast-messages";
 
 const CUSTOM_TOPUP_PRODUCT_ID = "POLAR_PRODUCT_ID_TOPUP_CUSTOM";
 
@@ -16,6 +18,10 @@ export function TopupPanel() {
   const { credits, bonusRate } = calculateCustomTopup(customAmount);
 
   async function handleTopup(polarProductId: string) {
+    toast.info(
+      msg.billing.redirectingToCheckout.title,
+      msg.billing.redirectingToCheckout.desc,
+    );
     await authClient.checkout({ products: [polarProductId] });
   }