feat: add db query collection

Author: hlubek

README.md

@@ -142,7 +142,111 @@ http.ListenAndServe(":8080", handler)
 
 ### Capturing SQL Queries
 
-> Work in progress.
+Devlog can collect SQL queries executed through the standard `database/sql` package. This is done using the `go-sqllogger` adapter.
+
+### Setup
+
+1. First, create a devlog instance:
+
+```go
+dlog := devlog.New()
+defer dlog.Close()
+```
+
+2. Create a database connector with logging:
+
+```go
+// Create your base connector (e.g., for SQLite)
+connector := newSQLiteConnector(":memory:")
+
+// Wrap it with the logging connector
+loggingConnector := sqllogger.LoggingConnector(
+    sqlloggeradapter.New(dlog.CollectDBQuery()),
+    connector,
+)
+
+// Open the database with the logging connector
+db := sql.OpenDB(loggingConnector)
+defer db.Close()
+```
+
+### What Gets Collected
+
+For each SQL query, the following information is collected:
+- The SQL query string
+- Query arguments
+- Execution duration
+- Timestamp
+
+### Example
+
+Here's a complete example showing how to use the SQL query collector:
+
+```go
+package main
+
+import (
+    "database/sql"
+    _ "github.com/mattn/go-sqlite3"
+    "github.com/networkteam/go-sqllogger"
+    sqlloggeradapter "github.com/networkteam/devlog/dbadapter/sqllogger"
+    "github.com/networkteam/devlog"
+)
+
+func main() {
+    // Create devlog instance
+    dlog := devlog.New()
+    defer dlog.Close()
+
+    // Create database connector with logging
+    connector := newSQLiteConnector(":memory:")
+    loggingConnector := sqllogger.LoggingConnector(
+        sqlloggeradapter.New(dlog.CollectDBQuery()),
+        connector,
+    )
+
+    // Open database
+    db := sql.OpenDB(loggingConnector)
+    defer db.Close()
+
+    // Execute queries - they will be automatically collected
+    db.ExecContext(ctx, "CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)")
+    db.QueryContext(ctx, "SELECT * FROM users WHERE id = ?", 1)
+}
+```
+
+### Using SQLite as a `driver.Connector`
+
+```go
+// sqliteConnector is a simple implementation of driver.Connector for SQLite
+type sqliteConnector struct {
+	driver *sqlite3.SQLiteDriver
+	dsn    string
+}
+
+func newSQLiteConnector(dsn string) *sqliteConnector {
+	sqliteDriver := &sqlite3.SQLiteDriver{}
+	return &sqliteConnector{
+		driver: sqliteDriver,
+		dsn:    dsn,
+	}
+}
+
+// Connect implements driver.Connector interface
+func (c *sqliteConnector) Connect(ctx context.Context) (driver.Conn, error) {
+	return c.driver.Open(c.dsn)
+}
+
+// Driver implements driver.Connector interface
+func (c *sqliteConnector) Driver() driver.Driver {
+	return c.driver
+}
+```
+
+The collected queries will be visible in the devlog dashboard, showing:
+- The SQL query (truncated in the list view, full query in details)
+- Query arguments
+- Execution duration in milliseconds
 
 ### Configuring the Dashboard
 
