Add comprehensive error handling with Error Boundary and improve user feedback. Changes: - Created global ErrorBoundary component with fallback UI using react-error-boundary - Integrated ErrorBoundary in root layout to catch all errors - Created Loading component with variants (sm, md, lg) for consistent loading states - Created EmptyState component for better empty data display with CTAs - Improved form error messages in login and register pages (consistent destructive styling) - Updated projects page to use EmptyState component - Added better error handling with retry actions UX improvements: - Better error messages and recovery options with clear action buttons - Consistent loading indicators across all pages - Helpful empty states with clear descriptions and CTAs - Graceful error handling without crashes - Consistent destructive color theme for all error messages Technical: - Installed react-error-boundary package (v5) - All TypeScript types are properly defined - Build and type checking pass successfully 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { Geist, Geist_Mono } from "next/font/google";
|
|
import "./globals.css";
|
|
import { QueryProvider } from "@/lib/providers/query-provider";
|
|
import { SignalRProvider } from "@/lib/signalr/SignalRContext";
|
|
import { Toaster } from "@/components/ui/sonner";
|
|
import { ErrorBoundary } from "@/components/ErrorBoundary";
|
|
|
|
const geistSans = Geist({
|
|
variable: "--font-geist-sans",
|
|
subsets: ["latin"],
|
|
});
|
|
|
|
const geistMono = Geist_Mono({
|
|
variable: "--font-geist-mono",
|
|
subsets: ["latin"],
|
|
});
|
|
|
|
export const metadata: Metadata = {
|
|
title: "ColaFlow - AI-Powered Project Management",
|
|
description: "Modern project management system with AI and MCP protocol",
|
|
};
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode;
|
|
}>) {
|
|
return (
|
|
<html lang="en" suppressHydrationWarning>
|
|
<body
|
|
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
|
>
|
|
<ErrorBoundary>
|
|
<QueryProvider>
|
|
<SignalRProvider>
|
|
{children}
|
|
<Toaster position="top-right" />
|
|
</SignalRProvider>
|
|
</QueryProvider>
|
|
</ErrorBoundary>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|