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.
2026-03-27 18:14:04 +01:00
parent 5da0204163
commit 2f89465e82
35 changed files with 2822 additions and 186 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -39,3 +39,8 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Sentry Config File
+.env.sentry-build-plugin
+.cursor
+.cursor/*
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -2,7 +2,7 @@

 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useTheme } from "next-themes";
 import { useMutation, useQuery } from "convex/react";
 import {
@@ -33,6 +33,8 @@ import { authClient } from "@/lib/auth-client";
 import { CreditOverview } from "@/components/dashboard/credit-overview";
 import { RecentTransactions } from "@/components/dashboard/recent-transactions";
 import CanvasCard from "@/components/dashboard/canvas-card";
+import { toast } from "@/lib/toast";
+import { msg } from "@/lib/toast-messages";


 function getInitials(nameOrEmail: string) {
@@ -49,6 +51,7 @@ function getInitials(nameOrEmail: string) {

 export default function DashboardPage() {
  const router = useRouter();
+  const welcomeToastSentRef = useRef(false);
  const { theme = "system", setTheme } = useTheme();
  const { data: session, isPending: isSessionPending } = authClient.useSession();
  const canvases = useQuery(
@@ -61,7 +64,17 @@ export default function DashboardPage() {
  const displayName = session?.user.name?.trim() || session?.user.email || "Nutzer";
  const initials = getInitials(displayName);

+  useEffect(() => {
+    if (!session?.user || welcomeToastSentRef.current) return;
+    const key = `ls-dashboard-welcome-${session.user.id}`;
+    if (typeof window !== "undefined" && sessionStorage.getItem(key)) return;
+    welcomeToastSentRef.current = true;
+    sessionStorage.setItem(key, "1");
+    toast.success(msg.auth.welcomeOnDashboard.title);
+  }, [session?.user]);
+
  const handleSignOut = async () => {
+    toast.info(msg.auth.signedOut.title);
    await authClient.signOut();
    router.replace("/auth/sign-in");
    router.refresh();
--- a/app/error.tsx
+++ b/app/error.tsx
@@ -1,5 +1,6 @@
 "use client";

+import * as Sentry from "@sentry/nextjs";
 import { useEffect } from "react";

 import { Button } from "@/components/ui/button";
@@ -11,6 +12,8 @@ type AppErrorProps = {

 export default function AppError({ error, unstable_retry }: AppErrorProps) {
  useEffect(() => {
+    Sentry.captureException(error);
+
    const safeError = {
      name: error.name,
      message:
--- a/app/global-error.tsx
+++ b/app/global-error.tsx
@@ -1,5 +1,8 @@
 "use client";

+import * as Sentry from "@sentry/nextjs";
+import { useEffect } from "react";
+
 import { Button } from "@/components/ui/button";

 type GlobalErrorProps = {
@@ -11,6 +14,10 @@ export default function GlobalError({
  error,
  unstable_retry,
 }: GlobalErrorProps) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
  return (
    <html lang="de" className="h-full antialiased font-sans">
      <body className="min-h-full bg-background text-foreground">
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,10 +1,11 @@
 import type { Metadata } from "next";
 import { Manrope } from "next/font/google";
+import * as Sentry from "@sentry/nextjs";
 import "./globals.css";
 import { cn } from "@/lib/utils";
 import { Providers } from "@/components/providers";
 import { InitUser } from "@/components/init-user";
-import { getToken } from "@/lib/auth-server";
+import { getAuthUser, getToken } from "@/lib/auth-server";

 const manrope = Manrope({ subsets: ["latin"], variable: "--font-sans" });

@@ -19,6 +20,16 @@ export default async function RootLayout({
  children: React.ReactNode;
 }>) {
  const initialToken = await getToken();
+  const user = await getAuthUser();
+  if (user) {
+    const id = user.userId ?? String(user._id);
+    Sentry.setUser({
+      id,
+      email: user.email ?? undefined,
+    });
+  } else {
+    Sentry.setUser(null);
+  }

  return (
    <html
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,6 +3,8 @@
 import { authClient } from "@/lib/auth-client";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
+import { toast } from "@/lib/toast";
+import { msg } from "@/lib/toast-messages";

 export default function Home() {
  const { data: session, isPending } = authClient.useSession();
@@ -32,7 +34,10 @@ export default function Home() {
            Zum Dashboard
          </Link>
          <button
-            onClick={() => authClient.signOut().then(() => router.refresh())}
+            onClick={() => {
+              toast.info(msg.auth.signedOut.title);
+              void authClient.signOut().then(() => router.refresh());
+            }}
            className="rounded-lg border border-border px-6 py-3 text-sm hover:bg-accent"
          >
            Abmelden
--- a/components/billing/manage-subscription.tsx
+++ b/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>
--- a/components/billing/pricing-cards.tsx
+++ b/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] });
  }

--- a/components/billing/topup-panel.tsx
+++ b/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] });
  }

--- a/components/canvas/canvas.tsx
+++ b/components/canvas/canvas.tsx
@@ -11,6 +11,7 @@ import {
  applyNodeChanges,
  applyEdgeChanges,
  useReactFlow,
+  useStoreApi,
  reconnectEdge,
  type Node as RFNode,
  type Edge as RFEdge,
@@ -22,6 +23,7 @@ import {
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import { toast } from "@/lib/toast";
+import { msg } from "@/lib/toast-messages";

 import { useConvexAuth, useMutation, useQuery } from "convex/react";
 import { api } from "@/convex/_generated/api";
@@ -170,8 +172,67 @@ function normalizeHandle(handle: string | null | undefined): string | undefined
  return handle ?? undefined;
 }

+function shallowEqualRecord(
+  a: Record<string, unknown>,
+  b: Record<string, unknown>,
+): boolean {
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+
+  if (aKeys.length !== bKeys.length) return false;
+
+  for (const key of aKeys) {
+    if (a[key] !== b[key]) return false;
+  }
+
+  return true;
+}
+
+function mergeNodesPreservingLocalState(
+  previousNodes: RFNode[],
+  incomingNodes: RFNode[],
+): RFNode[] {
+  const previousById = new Map(previousNodes.map((node) => [node.id, node]));
+
+  return incomingNodes.map((incomingNode) => {
+    const previousNode = previousById.get(incomingNode.id);
+    if (!previousNode) {
+      return incomingNode;
+    }
+
+    const previousData = previousNode.data as Record<string, unknown>;
+    const incomingData = incomingNode.data as Record<string, unknown>;
+    const previousWidth = previousNode.style?.width;
+    const previousHeight = previousNode.style?.height;
+    const incomingWidth = incomingNode.style?.width;
+    const incomingHeight = incomingNode.style?.height;
+
+    const isStructurallyEqual =
+      previousNode.type === incomingNode.type &&
+      previousNode.parentId === incomingNode.parentId &&
+      previousNode.zIndex === incomingNode.zIndex &&
+      previousNode.position.x === incomingNode.position.x &&
+      previousNode.position.y === incomingNode.position.y &&
+      previousWidth === incomingWidth &&
+      previousHeight === incomingHeight &&
+      shallowEqualRecord(previousData, incomingData);
+
+    if (isStructurallyEqual) {
+      return previousNode;
+    }
+
+    return {
+      ...previousNode,
+      ...incomingNode,
+      selected: previousNode.selected,
+      dragging: previousNode.dragging,
+    };
+  });
+}
+
 function CanvasInner({ canvasId }: CanvasInnerProps) {
  const { screenToFlowPosition } = useReactFlow();
+  const storeApi = useStoreApi();
  const { resolvedTheme } = useTheme();
  const { data: session, isPending: isSessionPending } = authClient.useSession();
  const { isLoading: isAuthLoading, isAuthenticated } = useConvexAuth();
@@ -301,8 +362,9 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
    }

    if (recentFailures.length >= GENERATION_FAILURE_THRESHOLD) {
-      toast.error(
-        "Mehrere Generierungen sind fehlgeschlagen. Bitte Prompt, Modell oder Credits prüfen.",
+      toast.warning(
+        msg.ai.openrouterIssues.title,
+        msg.ai.openrouterIssues.desc,
      );
      recentGenerationFailureTimestampsRef.current = [];
      return;
@@ -315,7 +377,10 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
  useEffect(() => {
    if (!convexNodes || isDragging.current) return;
    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setNodes(withResolvedCompareData(convexNodes.map(convexNodeToRF), edges));
+    setNodes((previousNodes) => {
+      const incomingNodes = withResolvedCompareData(convexNodes.map(convexNodeToRF), edges);
+      return mergeNodesPreservingLocalState(previousNodes, incomingNodes);
+    });
  }, [convexNodes, edges]);

  useEffect(() => {
@@ -367,6 +432,56 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
    setEdges((eds) => applyEdgeChanges(changes, eds));
  }, []);

+  const onFlowError = useCallback(
+    (code: string, message: string) => {
+      if (process.env.NODE_ENV === "production") return;
+
+      if (code !== "015") {
+        console.error("[ReactFlow error]", { canvasId, code, message });
+        return;
+      }
+
+      const state = storeApi.getState() as {
+        nodeLookup?: Map<
+          string,
+          {
+            id: string;
+            selected?: boolean;
+            type?: string;
+            measured?: { width?: number; height?: number };
+            internals?: { positionAbsolute?: { x: number; y: number } };
+          }
+        >;
+      };
+
+      const uninitializedNodes = Array.from(state.nodeLookup?.values() ?? [])
+        .filter(
+          (node) =>
+            node.measured?.width === undefined ||
+            node.measured?.height === undefined,
+        )
+        .map((node) => ({
+          id: node.id,
+          type: node.type ?? null,
+          selected: Boolean(node.selected),
+          measuredWidth: node.measured?.width,
+          measuredHeight: node.measured?.height,
+          positionAbsolute: node.internals?.positionAbsolute ?? null,
+        }));
+
+      console.error("[ReactFlow error 015 diagnostics]", {
+        canvasId,
+        message,
+        localNodeCount: nodes.length,
+        localSelectedNodeIds: nodes.filter((n) => n.selected).map((n) => n.id),
+        isDragging: isDragging.current,
+        uninitializedNodeCount: uninitializedNodes.length,
+        uninitializedNodes,
+      });
+    },
+    [canvasId, nodes, storeApi],
+  );
+
  // ─── Delete Edge on Drop ──────────────────────────────────────
  const onReconnectStart = useCallback(() => {
    edgeReconnectSuccessful.current = false;
@@ -614,6 +729,7 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
  // ─── Node löschen → Convex ────────────────────────────────────
  const onNodesDelete = useCallback(
    async (deletedNodes: RFNode[]) => {
+      const count = deletedNodes.length;
      for (const node of deletedNodes) {
        const incomingEdges = edges.filter((e) => e.target === node.id);
        const outgoingEdges = edges.filter((e) => e.source === node.id);
@@ -634,6 +750,10 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {

        removeNode({ nodeId: node.id as Id<"nodes"> });
      }
+      if (count > 0) {
+        const { title } = msg.canvas.nodesRemoved(count);
+        toast.info(title);
+      }
    },
    [edges, removeNode, createEdge, canvasId],
  );
@@ -732,6 +852,7 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
          onReconnectEnd={onReconnectEnd}
          onNodesDelete={onNodesDelete}
          onEdgesDelete={onEdgesDelete}
+          onError={onFlowError}
          onDragOver={onDragOver}
          onDrop={onDrop}
          fitView
--- a/components/canvas/connection-banner.tsx
+++ b/components/canvas/connection-banner.tsx
@@ -4,6 +4,8 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { useConvexConnectionState } from "convex/react";

 import { cn } from "@/lib/utils";
+import { toast, toastDuration } from "@/lib/toast";
+import { msg } from "@/lib/toast-messages";

 type BannerState = "hidden" | "reconnecting" | "disconnected" | "reconnected";

@@ -12,6 +14,7 @@ const RECONNECTED_HIDE_DELAY_MS = 1800;
 export default function ConnectionBanner() {
  const connectionState = useConvexConnectionState();
  const previousConnectedRef = useRef(connectionState.isWebSocketConnected);
+  const disconnectToastIdRef = useRef<string | number | undefined>(undefined);
  const [showReconnected, setShowReconnected] = useState(false);
  const [isBrowserOnline, setIsBrowserOnline] = useState(
    typeof navigator === "undefined" ? true : navigator.onLine,
@@ -33,14 +36,19 @@ export default function ConnectionBanner() {
  useEffect(() => {
    const wasConnected = previousConnectedRef.current;
    const isConnected = connectionState.isWebSocketConnected;
-    const didReconnect = !wasConnected && isConnected && connectionState.connectionCount > 1;
+    const didReconnect =
+      !wasConnected && isConnected && connectionState.connectionCount > 1;

    if (didReconnect) {
-      setShowReconnected(true);
+      queueMicrotask(() => {
+        setShowReconnected(true);
+      });
    }

    if (!isConnected) {
-      setShowReconnected(false);
+      queueMicrotask(() => {
+        setShowReconnected(false);
+      });
    }

    previousConnectedRef.current = isConnected;
@@ -58,6 +66,39 @@ export default function ConnectionBanner() {
    return () => window.clearTimeout(timeoutId);
  }, [showReconnected]);

+  useEffect(() => {
+    const connected = connectionState.isWebSocketConnected;
+    const shouldAlertDisconnect =
+      !connected &&
+      (!isBrowserOnline ||
+        connectionState.hasEverConnected ||
+        connectionState.connectionRetries > 0);
+
+    if (shouldAlertDisconnect) {
+      if (disconnectToastIdRef.current === undefined) {
+        disconnectToastIdRef.current = toast.error(
+          msg.system.connectionLost.title,
+          msg.system.connectionLost.desc,
+          { duration: Number.POSITIVE_INFINITY },
+        );
+      }
+      return;
+    }
+
+    if (connected && disconnectToastIdRef.current !== undefined) {
+      toast.dismiss(disconnectToastIdRef.current);
+      disconnectToastIdRef.current = undefined;
+      toast.success(msg.system.reconnected.title, undefined, {
+        duration: toastDuration.successShort,
+      });
+    }
+  }, [
+    connectionState.connectionRetries,
+    connectionState.hasEverConnected,
+    connectionState.isWebSocketConnected,
+    isBrowserOnline,
+  ]);
+
  const bannerState = useMemo<BannerState>(() => {
    if (connectionState.isWebSocketConnected) {
      return showReconnected ? "reconnected" : "hidden";
--- a/components/canvas/credit-display.tsx
+++ b/components/canvas/credit-display.tsx
@@ -4,6 +4,7 @@ import { useMutation, useQuery } from "convex/react";
 import { api } from "@/convex/_generated/api";
 import { Coins } from "lucide-react";
 import { toast } from "@/lib/toast";
+import { msg } from "@/lib/toast-messages";

 const TIER_LABELS: Record<string, string> = {
  free: "Free",
@@ -90,11 +91,16 @@ export function CreditDisplay() {
          onClick={() => {
            void grantTestCredits({ amount: 2000 })
              .then((r) => {
-                toast.success(`+2000 Cr — Stand: ${r.newBalance.toLocaleString("de-DE")}`);
+                const { title, desc } = msg.billing.creditsAdded(2000);
+                toast.success(
+                  title,
+                  `${desc} — Stand: ${r.newBalance.toLocaleString("de-DE")}`,
+                );
              })
              .catch((e: unknown) => {
                toast.error(
-                  e instanceof Error ? e.message : "Gutschrift fehlgeschlagen",
+                  msg.billing.testGrantFailed.title,
+                  e instanceof Error ? e.message : undefined,
                );
              });
          }}
--- a/components/canvas/export-button.tsx
+++ b/components/canvas/export-button.tsx
@@ -7,6 +7,8 @@ import JSZip from "jszip";
 import { Archive, Loader2 } from "lucide-react";
 import { api } from "@/convex/_generated/api";
 import type { Id } from "@/convex/_generated/dataModel";
+import { toast } from "@/lib/toast";
+import { msg } from "@/lib/toast-messages";

 interface ExportButtonProps {
  canvasName?: string;
@@ -24,12 +26,14 @@ export function ExportButton({ canvasName = "canvas" }: ExportButtonProps) {
    setIsExporting(true);
    setError(null);

-    try {
+    const NO_FRAMES = "NO_FRAMES";
+
+    const runExport = async () => {
      const nodes = getNodes();
      const frameNodes = nodes.filter((node) => node.type === "frame");

      if (frameNodes.length === 0) {
-        throw new Error("No frames on canvas - add a Frame node first");
+        throw new Error(NO_FRAMES);
      }

      const zip = new JSZip();
@@ -64,8 +68,36 @@ export function ExportButton({ canvasName = "canvas" }: ExportButtonProps) {
      anchor.click();

      URL.revokeObjectURL(url);
+    };
+
+    try {
+      await toast.promise(runExport(), {
+        loading: msg.export.exportingFrames.title,
+        success: msg.export.zipReady.title,
+        error: (err) => {
+          const m = err instanceof Error ? err.message : "";
+          if (m === NO_FRAMES) return msg.export.noFramesOnCanvas.title;
+          if (m.includes("No images found")) return msg.export.frameEmpty.title;
+          return msg.export.exportFailed.title;
+        },
+        description: {
+          error: (err) => {
+            const m = err instanceof Error ? err.message : "";
+            if (m === NO_FRAMES) return msg.export.noFramesOnCanvas.desc;
+            if (m.includes("No images found")) return msg.export.frameEmpty.desc;
+            return m || undefined;
+          },
+        },
+      });
    } catch (err) {
-      setError(err instanceof Error ? err.message : "Export failed");
+      const m = err instanceof Error ? err.message : "";
+      if (m === NO_FRAMES) {
+        setError(msg.export.noFramesOnCanvas.desc);
+      } else if (m.includes("No images found")) {
+        setError(msg.export.frameEmpty.desc);
+      } else {
+        setError(m || msg.export.exportFailed.title);
+      }
    } finally {
      setIsExporting(false);
      setProgress(null);
--- a/components/canvas/nodes/ai-image-node.tsx
+++ b/components/canvas/nodes/ai-image-node.tsx
@@ -10,6 +10,8 @@ import BaseNodeWrapper from "./base-node-wrapper";
 import { DEFAULT_MODEL_ID, getModel } from "@/lib/ai-models";
 import { classifyError, type AiErrorCategory } from "@/lib/ai-errors";
 import { DEFAULT_ASPECT_RATIO } from "@/lib/image-formats";
+import { toast } from "@/lib/toast";
+import { msg } from "@/lib/toast-messages";
 import {
  Loader2,
  AlertCircle,
@@ -106,16 +108,30 @@ export default function AiImageNode({
        }
      }

-      await generateImage({
-        canvasId,
-        nodeId: id as Id<"nodes">,
-        prompt,
-        referenceStorageId,
-        model: nodeData.model ?? DEFAULT_MODEL_ID,
-        aspectRatio: nodeData.aspectRatio ?? DEFAULT_ASPECT_RATIO,
-      });
+      const modelId = nodeData.model ?? DEFAULT_MODEL_ID;
+      const regenCreditCost = getModel(modelId)?.creditCost ?? 4;
+
+      await toast.promise(
+        generateImage({
+          canvasId,
+          nodeId: id as Id<"nodes">,
+          prompt,
+          referenceStorageId,
+          model: modelId,
+          aspectRatio: nodeData.aspectRatio ?? DEFAULT_ASPECT_RATIO,
+        }),
+        {
+          loading: msg.ai.generating.title,
+          success: msg.ai.generated.title,
+          error: msg.ai.generationFailed.title,
+          description: {
+            success: msg.ai.generatedDesc(regenCreditCost),
+            error: msg.ai.creditsNotCharged,
+          },
+        },
+      );
    } catch (err) {
-      setLocalError(err instanceof Error ? err.message : "Generation failed");
+      setLocalError(err instanceof Error ? err.message : msg.ai.generationFailed.title);
    } finally {
      setIsGenerating(false);
    }
--- a/components/canvas/nodes/frame-node.tsx
+++ b/components/canvas/nodes/frame-node.tsx
@@ -8,6 +8,8 @@ import { api } from "@/convex/_generated/api";
 import type { Id } from "@/convex/_generated/dataModel";
 import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
 import BaseNodeWrapper from "./base-node-wrapper";
+import { toast } from "@/lib/toast";
+import { msg } from "@/lib/toast-messages";

 interface FrameNodeData {
  label?: string;
@@ -43,16 +45,29 @@ export default function FrameNode({ id, data, selected, width, height }: NodePro

    try {
      const result = await exportFrame({ frameNodeId: id as Id<"nodes"> });
-      const a = document.createElement("a");
-      a.href = result.url;
-      a.download = result.filename;
-      a.click();
+      const fileLabel = `${label.trim() || "frame"}.png`;
+      toast.action(msg.export.frameExported.title, {
+        description: fileLabel,
+        label: msg.export.download,
+        onClick: () => {
+          window.open(result.url, "_blank", "noopener,noreferrer");
+        },
+        successLabel: msg.export.downloaded,
+        type: "success",
+      });
    } catch (error) {
-      setExportError(error instanceof Error ? error.message : "Export failed");
+      const m = error instanceof Error ? error.message : "";
+      if (m.includes("No images found")) {
+        toast.error(msg.export.frameEmpty.title, msg.export.frameEmpty.desc);
+        setExportError(msg.export.frameEmpty.desc);
+      } else {
+        toast.error(msg.export.exportFailed.title, m || undefined);
+        setExportError(m || msg.export.exportFailed.title);
+      }
    } finally {
      setIsExporting(false);
    }
-  }, [exportFrame, id, isExporting]);
+  }, [exportFrame, id, isExporting, label]);

  const frameW = Math.round(width ?? 400);
  const frameH = Math.round(height ?? 300);
--- a/components/canvas/nodes/image-node.tsx
+++ b/components/canvas/nodes/image-node.tsx
@@ -13,6 +13,15 @@ import { api } from "@/convex/_generated/api";
 import type { Id } from "@/convex/_generated/dataModel";
 import Image from "next/image";
 import BaseNodeWrapper from "./base-node-wrapper";
+import { toast } from "@/lib/toast";
+import { msg } from "@/lib/toast-messages";
+
+const ALLOWED_IMAGE_TYPES = new Set([
+  "image/png",
+  "image/jpeg",
+  "image/webp",
+]);
+const MAX_IMAGE_BYTES = 10 * 1024 * 1024;

 type ImageNodeData = {
  storageId?: string;
@@ -34,7 +43,21 @@ export default function ImageNode({ id, data, selected }: NodeProps<ImageNode>)

  const uploadFile = useCallback(
    async (file: File) => {
-      if (!file.type.startsWith("image/")) return;
+      if (!ALLOWED_IMAGE_TYPES.has(file.type)) {
+        const { title, desc } = msg.canvas.uploadFormatError(
+          file.type || file.name.split(".").pop() || "—",
+        );
+        toast.error(title, desc);
+        return;
+      }
+      if (file.size > MAX_IMAGE_BYTES) {
+        const { title, desc } = msg.canvas.uploadSizeError(
+          Math.round(MAX_IMAGE_BYTES / (1024 * 1024)),
+        );
+        toast.error(title, desc);
+        return;
+      }
+
      setIsUploading(true);

      try {
@@ -59,8 +82,13 @@ export default function ImageNode({ id, data, selected }: NodeProps<ImageNode>)
            mimeType: file.type,
          },
        });
+        toast.success(msg.canvas.imageUploaded.title);
      } catch (err) {
        console.error("Upload failed:", err);
+        toast.error(
+          msg.canvas.uploadFailed.title,
+          err instanceof Error ? err.message : undefined,
+        );
      } finally {
        setIsUploading(false);
      }
--- a/components/canvas/nodes/node-error-boundary.tsx
+++ b/components/canvas/nodes/node-error-boundary.tsx
@@ -1,5 +1,6 @@
 "use client";

+import * as Sentry from "@sentry/nextjs";
 import type { ErrorInfo, ReactNode } from "react";
 import { Component } from "react";

@@ -29,6 +30,11 @@ export class NodeErrorBoundary extends Component<
  }

  override componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    Sentry.captureException(error, {
+      tags: { nodeType: this.props.nodeType },
+      extra: { componentStack: errorInfo.componentStack },
+    });
+
    console.error("Node rendering error", {
      nodeType: this.props.nodeType,
      error,
--- a/components/canvas/nodes/prompt-node.tsx
+++ b/components/canvas/nodes/prompt-node.tsx
@@ -34,6 +34,9 @@ import {
  SelectValue,
 } from "@/components/ui/select";
 import { Sparkles, Loader2, Coins } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { toast } from "@/lib/toast";
+import { msg } from "@/lib/toast-messages";

 type PromptNodeData = {
  prompt?: string;
@@ -52,6 +55,7 @@ export default function PromptNode({
  selected,
 }: NodeProps<PromptNode>) {
  const nodeData = data as PromptNodeData;
+  const router = useRouter();
  const { getEdges, getNode } = useReactFlow();

  const [prompt, setPrompt] = useState(nodeData.prompt ?? "");
@@ -151,6 +155,21 @@ export default function PromptNode({

  const handleGenerate = useCallback(async () => {
    if (!effectivePrompt.trim() || isGenerating) return;
+
+    if (availableCredits !== null && !hasEnoughCredits) {
+      const { title, desc } = msg.ai.insufficientCredits(
+        creditCost,
+        availableCredits,
+      );
+      toast.action(title, {
+        description: desc,
+        label: msg.billing.topUp,
+        onClick: () => router.push("/settings/billing"),
+        type: "warning",
+      });
+      return;
+    }
+
    setError(null);
    setIsGenerating(true);

@@ -214,16 +233,27 @@ export default function PromptNode({
        targetHandle: "prompt-in",
      });

-      await generateImage({
-        canvasId,
-        nodeId: aiNodeId,
-        prompt: promptToUse,
-        referenceStorageId,
-        model: DEFAULT_MODEL_ID,
-        aspectRatio,
-      });
+      await toast.promise(
+        generateImage({
+          canvasId,
+          nodeId: aiNodeId,
+          prompt: promptToUse,
+          referenceStorageId,
+          model: DEFAULT_MODEL_ID,
+          aspectRatio,
+        }),
+        {
+          loading: msg.ai.generating.title,
+          success: msg.ai.generated.title,
+          error: msg.ai.generationFailed.title,
+          description: {
+            success: msg.ai.generatedDesc(creditCost),
+            error: msg.ai.creditsNotCharged,
+          },
+        },
+      );
    } catch (err) {
-      setError(err instanceof Error ? err.message : "Bildgenerierung fehlgeschlagen");
+      setError(err instanceof Error ? err.message : msg.ai.generationFailed.title);
    } finally {
      setIsGenerating(false);
    }
@@ -239,6 +269,10 @@ export default function PromptNode({
    createNodeWithIntersection,
    createEdge,
    generateImage,
+    creditCost,
+    availableCredits,
+    hasEnoughCredits,
+    router,
  ]);

  return (
@@ -328,14 +362,11 @@ export default function PromptNode({
            type="button"
            onClick={() => void handleGenerate()}
            disabled={
-              !effectivePrompt.trim() ||
-              isGenerating ||
-              balance === undefined ||
-              (availableCredits !== null && !hasEnoughCredits)
+              !effectivePrompt.trim() || isGenerating || balance === undefined
            }
            className={`nodrag flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed ${
              availableCredits !== null && !hasEnoughCredits
-                ? "bg-muted text-muted-foreground"
+                ? "bg-amber-600/90 text-white hover:bg-amber-600"
                : "bg-violet-600 text-white hover:bg-violet-700 disabled:opacity-50"
            }`}
          >
--- a/components/dashboard/canvas-card.tsx
+++ b/components/dashboard/canvas-card.tsx
@@ -4,6 +4,7 @@ import { useState, useCallback, useRef } from "react";
 import { useMutation } from "convex/react";
 import { ArrowUpRight, MoreHorizontal, Pencil } from "lucide-react";
 import { toast } from "@/lib/toast";
+import { msg } from "@/lib/toast-messages";

 import { Button } from "@/components/ui/button";
 import {
@@ -46,7 +47,8 @@ export default function CanvasCard({ canvas, onNavigate }: CanvasCardProps) {
  const handleSave = useCallback(async () => {
    const trimmedName = editName.trim();
    if (!trimmedName) {
-      toast.error("Name darf nicht leer sein");
+      const { title, desc } = msg.dashboard.renameEmpty;
+      toast.error(title, desc);
      return;
    }
    if (trimmedName === canvas.name) {
@@ -59,10 +61,10 @@ export default function CanvasCard({ canvas, onNavigate }: CanvasCardProps) {
    setIsSaving(true);
    try {
      await updateCanvas({ canvasId: canvas._id, name: trimmedName });
-      toast.success("Arbeitsbereich umbenannt");
+      toast.success(msg.dashboard.renameSuccess.title);
      setIsEditing(false);
    } catch {
-      toast.error("Fehler beim Umbenennen");
+      toast.error(msg.dashboard.renameFailed.title);
    } finally {
      setIsSaving(false);
      saveInFlightRef.current = false;
--- a/components/dashboard/credit-overview.tsx
+++ b/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 ||
--- a/components/init-user.tsx
+++ b/components/init-user.tsx
@@ -3,7 +3,9 @@
 import { authClient } from "@/lib/auth-client";
 import { useMutation, useQuery } from "convex/react";
 import { api } from "@/convex/_generated/api";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
+import { toast } from "@/lib/toast";
+import { msg } from "@/lib/toast-messages";

 /**
 * Initialisiert die Credit-Balance für neue User.
@@ -17,16 +19,27 @@ export function InitUser() {
    session?.user ? {} : "skip"
  );
  const initBalance = useMutation(api.credits.initBalance);
+  const initStartedRef = useRef(false);

  useEffect(() => {
    if (
-      session?.user &&
-      balance &&
-      balance.balance === 0 &&
-      balance.monthlyAllocation === 0
+      !session?.user ||
+      !balance ||
+      balance.balance !== 0 ||
+      balance.monthlyAllocation !== 0
    ) {
-      initBalance();
+      return;
    }
+    if (initStartedRef.current) return;
+    initStartedRef.current = true;
+
+    void initBalance()
+      .then(() => {
+        toast.success(msg.auth.initialSetup.title, msg.auth.initialSetup.desc);
+      })
+      .catch(() => {
+        initStartedRef.current = false;
+      });
  }, [session?.user, balance, initBalance]);

  return null;
--- a/components/providers.tsx
+++ b/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>
--- a/components/ui/sonner.tsx
+++ b/components/ui/sonner.tsx
@@ -1,53 +0,0 @@
-"use client"
-
-import { useTheme } from "next-themes"
-import { Toaster as Sonner, type ToasterProps } from "sonner"
-import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-  const { toastOptions, ...restProps } = props
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      icons={{
-        success: (
-          <CircleCheckIcon className="size-4" />
-        ),
-        info: (
-          <InfoIcon className="size-4" />
-        ),
-        warning: (
-          <TriangleAlertIcon className="size-4" />
-        ),
-        error: (
-          <OctagonXIcon className="size-4" />
-        ),
-        loading: (
-          <Loader2Icon className="size-4 animate-spin" />
-        ),
-      }}
-      style={
-        {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
-          "--normal-border": "var(--border)",
-          "--border-radius": "var(--radius)",
-        } as React.CSSProperties
-      }
-      toastOptions={{
-        ...toastOptions,
-        classNames: {
-          toast: "cn-toast",
-          error: "border-destructive",
-          ...toastOptions?.classNames,
-        },
-      }}
-      {...restProps}
-    />
-  )
-}
-
-export { Toaster }
--- a/instrumentation-client.ts
+++ b/instrumentation-client.ts
@@ -0,0 +1,22 @@
+// This file configures the initialization of Sentry on the client.
+// The added config here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  environment: process.env.NODE_ENV,
+
+  integrations: [Sentry.replayIntegration()],
+
+  tracesSampleRate: 0.1,
+
+  replaysOnErrorSampleRate: 1.0,
+  replaysSessionSampleRate: 0,
+
+  sendDefaultPii: true,
+});
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
--- a/instrumentation.ts
+++ b/instrumentation.ts
@@ -0,0 +1,13 @@
+import * as Sentry from "@sentry/nextjs";
+
+export async function register() {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    await import("./sentry.server.config");
+  }
+
+  if (process.env.NEXT_RUNTIME === "edge") {
+    await import("./sentry.edge.config");
+  }
+}
+
+export const onRequestError = Sentry.captureRequestError;
--- a/lib/auth-server.ts
+++ b/lib/auth-server.ts
@@ -1,5 +1,7 @@
 import { convexBetterAuthNextJs } from "@convex-dev/better-auth/nextjs";

+import { api } from "@/convex/_generated/api";
+
 export const {
  handler,              // Route Handler für /api/auth/*
  preloadAuthQuery,     // SSR: Query mit Auth vorladen
@@ -17,3 +19,8 @@ export const {
    isAuthError: (error) => /auth/i.test(String(error)),
  },
 });
+
+/** Aktueller User für SSR (z. B. Sentry `setUser`), oder `null`. */
+export async function getAuthUser() {
+  return fetchAuthQuery(api.auth.safeGetAuthUser, {});
+}
--- a/lib/rate-limit.ts
+++ b/lib/rate-limit.ts
@@ -0,0 +1,16 @@
+import { redis } from "./redis";
+
+export async function rateLimit(
+  key: string,
+  limit: number,
+  windowSeconds: number
+): Promise<{ success: boolean; remaining: number }> {
+  const count = await redis.incr(key);
+  if (count === 1) {
+    await redis.expire(key, windowSeconds);
+  }
+  return {
+    success: count <= limit,
+    remaining: Math.max(0, limit - count),
+  };
+}
--- a/lib/redis.ts
+++ b/lib/redis.ts
@@ -0,0 +1,29 @@
+import Redis from "ioredis";
+
+function createRedis(): Redis {
+  const url = process.env.REDIS_URL?.trim();
+  if (url) {
+    return new Redis(url, {
+      retryStrategy: (times) => Math.min(times * 100, 3000),
+    });
+  }
+
+  return new Redis({
+    host: process.env.REDIS_HOST ?? "127.0.0.1",
+    port: Number.parseInt(process.env.REDIS_PORT ?? "6379", 10),
+    password: process.env.REDIS_PASSWORD || undefined,
+    retryStrategy: (times) => Math.min(times * 100, 3000),
+  });
+}
+
+const globalForRedis = globalThis as unknown as { redis?: Redis };
+
+export const redis = globalForRedis.redis ?? createRedis();
+
+redis.on("error", (err) => {
+  console.error("[Redis] Connection error:", err);
+});
+
+if (process.env.NODE_ENV !== "production") {
+  globalForRedis.redis = redis;
+}
--- a/lib/toast-messages.ts
+++ b/lib/toast-messages.ts
@@ -0,0 +1,139 @@
+// Zentrales Dictionary für alle Toast-Strings.
+// Spätere i18n: diese Datei gegen Framework-Lookup ersetzen.
+
+export const msg = {
+  canvas: {
+    imageUploaded: { title: "Bild hochgeladen" },
+    uploadFailed: { title: "Upload fehlgeschlagen" },
+    uploadFormatError: (format: string) => ({
+      title: "Upload fehlgeschlagen",
+      desc: `Format „${format}“ wird nicht unterstützt. Erlaubt: PNG, JPG, WebP.`,
+    }),
+    uploadSizeError: (maxMb: number) => ({
+      title: "Upload fehlgeschlagen",
+      desc: `Maximale Dateigröße: ${maxMb} MB.`,
+    }),
+    nodeRemoved: { title: "Element entfernt" },
+    nodesRemoved: (count: number) => ({
+      title: count === 1 ? "Element entfernt" : `${count} Elemente entfernt`,
+    }),
+  },
+
+  ai: {
+    generating: { title: "Bild wird generiert…" },
+    generated: { title: "Bild generiert" },
+    generatedDesc: (credits: number) => `${credits} Credits verbraucht`,
+    generationFailed: { title: "Generierung fehlgeschlagen" },
+    creditsNotCharged: "Credits wurden nicht abgebucht",
+    insufficientCredits: (needed: number, available: number) => ({
+      title: "Nicht genügend Credits",
+      desc: `${needed} Credits benötigt, ${available} verfügbar.`,
+    }),
+    modelUnavailable: {
+      title: "Modell vorübergehend nicht verfügbar",
+      desc: "Versuche ein anderes Modell oder probiere es später erneut.",
+    },
+    contentPolicy: {
+      title: "Anfrage durch Inhaltsrichtlinie blockiert",
+      desc: "Versuche, den Prompt umzuformulieren.",
+    },
+    timeout: {
+      title: "Generierung abgelaufen",
+      desc: "Credits wurden nicht abgebucht.",
+    },
+    openrouterIssues: {
+      title: "OpenRouter möglicherweise gestört",
+      desc: "Mehrere Generierungen fehlgeschlagen.",
+    },
+  },
+
+  export: {
+    frameExported: { title: "Frame exportiert" },
+    exportingFrames: { title: "Frames werden exportiert…" },
+    zipReady: { title: "ZIP bereit" },
+    exportFailed: { title: "Export fehlgeschlagen" },
+    frameEmpty: {
+      title: "Export fehlgeschlagen",
+      desc: "Frame hat keinen sichtbaren Inhalt.",
+    },
+    noFramesOnCanvas: {
+      title: "Export fehlgeschlagen",
+      desc: "Keine Frames auf dem Canvas — zuerst einen Frame anlegen.",
+    },
+    download: "Herunterladen",
+    downloaded: "Heruntergeladen!",
+  },
+
+  auth: {
+    welcomeBack: { title: "Willkommen zurück" },
+    welcomeOnDashboard: { title: "Schön, dass du da bist" },
+    checkEmail: (email: string) => ({
+      title: "E-Mail prüfen",
+      desc: `Bestätigungslink an ${email} gesendet.`,
+    }),
+    sessionExpired: {
+      title: "Sitzung abgelaufen",
+      desc: "Bitte erneut anmelden.",
+    },
+    signedOut: { title: "Abgemeldet" },
+    signIn: "Anmelden",
+    initialSetup: {
+      title: "Startguthaben aktiv",
+      desc: "Du kannst loslegen.",
+    },
+  },
+
+  billing: {
+    subscriptionActivated: (credits: number) => ({
+      title: "Abo aktiviert",
+      desc: `${credits} Credits deinem Guthaben hinzugefügt.`,
+    }),
+    creditsAdded: (credits: number) => ({
+      title: "Credits hinzugefügt",
+      desc: `+${credits} Credits`,
+    }),
+    subscriptionCancelled: (periodEnd: string) => ({
+      title: "Abo gekündigt",
+      desc: `Deine Credits bleiben bis ${periodEnd} verfügbar.`,
+    }),
+    paymentFailed: {
+      title: "Zahlung fehlgeschlagen",
+      desc: "Bitte Zahlungsmethode aktualisieren.",
+    },
+    dailyLimitReached: (limit: number) => ({
+      title: "Tageslimit erreicht",
+      desc: `Maximal ${limit} Generierungen pro Tag in deinem Tarif.`,
+    }),
+    lowCredits: (remaining: number) => ({
+      title: "Credits fast aufgebraucht",
+      desc: `Noch ${remaining} Credits übrig.`,
+    }),
+    topUp: "Aufladen",
+    upgrade: "Upgrade",
+    manage: "Verwalten",
+    redirectingToCheckout: {
+      title: "Weiterleitung…",
+      desc: "Du wirst zum sicheren Checkout weitergeleitet.",
+    },
+    openingPortal: {
+      title: "Portal wird geöffnet…",
+      desc: "Du wirst zur Aboverwaltung weitergeleitet.",
+    },
+    testGrantFailed: { title: "Gutschrift fehlgeschlagen" },
+  },
+
+  system: {
+    reconnected: { title: "Verbindung wiederhergestellt" },
+    connectionLost: {
+      title: "Verbindung verloren",
+      desc: "Änderungen werden möglicherweise nicht gespeichert.",
+    },
+    copiedToClipboard: { title: "In Zwischenablage kopiert" },
+  },
+
+  dashboard: {
+    renameEmpty: { title: "Name ungültig", desc: "Name darf nicht leer sein." },
+    renameSuccess: { title: "Arbeitsbereich umbenannt" },
+    renameFailed: { title: "Umbenennen fehlgeschlagen" },
+  },
+} as const;
--- a/lib/toast.ts
+++ b/lib/toast.ts
@@ -1,82 +1,109 @@
-import type { ReactNode } from "react"
-import { isValidElement } from "react"
-import { toast as sonnerToast, type ExternalToast } from "sonner"
+import { gooeyToast, type GooeyPromiseData } from "goey-toast";