@@ -159,7 +263,15 @@ dashboard := devlog.NewWithOptions(devlog.Options{
 
 ## TODOs
 
+- [ ] Add support for generic events/groups that can be used in user-code 
+- [ ] Support plugins (e.g. for GraphQL) to add attributes to HTTP requests (operation name)
+- [ ] Implement on-demand activation of devlog (record / stop)
+- [ ] Change display of time or implement timers via JS
+- [ ] Implement reset of collected events
+- [ ] Add pretty printing of JSON
+- [ ] Implement ad-hoc change of log level via slog.Leveler via UI
 - [ ] Implement filtering of events
+- [x] Implement SQL query logging with adapters
 
 ## License
 

collector/db_query_collector.go

@@ -0,0 +1,78 @@
+package collector
+
+import (
+	"context"
+	"database/sql/driver"
+	"time"
+)
+
+// DBQuery represents a database query execution record
+type DBQuery struct {
+	// Query is the SQL query or statement
+	Query string
+	// Args of the query or statement
+	Args []driver.NamedValue
+	// Duration of executing the query or statement
+	Duration time.Duration
+	// Timestamp when the query or statement was started
+	Timestamp time.Time
+	// Error if any error occured
+	Error error
+}
+
+type DBQueryCollector struct {
+	buffer         *RingBuffer[DBQuery]
+	notifier       *Notifier[DBQuery]
+	eventCollector *EventCollector
+}
+
+func (c *DBQueryCollector) Collect(ctx context.Context, query DBQuery) {
+	c.buffer.Add(query)
+	c.notifier.Notify(query)
+	if c.eventCollector != nil {
+		c.eventCollector.CollectEvent(ctx, query)
+	}
+}
+
+func (c *DBQueryCollector) Tail(n int) []DBQuery {
+	return c.buffer.GetRecords(uint64(n))
+}
+
+// Subscribe returns a channel that receives notifications of new query records
+func (c *DBQueryCollector) Subscribe(ctx context.Context) <-chan DBQuery {
+	return c.notifier.Subscribe(ctx)
+}
+
+type DBQueryOptions struct {
+	// NotifierOptions are options for notification about new queries
+	NotifierOptions *NotifierOptions
+
+	// EventCollector is an optional event collector for collecting logs as grouped events
+	EventCollector *EventCollector
+}
+
+func DefaultDBQueryOptions() DBQueryOptions {
+	return DBQueryOptions{}
+}
+
+func NewDBQueryCollector(capacity uint64) *DBQueryCollector {
+	return NewDBQueryCollectorWithOptions(capacity, DefaultDBQueryOptions())
+}
+
+func NewDBQueryCollectorWithOptions(capacity uint64, options DBQueryOptions) *DBQueryCollector {
+	notifierOptions := DefaultNotifierOptions()
+	if options.NotifierOptions != nil {
+		notifierOptions = *options.NotifierOptions
+	}
+
+	return &DBQueryCollector{
+		buffer:         NewRingBuffer[DBQuery](capacity),
+		notifier:       NewNotifierWithOptions[DBQuery](notifierOptions),
+		eventCollector: options.EventCollector,
+	}
+}
+
+// Close releases resources used by the collector
+func (c *DBQueryCollector) Close() {
+	c.notifier.Close()
+}

collector/logs.go renamed to collector/log_collector.go

@@ -15,21 +15,15 @@ import (
 )
 
 type Handler struct {
-	logCollector        *collector.LogCollector
-	httpClientCollector *collector.HTTPClientCollector
-	httpServerCollector *collector.HTTPServerCollector
-	eventCollector      *collector.EventCollector
+	eventCollector *collector.EventCollector
 
 	pathPrefix string
 
 	mux http.Handler
 }
 
 type HandlerOptions struct {
-	LogCollector        *collector.LogCollector
-	HTTPClientCollector *collector.HTTPClientCollector
-	HTTPServerCollector *collector.HTTPServerCollector
-	EventCollector      *collector.EventCollector
+	EventCollector *collector.EventCollector
 
 	// PathPrefix where the Handler is mounted (e.g. "/_devlog"), can be left empty if the Handler is at the root ("/").
 	PathPrefix string
@@ -38,10 +32,7 @@ type HandlerOptions struct {
 func NewHandler(options HandlerOptions) *Handler {
 	mux := http.NewServeMux()
 	handler := &Handler{
-		logCollector:        options.LogCollector,
-		httpClientCollector: options.HTTPClientCollector,
-		httpServerCollector: options.HTTPServerCollector,
-		eventCollector:      options.EventCollector,
+		eventCollector: options.EventCollector,
 
 		pathPrefix: options.PathPrefix,
 

dashboard/handler.go

@@ -7,8 +7,10 @@
     'Noto Color Emoji';
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
     monospace;
+    --color-red-50: oklch(97.1% 0.013 17.38);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-red-700: oklch(50.5% 0.213 27.518);
     --color-orange-400: oklch(75% 0.183 55.934);
     --color-orange-600: oklch(64.6% 0.222 41.116);
     --color-green-600: oklch(62.7% 0.194 149.214);
@@ -193,6 +195,9 @@
   }
 }
 @layer utilities {
+  .visible {
+    visibility: visible;
+  }
   .sr-only {
     position: absolute;
     width: 1px;
@@ -273,6 +278,9 @@
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
@@ -312,6 +320,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .grid-cols-\[24rem_1fr\] {
     grid-template-columns: 24rem 1fr;
   }
@@ -429,6 +440,9 @@
   .bg-orange-400 {
     background-color: var(--color-orange-400);
   }
+  .bg-red-50 {
+    background-color: var(--color-red-50);
+  }
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
@@ -542,9 +556,15 @@
   .text-orange-600 {
     color: var(--color-orange-600);
   }
+  .text-red-500 {
+    color: var(--color-red-500);
+  }
   .text-red-600 {
     color: var(--color-red-600);
   }
+  .text-red-700 {
+    color: var(--color-red-700);
+  }
   .text-white {
     color: var(--color-white);
   }

dashboard/static/main.css

@@ -71,6 +71,8 @@ templ EventDetails(event *collector.Event) {
         @HTTPServerRequestDetails(event, data)
     case slog.Record:
         @LogRecordDetails(event, data)
+    case collector.DBQuery:
+        @DBQueryDetails(event, data)
     default:
         <div class="p-4">
             <div class="alert alert-warning">
@@ -429,6 +431,46 @@ templ LogRecordDetails(event *collector.Event, record slog.Record) {
     </div>
 }
 
+// DB Query Details
+templ DBQueryDetails(event *collector.Event, query collector.DBQuery) {
+    <div class="p-4">
+        <div class="mb-4">
+            <h3 class="text-lg font-semibold mb-2">Database Query</h3>
+            <div class="bg-neutral-50 p-4 rounded">
+                <pre class="whitespace-pre-wrap break-all">{ query.Query }</pre>
+            </div>
+        </div>
+
+        if len(query.Args) > 0 {
+            <div class="mb-4">
+                <h4 class="text-sm font-semibold mb-2">Arguments</h4>
+                <div class="bg-neutral-50 p-4 rounded">
+                    <pre class="whitespace-pre-wrap break-all">{ fmt.Sprintf("%v", query.Args) }</pre>
+                </div>
+            </div>
+        }
+
+        <div class="mb-4">
+            <h4 class="text-sm font-semibold mb-2">Details</h4>
+            <dl class="grid grid-cols-2 gap-2 text-sm">
+                <dt class="text-neutral-500">Duration</dt>
+                <dd>{ fmt.Sprintf("%.2fms", float64(query.Duration.Microseconds())/1000) }</dd>
+                <dt class="text-neutral-500">Timestamp</dt>
+                <dd>{ query.Timestamp.Format("2006-01-02 15:04:05.000") }</dd>
+            </dl>
+        </div>
+
+        if query.Error != nil {
+            <div class="mb-4">
+                <h4 class="text-sm font-semibold mb-2 text-red-500">Error</h4>
+                <div class="bg-red-50 p-4 rounded text-red-700">
+                    <pre class="whitespace-pre-wrap break-all">{ query.Error.Error() }</pre>
+                </div>
+            </div>
+        }
+    </div>
+}
+
 // Helper function to determine text color based on status code
 func statusCodeTextColor(code int) string {
     switch {
@@ -459,4 +501,4 @@ func formatDuration(d time.Duration) string {
     } else {
         return fmt.Sprintf("%.2fs", d.Seconds())
     }
-}
+}