Add a debugMode flag to log queries to the performance timeline

.changeset/spicy-poems-complain.md

@@ -0,0 +1,6 @@
+---
+'@powersync/common': minor
+'@powersync/web': minor
+---
+
+Add debugMode flag to log queries on the performance timeline

packages/common/src/client/SQLOpenFactory.ts

@@ -9,6 +9,17 @@ export interface SQLOpenOptions {
    * Directory where the database file is located.
    */
   dbLocation?: string;
+
+  /**
+   * Enable debugMode to log queries to the performance timeline.
+   *
+   * Defaults to false.
+   *
+   * To enable in development builds, use:
+   *
+   *    debugMode: process.env.NODE_ENV !== 'production'
+   */
+  debugMode?: boolean;
 }
 
 export interface SQLOpenFactory {

packages/web/src/db/adapters/wa-sqlite/WASQLiteDBAdapter.ts

@@ -39,12 +39,28 @@ export class WASQLiteDBAdapter extends BaseObserver<DBAdapterListener> implement
   private logger: ILogger;
   private dbGetHelpers: DBGetUtils | null;
   private methods: DBFunctionsInterface | null;
+  private debugMode: boolean;
 
   constructor(protected options: WASQLiteDBAdapterOptions) {
     super();
     this.logger = Logger.get('WASQLite');
     this.dbGetHelpers = null;
     this.methods = null;
+    this.debugMode = options.debugMode ?? false;
+    if (this.debugMode) {
+      const originalExecute = this._execute.bind(this);
+      this._execute = async (sql, bindings) => {
+        const start = performance.now();
+        try {
+          const r = await originalExecute(sql, bindings);
+          performance.measure(`[SQL] ${sql}`, { start });
+          return r;
+        } catch (e: any) {
+          performance.measure(`[SQL] [ERROR: ${e.message}] ${sql}`, { start });
+          throw e;
+        }
+      };
+    }
     this.initialized = this.init();
     this.dbGetHelpers = this.generateDBHelpers({
       execute: (query, params) => this.acquireLock(() => this._execute(query, params))

tools/diagnostics-app/src/library/powersync/ConnectionManager.ts

@@ -25,7 +25,8 @@ export const schemaManager = new DynamicSchemaManager();
 
 export const db = new PowerSyncDatabase({
   database: {
-    dbFilename: 'example.db'
+    dbFilename: 'example.db',
+    debugMode: true
   },
   schema: schemaManager.buildSchema()
 });