more comprehensive logging, and add configurable verbose logging

Author: DTCurrie

README.md

@@ -264,6 +264,40 @@ let { partID, name }: Props = $props();
 />
 ```
 
+## Debugging
+
+### Query Debugger
+
+Enables query and mutation logs to the browser console. It can be set at with the `<ViamProvier />` or with `window` functions:
+
+```svelte
+<!-- enable query logging -->
+<ViamProvider
+  {dialConfigs}
+  logQueries
+>
+  {@render children()}
+</ViamProvider>
+
+<!-- enable verbose query logging -->
+<ViamProvider
+  {dialConfigs}
+  logQueries={{ enabled: true, verbose: true }}
+>
+  {@render children()}
+</ViamProvider>
+```
+
+```js
+// enable/disable query logging
+window.enableQueryLogging();
+window.disableQueryLogging();
+
+// enable/disable verbose query logging
+window.enableVerboseQueryLogging();
+window.disableVerboseQueryLogging();
+```
+
 ## Developing
 
 First install dependencies with `pnpm install`, then start a development server:

src/app.d.ts

@@ -10,8 +10,10 @@ declare global {
   }
 
   interface Window {
-    enableDebug?: () => unknown;
-    disableDebug?: () => unknown;
+    enableQueryLogging?: () => unknown;
+    disableQueryLogging?: () => unknown;
+    enableVerboseQueryLogging?: () => unknown;
+    disableVerboseQueryLogging?: () => unknown;
   }
 }
 

src/lib/components/provider.svelte

@@ -3,25 +3,57 @@ import type { Snippet } from 'svelte';
 import { QueryClientProvider, QueryClient } from '@tanstack/svelte-query';
 import type { DialConf } from '@viamrobotics/sdk';
 import InternalProvider from './internal-provider.svelte';
-import { enableDebug, disableDebug } from '../debug';
+import {
+  enableQueryLogging,
+  disableQueryLogging,
+  enableVerboseQueryLogging,
+  disableVerboseQueryLogging,
+} from '../query-logger';
 
 interface Props {
   dialConfigs: Record<string, DialConf>;
   client?: QueryClient;
   machineStatusRefetchInterval?: number;
-  debug?: boolean;
+  logQueries?:
+    | boolean
+    | {
+        enabled: boolean;
+        verbose?: boolean;
+      };
   children: Snippet;
 }
 
 let {
   dialConfigs,
   client = new QueryClient(),
   machineStatusRefetchInterval,
-  debug = false,
+  logQueries,
   children,
 }: Props = $props();
 
-$effect(() => (debug ? enableDebug() : disableDebug()));
+$effect(() => {
+  if (typeof logQueries === 'boolean') {
+    logQueries = { enabled: logQueries };
+  }
+
+  if (logQueries?.enabled) {
+    enableQueryLogging();
+  } else {
+    disableQueryLogging();
+  }
+});
+
+$effect(() => {
+  if (typeof logQueries === 'boolean') {
+    return;
+  }
+
+  if (logQueries?.verbose) {
+    enableVerboseQueryLogging();
+  } else {
+    disableVerboseQueryLogging();
+  }
+});
 </script>
 
 <QueryClientProvider {client}>

src/lib/debug.ts

@@ -6,7 +6,7 @@ import type {
   ResolvedReturnType,
 } from './create-resource-query.svelte';
 import { fromStore, toStore } from 'svelte/store';
-import { debugLogQuery } from '$lib/debug';
+import { useQueryLogger } from '$lib/query-logger';
 
 export const createResourceMutation = <T extends Resource, K extends keyof T>(
   client: { current: T | undefined },
@@ -18,7 +18,7 @@ export const createResourceMutation = <T extends Resource, K extends keyof T>(
   const name = $derived(client.current?.name);
   const methodName = $derived(String(method));
 
-  let index = 0;
+  const debug = useQueryLogger();
 
   const mutationOptions = $derived({
     mutationKey: [
@@ -38,20 +38,19 @@ export const createResourceMutation = <T extends Resource, K extends keyof T>(
         );
       }
 
-      debugLogQuery(index, 'REQ', name, methodName, request);
+      const logger = debug.createLogger();
+      logger('REQ', name, methodName, request);
 
       try {
-        const result = (await clientFunc.apply(
+        const response = (await clientFunc.apply(
           client.current,
           request
         )) as Promise<MutReturn>;
 
-        debugLogQuery(index++, 'RES', name, methodName, result);
-
-        return result;
+        logger('RES', name, methodName, response);
+        return response;
       } catch (error) {
-        debugLogQuery(index++, 'ERR', name, methodName, error);
-
+        logger('ERR', name, methodName, error);
         throw error;
       }
     },

src/lib/hooks/create-resource-mutation.svelte.ts

@@ -6,7 +6,7 @@ import {
 import type { Resource } from '@viamrobotics/sdk';
 import { toStore, fromStore } from 'svelte/store';
 import { usePolling } from './use-polling.svelte';
-import { debugLogQuery } from '../debug';
+import { useQueryLogger } from '../query-logger';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type ArgumentsType<T> = T extends (...args: infer U) => any ? U : never;
@@ -50,7 +50,7 @@ export const createResourceQuery = <T extends Resource, K extends keyof T>(
   const name = $derived(client.current?.name);
   const methodName = $derived(String(method));
 
-  let index = 0;
+  const debug = useQueryLogger();
 
   const queryOptions = $derived(
     createQueryOptions({
@@ -74,18 +74,19 @@ export const createResourceQuery = <T extends Resource, K extends keyof T>(
           );
         }
 
-        debugLogQuery(index, 'REQ', name, methodName, _args);
+        const logger = debug.createLogger();
+        logger('REQ', name, methodName, _args);
 
         try {
-          const result = (await clientFunc?.apply(
+          const response = (await clientFunc?.apply(
             client.current,
             _args
           )) as Promise<ResolvedReturnType<T[K]>>;
 
-          debugLogQuery(index++, 'RES', name, methodName, result);
-          return result;
+          logger('RES', name, methodName, response);
+          return response;
         } catch (error) {
-          debugLogQuery(index++, 'ERR', name, methodName, error);
+          logger('ERR', name, methodName, error);
           throw error;
         }
       },

src/lib/hooks/create-resource-query.svelte.ts

@@ -6,7 +6,7 @@ import type {
   ResolvedReturnType,
 } from './create-resource-query.svelte';
 import { fromStore, toStore } from 'svelte/store';
-import { debugLogQuery } from '$lib/debug';
+import { useQueryLogger } from '$lib/query-logger';
 
 export const createRobotMutation = <T extends RobotClient, K extends keyof T>(
   client: { current: T | undefined },
@@ -17,7 +17,7 @@ export const createRobotMutation = <T extends RobotClient, K extends keyof T>(
 
   const methodName = $derived(String(method));
 
-  let index = 0;
+  const debug = useQueryLogger();
 
   const mutationOptions = $derived({
     mutationKey: [
@@ -36,19 +36,19 @@ export const createRobotMutation = <T extends RobotClient, K extends keyof T>(
         );
       }
 
-      debugLogQuery(index, 'REQ', 'robot', methodName, request);
+      const logger = debug.createLogger();
+      logger('REQ', 'robot', methodName, request);
 
       try {
-        const result = (await clientFunc.apply(
+        const response = (await clientFunc.apply(
           client.current,
           request
         )) as Promise<MutReturn>;
-        debugLogQuery(index++, 'RES', 'robot', methodName, result);
 
-        return result;
+        logger('RES', 'robot', methodName, response);
+        return response;
       } catch (error) {
-        debugLogQuery(index++, 'ERR', 'robot', methodName, error);
-
+        logger('ERR', 'robot', methodName, error);
         throw error;
       }
     },

src/lib/hooks/create-robot-mutation.svelte.ts

@@ -7,7 +7,7 @@ import {
 import type { RobotClient } from '@viamrobotics/sdk';
 import { toStore, fromStore } from 'svelte/store';
 import { usePolling } from './use-polling.svelte';
-import { debugLogQuery } from '$lib/debug';
+import { useQueryLogger } from '$lib/query-logger';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type ArgumentsType<T> = T extends (...args: infer U) => any ? U : never;
@@ -50,7 +50,7 @@ export const createRobotQuery = <T extends RobotClient, K extends keyof T>(
 
   const methodName = $derived(String(method));
 
-  let index = 0;
+  const debug = useQueryLogger();
 
   const queryOptions = $derived(
     createQueryOptions({
@@ -73,20 +73,19 @@ export const createRobotQuery = <T extends RobotClient, K extends keyof T>(
           );
         }
 
-        debugLogQuery(index, 'REQ', 'robot', methodName, _args);
+        const logger = debug.createLogger();
+        logger('REQ', 'robot', methodName, _args);
 
         try {
-          const result = (await clientFunc?.apply(
+          const response = (await clientFunc?.apply(
             client.current,
             _args
           )) as Promise<ResolvedReturnType<T[K]>>;
 
-          debugLogQuery(index++, 'RES', 'robot', methodName, result);
-
-          return result;
+          logger('RES', 'robot', methodName, response);
+          return response;
         } catch (error) {
-          debugLogQuery(index++, 'ERR', 'robot', methodName, error);
-
+          logger('ERR', 'robot', methodName, error);
           throw error;
         }
       },