feat(debug): Debug log of forwarded events

.changeset/debug-log-forwarded-events.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/partytown': patch
+---
+
+Add `logForwardedEvents` config flag to enable debug logging for forwarded events and triggers

docs/src/routes/debugging/index.mdx

@@ -17,6 +17,7 @@ If you are using Chrome DevTools to see these logs, make sure that the `Verbose`
 | `logCalls`              | Log method calls                    |
 | `logGetters`            | Log getter calls                    |
 | `logSetters`            | Log setter calls                    |
+| `logForwardedEvents`    | Log forwarded event calls           |
 | `logImageRequests`      | Log Image() src requests            |
 | `logScriptExecution`    | Log script executions               |
 | `logSendBeaconRequests` | Log navigator.sendBeacon() requests |

src/integration/api.md

@@ -28,6 +28,7 @@ export interface PartytownConfig {
     lib?: string;
     loadScriptsOnMainThread?: (string | RegExp)[];
     logCalls?: boolean;
+    logForwardedEvents?: boolean;
     logGetters?: boolean;
     logImageRequests?: boolean;
     logMainAccess?: boolean;

src/lib/sandbox/main-forward-trigger.ts

@@ -1,15 +1,18 @@
 import {
+  debug,
   emptyObjectValue,
   getOriginalBehavior,
   len,
   resolvePartytownForwardProperty,
 } from '../utils';
 import { type MainWindow, type PartytownWebWorker, type WinId, WorkerMessageType } from '../types';
 import { serializeForWorker } from './main-serialization';
+import { logMain } from '../log';
 
 export const mainForwardTrigger = (worker: PartytownWebWorker, $winId$: WinId, win: MainWindow) => {
   let queuedForwardCalls = win._ptf;
-  let forwards = (win.partytown || {}).forward || [];
+  let config = win.partytown || {};
+  let forwards = config.forward || [];
   let i: number;
   let mainForwardFn: typeof win;
 
@@ -46,6 +49,9 @@ export const mainForwardTrigger = (worker: PartytownWebWorker, $winId$: WinId, w
                 if (originalFunction) {
                   returnValue = originalFunction(args);
                 }
+                if (debug && config.logForwardedEvents) {
+                  logMain(`Forward event: ${arr.join('.')}()`);
+                }
                 forwardCall(arr, args);
                 return returnValue;
               };
@@ -55,6 +61,9 @@ export const mainForwardTrigger = (worker: PartytownWebWorker, $winId$: WinId, w
 
   if (queuedForwardCalls) {
     for (i = 0; i < len(queuedForwardCalls); i += 2) {
+      if (debug && config.logForwardedEvents) {
+        logMain(`Forward queued event: ${queuedForwardCalls[i].join('.')}()`);
+      }
       forwardCall(queuedForwardCalls[i], queuedForwardCalls[i + 1]);
     }
   }

src/lib/types.ts

@@ -500,6 +500,10 @@ export interface PartytownConfig {
    * Log setter calls (debug mode required)
    */
   logSetters?: boolean;
+  /**
+   * Log forwarded events (debug mode required)
+   */
+  logForwardedEvents?: boolean;
   /**
    * Log Image() src requests (debug mode required)
    */

src/lib/web-worker/worker-forwarded-trigger.ts

@@ -1,7 +1,8 @@
 import { deserializeFromMain } from './worker-serialization';
-import { environments } from './worker-constants';
+import { environments, webWorkerCtx } from './worker-constants';
 import type { ForwardMainTriggerData } from '../types';
-import { len } from '../utils';
+import { debug, len } from '../utils';
+import { logWorker } from '../log';
 
 export const workerForwardedTriggerHandle = ({
   $winId$,
@@ -14,11 +15,26 @@ export const workerForwardedTriggerHandle = ({
     let i = 0;
     let l = len($forward$);
 
+    if (debug && webWorkerCtx.$config$.logForwardedEvents) {
+      logWorker(`Forwarded event received: ${$forward$.join('.')}()`, $winId$);
+    }
+
     for (; i < l; i++) {
       if (i + 1 < l) {
         target = target[$forward$[i]];
       } else {
-        target[$forward$[i]].apply(target, deserializeFromMain(null, $winId$, [], $args$));
+        const deserializedArgs = deserializeFromMain(null, $winId$, [], $args$);
+        if (debug && webWorkerCtx.$config$.logForwardedEvents) {
+          logWorker(
+            `Forwarded event execute: ${$forward$.join('.')}(${deserializedArgs
+              .map((a: any) =>
+                typeof a === 'object' ? JSON.stringify(a)?.slice(0, 60) : String(a)
+              )
+              .join(', ')})`,
+            $winId$
+          );
+        }
+        target[$forward$[i]].apply(target, deserializedArgs);
       }
     }
   } catch (e) {

tests/integrations/event-forwarding/index.html

@@ -19,6 +19,7 @@
         logSetters: true,
         logStackTraces: false,
         logScriptExecution: true,
+        logForwardedEvents: true,
       };
     </script>
     <script src="/~partytown/debug/partytown.js"></script>