Add a debugMode flag to log queries to the performance timeline

[rkistner]

This displays all SQL queries on the performance timeline. Currently only implemented in the Web SDK.

This excludes the time waiting for the global transaction lock, but includes all overhead in worker communication. This means you won't see concurrent queries in most cases.

This includes internal statements from PowerSync, including queries saving sync data, and begin/commit statements. It does not include internal statements from powersync-sqlite-core.

TODO:

• The flag currently defaults to false if process.env.NODE_ENV == 'production', similar to what React does. All other cases default to true. Should we perhaps be more conservative and require explicit opt-in, since the queries could be considered semi-sensitive data? Updated default to false, requiring explicit opt-in for now.

Example of the diagnostics app during initial sync:

[changeset-bot]

🦋 Changeset detected

Latest commit: 05f3dbd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages

Name	Type
@powersync/common	Minor
@powersync/web	Minor
django-react-native-todolist	Patch
react-native-supabase-group-chat	Patch
react-native-supabase-todolist	Patch
@powersync/react-native	Patch
angular-supabase-todolist	Patch
example-capacitor	Patch
example-electron	Patch
example-nextjs	Patch
example-vite	Patch
react-multi-client	Patch
react-supabase-todolist	Patch
vue-supabase-todolist	Patch
yjs-react-supabase-text-collab	Patch
diagnostics-app	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[stevensJourney]

LGTM . This is an awesome feature.

[guillempuche]

Is it documented?

[rkistner]

@guillempuche It's not properly documented yet, but you can see how it's used in the diagnostics app:

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

Lines 26 to 32 in 05f3dbd

	export const db = new PowerSyncDatabase({
	database: {
	dbFilename: 'example.db',
	debugMode: true
	},
	schema: schemaManager.buildSchema()
	});

I'd recommend using something like this to only enable debugMode in development:

debugMode: process.env.NODE_ENV != 'production'

The feature just displays queries in the "Performance" tab of Chrome's developer tools (after recording) - see the screenshots above.

[guillempuche]

Thanks Ralf @rkistner