-const SUCCESS_DURATION = 4000
-const ERROR_DURATION = 6000
+const DURATION = {
+  success: 4000,
+  successShort: 2000,
+  error: 6000,
+  warning: 5000,
+  info: 4000,
+} as const;

-type SonnerPromiseInput<T> = Parameters<typeof sonnerToast.promise<T>>[0]
-type SonnerPromiseOptions<T> = Parameters<typeof sonnerToast.promise<T>>[1]
-type SonnerPromiseData<T> = NonNullable<SonnerPromiseOptions<T>>
-
-function hasMessage(
-  value: unknown,
-): value is {
-  message: ReactNode
-  duration?: number
-} {
-  return (
-    typeof value === "object" &&
-    value !== null &&
-    !isValidElement(value) &&
-    "message" in value
-  )
-}
-
-function withStateDuration<T>(state: unknown, duration: number): unknown {
-  if (state === undefined) {
-    return undefined
-  }
-
-  if (typeof state === "function") {
-    return async (value: T) => {
-      const result = await state(value)
-      return withStateDuration(result, duration)
-    }
-  }
-
-  if (hasMessage(state)) {
-    return {
-      ...state,
-      duration: state.duration ?? duration,
-    }
-  }
-
-  return {
-    message: state as ReactNode,
-    duration,
-  }
-}
+export type ToastDurationOverrides = {
+  duration?: number;
+};

 export const toast = {
-  success(message: ReactNode, options?: ExternalToast) {
-    return sonnerToast.success(message, {
-      ...options,
-      duration: options?.duration ?? SUCCESS_DURATION,
-    })
+  success(
+    message: string,
+    description?: string,
+    opts?: ToastDurationOverrides,
+  ) {
+    return gooeyToast.success(message, {
+      description,
+      duration: opts?.duration ?? DURATION.success,
+    });
  },
-  error(message: ReactNode, options?: ExternalToast) {
-    return sonnerToast.error(message, {
-      ...options,
-      duration: options?.duration ?? ERROR_DURATION,
-    })
+
+  error(
+    message: string,
+    description?: string,
+    opts?: ToastDurationOverrides,
+  ) {
+    return gooeyToast.error(message, {
+      description,
+      duration: opts?.duration ?? DURATION.error,
+    });
  },
-  loading(message: ReactNode, options?: ExternalToast) {
-    return sonnerToast.loading(message, options)
+
+  warning(
+    message: string,
+    description?: string,
+    opts?: ToastDurationOverrides,
+  ) {
+    return gooeyToast.warning(message, {
+      description,
+      duration: opts?.duration ?? DURATION.warning,
+    });
  },
-  dismiss(id?: number | string) {
-    return sonnerToast.dismiss(id)
+
+  info(
+    message: string,
+    description?: string,
+    opts?: ToastDurationOverrides,
+  ) {
+    return gooeyToast.info(message, {
+      description,
+      duration: opts?.duration ?? DURATION.info,
+    });
  },
-  promise<T>(promise: SonnerPromiseInput<T>, options?: SonnerPromiseOptions<T>) {
-    return sonnerToast.promise(promise, {
-      ...options,
-      success: withStateDuration<T>(options?.success, SUCCESS_DURATION) as SonnerPromiseData<T>["success"],
-      error: withStateDuration<T>(options?.error, ERROR_DURATION) as SonnerPromiseData<T>["error"],
-    })
+
+  promise<T>(promise: Promise<T>, data: GooeyPromiseData<T>) {
+    return gooeyToast.promise(promise, data);
  },
-}
+
+  action(
+    message: string,
+    opts: {
+      description?: string;
+      label: string;
+      onClick: () => void;
+      successLabel?: string;
+      type?: "success" | "info" | "warning";
+      duration?: number;
+    },
+  ) {
+    const t = opts.type ?? "info";
+    return gooeyToast[t](message, {
+      description: opts.description,
+      duration: opts.duration ?? (t === "success" ? DURATION.success : DURATION.info),
+      action: {
+        label: opts.label,
+        onClick: opts.onClick,
+        successLabel: opts.successLabel,
+      },
+    });
+  },
+
+  update(
+    id: string | number,
+    opts: {
+      title?: string;
+      description?: string;
+      type?: "default" | "success" | "error" | "warning" | "info";
+    },
+  ) {
+    gooeyToast.update(id, opts);
+  },
+
+  dismiss(id?: string | number) {
+    gooeyToast.dismiss(id);
+  },
+};

 export const toastDuration = {
-  success: SUCCESS_DURATION,
-  error: ERROR_DURATION,
-} as const
+  success: DURATION.success,
+  successShort: DURATION.successShort,
+  error: DURATION.error,
+  warning: DURATION.warning,
+  info: DURATION.info,
+} as const;
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,3 +1,4 @@
+import { withSentryConfig } from "@sentry/nextjs";
 import type { NextConfig } from "next";

 const nextConfig: NextConfig = {
@@ -22,4 +23,40 @@ const nextConfig: NextConfig = {
  },
 };

-export default nextConfig;
+export default withSentryConfig(nextConfig, {
+  // For all available options, see:
+  // https://www.npmjs.com/package/@sentry/webpack-plugin#options
+
+  org: process.env.SENTRY_ORG ?? "lemonspace",
+
+  project: process.env.SENTRY_PROJECT ?? "lemonspace",
+
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,
+
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+
+  // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+  // This can increase your server load as well as your hosting bill.
+  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+  // side errors will fail.
+  tunnelRoute: "/monitoring",
+
+  webpack: {
+    // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+    // See the following for more information:
+    // https://docs.sentry.io/product/crons/
+    // https://vercel.com/docs/cron-jobs
+    automaticVercelMonitors: true,
+
+    // Tree-shaking options for reducing bundle size
+    treeshake: {
+      // Automatically tree-shake Sentry logger statements to reduce bundle size
+      removeDebugLogging: true,
+    },
+  },
+});
--- a/package.json
+++ b/package.json
@@ -17,11 +17,15 @@
    "@napi-rs/canvas": "^0.1.97",
    "@polar-sh/better-auth": "^1.8.3",
    "@polar-sh/sdk": "^0.46.7",
+    "@sentry/nextjs": "^10.46.0",
    "@xyflow/react": "^12.10.1",
    "better-auth": "^1.5.6",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "convex": "^1.34.0",
+    "framer-motion": "^12.38.0",
+    "goey-toast": "^0.3.0",
+    "ioredis": "^5.10.1",
    "jimp": "^1.6.0",
    "jszip": "^3.10.1",
    "lucide-react": "^1.6.0",
@@ -33,13 +37,13 @@
    "react-dom": "19.2.4",
    "resend": "^4.8.0",
    "shadcn": "^4.1.0",
-    "sonner": "^2.0.7",
    "tailwind-merge": "^3.5.0",
    "tw-animate-css": "^1.4.0",
    "zod": "^4.3.6"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",
+    "@types/ioredis": "^5.0.0",
    "@types/jszip": "^3.4.1",
    "@types/node": "^20",
    "@types/react": "^19",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/sentry.edge.config.ts
+++ b/sentry.edge.config.ts
@@ -0,0 +1,16 @@
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  environment: process.env.NODE_ENV,
+
+  tracesSampleRate: 0.1,
+
+  sendDefaultPii: true,
+});
--- a/sentry.server.config.ts
+++ b/sentry.server.config.ts
@@ -0,0 +1,15 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  environment: process.env.NODE_ENV,
+
+  tracesSampleRate: 0.1,
+
+  sendDefaultPii: true,
+});