Merge pull request #46 from viamrobotics/add-debugger

Add optional query logger

Author: DTCurrie

.changeset/flat-candles-cry.md

@@ -0,0 +1,5 @@
+---
+'@viamrobotics/svelte-sdk': patch
+---
+
+Add configurable query logging.

README.md

@@ -264,6 +264,40 @@ let { partID, name }: Props = $props();
 />
 ```
 
+## Debugging
+
+### Query Logger
+
+Enables query and mutation logs to the browser console. It can be set at with the `<ViamProvider />` 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

@@ -8,6 +8,13 @@ declare global {
     // interface PageState {}
     // interface Platform {}
   }
+
+  interface Window {
+    enableQueryLogging?: () => unknown;
+    disableQueryLogging?: () => unknown;
+    enableVerboseQueryLogging?: () => unknown;
+    disableVerboseQueryLogging?: () => unknown;
+  }
 }
 
 export {};

src/lib/components/provider.svelte

@@ -3,20 +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 {
+  enableQueryLogging,
+  disableQueryLogging,
+  enableVerboseQueryLogging,
+  disableVerboseQueryLogging,
+} from '../query-logger';
 
 interface Props {
   dialConfigs: Record<string, DialConf>;
   client?: QueryClient;
   machineStatusRefetchInterval?: number;
+  logQueries?:
+    | boolean
+    | {
+        enabled: boolean;
+        verbose?: boolean;
+      };
   children: Snippet;
 }
 
 let {
   dialConfigs,
   client = new QueryClient(),
   machineStatusRefetchInterval,
+  logQueries,
   children,
 }: Props = $props();
+
+$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/hooks/create-resource-mutation.svelte.ts

@@ -6,6 +6,7 @@ import type {
   ResolvedReturnType,
 } from './create-resource-query.svelte';
 import { fromStore, toStore } from 'svelte/store';
+import { useQueryLogger } from '$lib/query-logger';
 
 export const createResourceMutation = <T extends Resource, K extends keyof T>(
   client: { current: T | undefined },
@@ -14,14 +15,19 @@ export const createResourceMutation = <T extends Resource, K extends keyof T>(
   type MutArgs = ArgumentsType<T[K]>;
   type MutReturn = ResolvedReturnType<T[K]>;
 
+  const debug = useQueryLogger();
+
+  const name = $derived(client.current?.name);
+  const methodName = $derived(String(method));
+
   const mutationOptions = $derived({
     mutationKey: [
       'viam-svelte-sdk',
       'partID',
       (client.current as T & { partID: string })?.partID,
       'resource',
-      client.current?.name,
-      String(method),
+      name,
+      methodName,
     ],
     mutationFn: async (request) => {
       const clientFunc = client.current?.[method];
@@ -32,7 +38,21 @@ export const createResourceMutation = <T extends Resource, K extends keyof T>(
         );
       }
 
-      return clientFunc.apply(client.current, request) as Promise<MutReturn>;
+      const logger = debug.createLogger();
+      logger('REQ', name, methodName, request);
+
+      try {
+        const response = (await clientFunc.apply(
+          client.current,
+          request
+        )) as Promise<MutReturn>;
+
+        logger('RES', name, methodName, response);
+        return response;
+      } catch (error) {
+        logger('ERR', name, methodName, error);
+        throw error;
+      }
     },
   } satisfies MutationOptions<MutReturn, Error, MutArgs>);
 

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

@@ -6,6 +6,7 @@ import {
 import type { Resource } from '@viamrobotics/sdk';
 import { toStore, fromStore } from 'svelte/store';
 import { usePolling } from './use-polling.svelte';
+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;
@@ -34,6 +35,8 @@ export const createResourceQuery = <T extends Resource, K extends keyof T>(
       ]
     | [options?: (() => QueryOptions) | QueryOptions]
 ): { current: QueryObserverResult<ResolvedReturnType<T[K]>> } => {
+  const debug = useQueryLogger();
+
   let [args, options] = additional;
 
   if (options === undefined && args !== undefined) {
@@ -45,6 +48,8 @@ export const createResourceQuery = <T extends Resource, K extends keyof T>(
     typeof options === 'function' ? options() : options
   );
   const _args = $derived(typeof args === 'function' ? args() : args);
+  const name = $derived(client.current?.name);
+  const methodName = $derived(String(method));
 
   const queryOptions = $derived(
     createQueryOptions({
@@ -53,8 +58,8 @@ export const createResourceQuery = <T extends Resource, K extends keyof T>(
         'partID',
         (client.current as T & { partID: string })?.partID,
         'resource',
-        client.current?.name,
-        String(method),
+        name,
+        methodName,
         ...(_args ? [_args] : []),
       ],
       enabled: client.current !== undefined && _options?.enabled !== false,
@@ -68,9 +73,21 @@ export const createResourceQuery = <T extends Resource, K extends keyof T>(
           );
         }
 
-        return clientFunc?.apply(client.current, _args) as Promise<
-          ResolvedReturnType<T[K]>
-        >;
+        const logger = debug.createLogger();
+        logger('REQ', name, methodName, _args);
+
+        try {
+          const response = (await clientFunc?.apply(
+            client.current,
+            _args
+          )) as Promise<ResolvedReturnType<T[K]>>;
+
+          logger('RES', name, methodName, response);
+          return response;
+        } catch (error) {
+          logger('ERR', name, methodName, error);
+          throw error;
+        }
       },
       ..._options,
       refetchInterval: false,

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

@@ -6,6 +6,7 @@ import type {
   ResolvedReturnType,
 } from './create-resource-query.svelte';
 import { fromStore, toStore } from 'svelte/store';
+import { useQueryLogger } from '$lib/query-logger';
 
 export const createRobotMutation = <T extends RobotClient, K extends keyof T>(
   client: { current: T | undefined },
@@ -14,13 +15,17 @@ export const createRobotMutation = <T extends RobotClient, K extends keyof T>(
   type MutArgs = ArgumentsType<T[K]>;
   type MutReturn = ResolvedReturnType<T[K]>;
 
+  const debug = useQueryLogger();
+
+  const methodName = $derived(String(method));
+
   const mutationOptions = $derived({
     mutationKey: [
       'viam-svelte-sdk',
       'partID',
       (client.current as T & { partID: string })?.partID,
       'robotClient',
-      String(method),
+      methodName,
     ],
     mutationFn: async (request) => {
       const clientFunc = client.current?.[method];
@@ -31,7 +36,21 @@ export const createRobotMutation = <T extends RobotClient, K extends keyof T>(
         );
       }
 
-      return clientFunc.apply(client.current, request) as Promise<MutReturn>;
+      const logger = debug.createLogger();
+      logger('REQ', 'robot', methodName, request);
+
+      try {
+        const response = (await clientFunc.apply(
+          client.current,
+          request
+        )) as Promise<MutReturn>;
+
+        logger('RES', 'robot', methodName, response);
+        return response;
+      } catch (error) {
+        logger('ERR', 'robot', methodName, error);
+        throw error;
+      }
     },
   } satisfies MutationOptions<MutReturn, Error, MutArgs>);
 

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

@@ -7,6 +7,7 @@ import {
 import type { RobotClient } from '@viamrobotics/sdk';
 import { toStore, fromStore } from 'svelte/store';
 import { usePolling } from './use-polling.svelte';
+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;
@@ -35,6 +36,7 @@ export const createRobotQuery = <T extends RobotClient, K extends keyof T>(
       ]
     | [options?: (() => QueryOptions) | QueryOptions]
 ): { current: QueryObserverResult<ResolvedReturnType<T[K]>> } => {
+  const debug = useQueryLogger();
   let [args, options] = additional;
 
   if (options === undefined && args !== undefined) {
@@ -46,6 +48,7 @@ export const createRobotQuery = <T extends RobotClient, K extends keyof T>(
     typeof options === 'function' ? options() : options
   );
   const _args = $derived(typeof args === 'function' ? args() : args);
+  const methodName = $derived(String(method));
 
   const queryOptions = $derived(
     createQueryOptions({
@@ -54,7 +57,7 @@ export const createRobotQuery = <T extends RobotClient, K extends keyof T>(
         'partID',
         (client.current as T & { partID: string })?.partID,
         'robotClient',
-        String(method),
+        methodName,
         ...(_args ? [_args] : []),
       ],
       enabled: client.current !== undefined && _options?.enabled !== false,
@@ -68,10 +71,21 @@ export const createRobotQuery = <T extends RobotClient, K extends keyof T>(
           );
         }
 
-        // Call entity.resource.func(args).
-        return clientFunc?.apply(client.current, _args) as Promise<
-          ResolvedReturnType<T[K]>
-        >;
+        const logger = debug.createLogger();
+        logger('REQ', 'robot', methodName, _args);
+
+        try {
+          const response = (await clientFunc?.apply(
+            client.current,
+            _args
+          )) as Promise<ResolvedReturnType<T[K]>>;
+
+          logger('RES', 'robot', methodName, response);
+          return response;
+        } catch (error) {
+          logger('ERR', 'robot', methodName, error);
+          throw error;
+        }
       },
       ..._options,
       refetchInterval: false,