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/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 }