Enhance todos API with detailed debug information and error handling

- Added comprehensive debug logging for both GET and POST requests in the todos API, including step-by-step tracking of actions and results.
- Improved error handling to provide detailed feedback in case of failures, including specific error messages and debug information.
- Updated the response structure to include success status and debug data for better client-side troubleshooting.

Author: claudfuen

apps/web/src/app/api/todos/route.ts

@@ -1,37 +1,78 @@
 import { db, todos } from "@/db";
-import { desc } from "drizzle-orm";
+import { count, desc } from "drizzle-orm";
 import { NextResponse } from "next/server";
 
 // GET /api/todos - List all todos
 export async function GET() {
-  try {
-    console.log("Starting todos fetch...");
+  const debugInfo: any = {
+    timestamp: new Date().toISOString(),
+    steps: [],
+    environment: {
+      NODE_ENV: process.env.NODE_ENV,
+      DATABASE_URL_exists: !!process.env.DATABASE_URL,
+      DATABASE_URL_length: process.env.DATABASE_URL?.length || 0,
+    },
+  };
 
-    // Test database connection first
-    console.log("Testing basic database connection...");
-    await db.execute("SELECT 1");
-    console.log("Database connection OK");
+  try {
+    // Step 1: Test basic table access with count
+    debugInfo.steps.push({
+      step: 1,
+      action: "Testing table access with count query",
+    });
+    const countResult = await db.select({ count: count() }).from(todos);
+    const todoCount = countResult[0]?.count || 0;
+    debugInfo.steps.push({
+      step: 1,
+      result: "success",
+      todoCount,
+      message: `Table accessible, found ${todoCount} todos`,
+    });
 
-    // Try the actual query
-    console.log("Executing todos query...");
+    // Step 2: Try to fetch actual todos
+    debugInfo.steps.push({
+      step: 2,
+      action: "Fetching all todos with ordering",
+    });
     const allTodos = await db
       .select()
       .from(todos)
       .orderBy(desc(todos.createdAt));
 
-    console.log(`Found ${allTodos.length} todos`);
-    return NextResponse.json(allTodos);
+    debugInfo.steps.push({
+      step: 2,
+      result: "success",
+      todosReturned: allTodos.length,
+      message: `Successfully fetched ${allTodos.length} todos`,
+    });
+
+    console.log("Todos fetch successful:", debugInfo);
+    return NextResponse.json({
+      success: true,
+      data: allTodos,
+      debug: debugInfo,
+    });
   } catch (error) {
-    console.error("Detailed error in todos fetch:", {
+    const errorInfo = {
       message: error instanceof Error ? error.message : String(error),
+      name: error instanceof Error ? error.name : "Unknown",
       stack: error instanceof Error ? error.stack : undefined,
-      name: error instanceof Error ? error.name : undefined,
-    });
+      code: (error as any)?.code,
+      detail: (error as any)?.detail,
+      hint: (error as any)?.hint,
+    };
+
+    debugInfo.error = errorInfo;
+
+    console.error("Detailed error in todos fetch:", debugInfo);
 
     return NextResponse.json(
       {
+        success: false,
         error: "Failed to fetch todos",
-        details: error instanceof Error ? error.message : String(error),
+        message: errorInfo.message,
+        debug: debugInfo,
+        details: errorInfo,
       },
       { status: 500 }
     );
@@ -40,24 +81,81 @@ export async function GET() {
 
 // POST /api/todos - Create a new todo
 export async function POST(request: Request) {
+  const debugInfo: any = {
+    timestamp: new Date().toISOString(),
+    steps: [],
+  };
+
   try {
+    debugInfo.steps.push({ step: 1, action: "Parsing request body" });
     const body = await request.json();
     const { title } = body;
 
     if (!title || typeof title !== "string") {
-      return NextResponse.json({ error: "Title is required" }, { status: 400 });
+      return NextResponse.json(
+        {
+          success: false,
+          error: "Title is required and must be a string",
+          debug: debugInfo,
+        },
+        { status: 400 }
+      );
     }
 
+    debugInfo.steps.push({
+      step: 1,
+      result: "success",
+      title: title.trim(),
+      message: "Request body parsed successfully",
+    });
+
+    debugInfo.steps.push({
+      step: 2,
+      action: "Inserting new todo into database",
+    });
     const [newTodo] = await db
       .insert(todos)
       .values({ title: title.trim() })
       .returning();
 
-    return NextResponse.json(newTodo, { status: 201 });
+    debugInfo.steps.push({
+      step: 2,
+      result: "success",
+      todoId: newTodo.id,
+      message: `Todo created with ID ${newTodo.id}`,
+    });
+
+    console.log("Todo creation successful:", debugInfo);
+    return NextResponse.json(
+      {
+        success: true,
+        data: newTodo,
+        debug: debugInfo,
+      },
+      { status: 201 }
+    );
   } catch (error) {
-    console.error("Failed to create todo:", error);
+    const errorInfo = {
+      message: error instanceof Error ? error.message : String(error),
+      name: error instanceof Error ? error.name : "Unknown",
+      stack: error instanceof Error ? error.stack : undefined,
+      code: (error as any)?.code,
+      detail: (error as any)?.detail,
+      hint: (error as any)?.hint,
+    };
+
+    debugInfo.error = errorInfo;
+
+    console.error("Detailed error in todo creation:", debugInfo);
+
     return NextResponse.json(
-      { error: "Failed to create todo" },
+      {
+        success: false,
+        error: "Failed to create todo",
+        message: errorInfo.message,
+        debug: debugInfo,
+        details: errorInfo,
+      },
       { status: 500 }
     );
   }