Refactor database connection handling and improve query execution with automatic cleanup

Author: DefinetlyNotAI

app/api/status/clear/route.ts

@@ -19,9 +19,13 @@ export async function POST(request: NextRequest) {
     try {
         if (!dbPool) return NextResponse.json({error: "DB not initialized"}, {status: 500})
 
-        await dbPool.query(`DELETE FROM status_logs WHERE project_slug = $1`, [projectSlug])
-
-        return NextResponse.json({message: `Cleared logs for ${projectSlug}`})
+        const client = await dbPool.connect()
+        try {
+            await client.query(`DELETE FROM status_logs WHERE project_slug = $1`, [projectSlug])
+            return NextResponse.json({message: `Cleared logs for ${projectSlug}`})
+        } finally {
+            client.release()
+        }
     } catch (err) {
         return NextResponse.json({
             error: "Failed to clear logs",

app/page.tsx

@@ -8,12 +8,15 @@ import {ProjectPreview} from "@/components/project-preview"
 import {StatusBadge} from "@/components/status-badge"
 
 export default async function DashboardPage() {
-    const projectStatuses = await Promise.all(
-        projects.map(async (project) => ({
+    // Process projects serially to avoid overwhelming the single DB connection
+    const projectStatuses = []
+    for (const project of projects) {
+        const status = await getProjectStatus(project.slug, project.routes)
+        projectStatuses.push({
             ...project,
-            status: await getProjectStatus(project.slug, project.routes),
-        })),
-    )
+            status,
+        })
+    }
 
     return (
         <div className="min-h-screen bg-background">

components/project-preview.tsx

@@ -29,32 +29,79 @@ export async function ProjectPreview({url, title, renderUrl}: ProjectPreviewProp
             let html = await response.text()
 
             // Remove script tags to make it static (no JavaScript execution)
-            html = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+            // Use iterative replacement to handle nested or overlapping patterns
+            let previousHtml = ''
+            while (previousHtml !== html) {
+                previousHtml = html
+                html = html.replace(/<script[\s\S]*?<\/script>/gi, '')
+                html = html.replace(/<script[^>]*>/gi, '')
+            }
 
             // Remove noscript tags (they're not needed in a static preview)
-            html = html.replace(/<noscript\b[^<]*(?:(?!<\/noscript>)<[^<]*)*<\/noscript>/gi, '')
+            previousHtml = ''
+            while (previousHtml !== html) {
+                previousHtml = html
+                html = html.replace(/<noscript[\s\S]*?<\/noscript>/gi, '')
+            }
 
             // Remove preload links for scripts (since we removed the scripts)
-            html = html.replace(/<link[^>]*rel=["']?preload["'][^>]*as=["']?script["'][^>]*>/gi, '')
-            html = html.replace(/<link[^>]*as=["']?script["'][^>]*rel=["']?preload["'][^>]*>/gi, '')
+            html = html.replace(/<link[^>]*rel\s*=\s*["']?preload["'][^>]*as\s*=\s*["']?script["'][^>]*>/gi, '')
+            html = html.replace(/<link[^>]*as\s*=\s*["']?script["'][^>]*rel\s*=\s*["']?preload["'][^>]*>/gi, '')
 
             // Remove modulepreload links as well
-            html = html.replace(/<link[^>]*rel=["']?modulepreload["'][^>]*>/gi, '')
+            html = html.replace(/<link[^>]*rel\s*=\s*["']?modulepreload["'][^>]*>/gi, '')
 
             // Remove inline event handlers (onclick, onload, onerror, etc.)
-            html = html.replace(/\s+on\w+\s*=\s*["'][^"']*["']/gi, '')
-            html = html.replace(/\s+on\w+\s*=\s*[^\s>]*/gi, '')
+            // Use iterative replacement to handle overlapping patterns like "ononclick"
+            previousHtml = ''
+            while (previousHtml !== html) {
+                previousHtml = html
+                html = html.replace(/\son\w+\s*=\s*["'][^"']*["']/gi, ' ')
+                html = html.replace(/\son\w+\s*=\s*[^\s>]+/gi, ' ')
+            }
+
+            // Remove javascript: URIs
+            previousHtml = ''
+            while (previousHtml !== html) {
+                previousHtml = html
+                html = html.replace(/\s(href|src|action|formaction|data)\s*=\s*["']?\s*javascript:/gi, ' data-blocked-$1="javascript:')
+            }
+
+            // Remove data: URIs that could contain HTML/SVG with scripts
+            previousHtml = ''
+            while (previousHtml !== html) {
+                previousHtml = html
+                html = html.replace(/\s(href|src|action|formaction)\s*=\s*["']?\s*data:text\/html/gi, ' data-blocked-$1="data:text/html')
+            }
+
+            // Remove potentially dangerous tags (object, embed, applet)
+            previousHtml = ''
+            while (previousHtml !== html) {
+                previousHtml = html
+                html = html.replace(/<(object|embed|applet)[\s\S]*?<\/\1>/gi, '')
+                html = html.replace(/<(object|embed|applet)[^>]*>/gi, '')
+            }
 
             // Remove existing CSP meta tags that might conflict
-            html = html.replace(/<meta[^>]*http-equiv=["']?Content-Security-Policy["']?[^>]*>/gi, '')
+            html = html.replace(/<meta[^>]*http-equiv\s*=\s*["']?Content-Security-Policy["']?[^>]*>/gi, '')
 
             // Get the base URL (in case of redirects, use the final URL)
             const baseUrl = new URL(response.url)
             // Use the full origin with trailing slash to ensure all resources load correctly
             const baseHref = baseUrl.origin + '/'
 
+            // Helper function to escape HTML attributes
+            const escapeHtmlAttr = (str: string) => {
+                return str
+                    .replace(/&/g, '&amp;')
+                    .replace(/"/g, '&quot;')
+                    .replace(/'/g, '&#x27;')
+                    .replace(/</g, '&lt;')
+                    .replace(/>/g, '&gt;')
+            }
+
             // Inject base tag, CSP meta tag (blocking all scripts), and no-scroll style in the head
-            const baseTag = `<base href="${baseHref}">`
+            const baseTag = `<base href="${escapeHtmlAttr(baseHref)}">`
             const cspMeta = `<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'none'; style-src * 'unsafe-inline'; img-src * data: blob:; font-src * data:; connect-src * data: blob:;">`
             const noScrollStyle = `<style>html, body { overflow: hidden !important; }</style>`
 

lib/db.ts

@@ -12,13 +12,18 @@ validateServerSettings(true)
 const caPath = path.join(process.cwd(), 'certs', 'ca.pem')
 const ca = fs.existsSync(caPath) ? fs.readFileSync(caPath).toString() : undefined
 
+// TODO Put this in settings.ts
 const poolConfig: any = {
     connectionString: settings.db.url ?? undefined,
-    max: settings.db.maxClients,
+    max: 1, // Force single connection to avoid "remaining connection slots are reserved" error
+    min: 0, // No minimum connections
     // Connection pool settings to prevent exhaustion
-    idleTimeoutMillis: 30000, // Close idle clients after 30 seconds
+    idleTimeoutMillis: 5000, // Close idle clients after 5 seconds (aggressive cleanup)
     connectionTimeoutMillis: 10000, // Wait max 10 seconds for a connection from the pool
-    allowExitOnIdle: settings.db.allowExitOnIdle,
+    allowExitOnIdle: true, // Always allow exit on idle to prevent hanging connections
+    // Additional settings to ensure connection cleanup
+    statement_timeout: 10000, // Kill queries that take longer than 10 seconds
+    query_timeout: 10000, // Same as statement_timeout for safety
 }
 
 if (ca) {
@@ -33,6 +38,19 @@ const g = global as unknown as {
 
 if (!g.__dbPool) {
     g.__dbPool = new Pool(poolConfig)
+
+    // Log connection acquisition and release for debugging
+    g.__dbPool.on('connect', () => {
+        console.log('[DB Pool] Client connected')
+    })
+
+    g.__dbPool.on('remove', () => {
+        console.log('[DB Pool] Client removed')
+    })
+
+    g.__dbPool.on('error', (err) => {
+        console.error('[DB Pool] Unexpected error on idle client', err)
+    })
 }
 
 export const dbPool = g.__dbPool
@@ -42,17 +60,19 @@ export const dbPool = g.__dbPool
 if (!g.__dbPoolShutdownRegistered) {
     const shutdown = async () => {
         try {
+            console.log('[DB Pool] Shutting down...')
             if (g.__dbPool) {
                 await g.__dbPool.end()
+                console.log('[DB Pool] Shutdown complete')
             }
         } catch (err) {
-            // ignore
+            console.error('[DB Pool] Error during shutdown', err)
         }
     }
 
     process.on('SIGINT', shutdown)
     process.on('SIGTERM', shutdown)
-    process.on('exit', shutdown)
+    process.on('beforeExit', shutdown)
 
     g.__dbPoolShutdownRegistered = true
 }

lib/utils.ts

@@ -19,9 +19,20 @@ function ensureDb() {
     if (!dbPool) throw new Error("Database pool not initialized")
 }
 
-export async function insertStatusLog(projectSlug: string, routePath: string, statusCode: number, responseTime?: number) {
+// Wrapper to execute queries with automatic connection cleanup
+async function executeQuery<T = any>(query: string, params: any[]): Promise<T> {
     ensureDb()
+    const client = await dbPool.connect()
+    try {
+        const result = await client.query(query, params)
+        return result as T
+    } finally {
+        // Always release the connection back to the pool
+        client.release()
+    }
+}
 
+export async function insertStatusLog(projectSlug: string, routePath: string, statusCode: number, responseTime?: number) {
     // Insert a single row into status_logs. Store response_time when available.
     const q = `INSERT INTO status_logs (project_slug, route_path, status_code, response_time)
                VALUES ($1, $2, $3, $4)`
@@ -30,8 +41,8 @@ export async function insertStatusLog(projectSlug: string, routePath: string, st
 
     try {
         console.log(`[DB] insertStatusLog: project=${projectSlug}, route=${routePath}, status=${statusCode}, response_time=${dbResponseTime}`)
-        const res = await dbPool.query(q, [projectSlug, routePath, statusCode, dbResponseTime])
-        console.log(`[DB] insertStatusLog: query ok, rowsAffected=${(res as any)?.rowCount ?? 'unknown'}`)
+        const res = await executeQuery(q, [projectSlug, routePath, statusCode, dbResponseTime])
+        console.log('[DB] insertStatusLog: query ok, rowsAffected=', (res as any)?.rowCount ?? 'unknown')
     } catch (err) {
         console.error('[DB] insertStatusLog: query failed', err)
         throw err
@@ -40,15 +51,13 @@ export async function insertStatusLog(projectSlug: string, routePath: string, st
 
 // Read recent logs for a route. Returns last N records ordered newest-first
 export async function getRecentRouteLogs(projectSlug: string, routePath: string, limit = 20): Promise<StatusLog[]> {
-    ensureDb()
-
     const q = `SELECT created_at, status_code, response_time
                FROM status_logs
                WHERE project_slug = $1
                  AND route_path = $2
                ORDER BY created_at DESC
                LIMIT $3`
-    const res = await dbPool.query(q, [projectSlug, routePath, limit])
+    const res = await executeQuery(q, [projectSlug, routePath, limit])
 
     // Map rows to StatusLog[] (newest first)
     return res.rows.map((r: any) => ({
@@ -114,7 +123,12 @@ export async function getRouteStatus(projectSlug: string, route: Route): Promise
 }
 
 export async function getProjectStatus(projectSlug: string, routes: Route[]): Promise<ProjectStatus> {
-    const routeStatuses = await Promise.all(routes.map((r) => getRouteStatus(projectSlug, r)))
+    // Process routes serially to avoid overwhelming the single DB connection
+    const routeStatuses: RouteStatus[] = []
+    for (const route of routes) {
+        const status = await getRouteStatus(projectSlug, route)
+        routeStatuses.push(status)
+    }
 
     // Determine overall status: worst status among routes
     const statusOrder: Record<RouteStatus['currentStatus'] | ProjectStatus['overallStatus'], number> = {