matthias/lemonspace_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: integrate Sentry for error tracking and enhance user notifications

Browse Source 
- 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.
This commit is contained in:
Matthias
2026-03-27 18:14:04 +01:00
parent 5da0204163
commit 2f89465e82
35 changed files with 2822 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/dashboard/page.tsx
View File

@@ -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();

3
app/error.tsx
View File

@@ -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:

7
app/global-error.tsx
View File

@@ -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">

13
app/layout.tsx
View File

@@ -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

7
app/page.tsx
View File

@@ -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