Browser mode: Infinite 'Unknown event: response:response:...' loop when running multiple click tests

[simshanith]

Describe the bug

When running multiple browser tests that involve click events on anchor elements, thousands of "Unknown event: response:response:response:..." errors occur. The response: prefix accumulates recursively, suggesting an infinite feedback loop in iframe communication.

Reproduction

External reproduction repo: simshanith/lit-ui-router#69

Steps:

1. Clone https://github.com/simshanith/lit-ui-router
2. Checkout commit 9d116d4
3. Run pnpm install
4. Run: pnpm --filter lit-ui-router test ui-sref.spec -t "click modifiers" --browser=chromium

Expected behavior

Tests pass with no errors.

Actual behavior

Tests pass but with thousands of errors:

Error: Unknown event: response:response:response:response:response:execute
Error: Unknown event: response:response:response:response:response:cleanup

Analysis

Looking at packages/browser/src/client/tester/tester.ts lines 94-97:

channel.postMessage({
  event: `response:${data.event}`,
  iframeId: getBrowserState().iframeId!,
})

When an unknown event arrives:

1. It logs "Unknown event: {eventName}" via unhandledError()
2. It still sends a response with response:${data.event}

If responses somehow get echoed back (iframe routing issue with click events?), this creates a feedback loop:

• execute → response:execute → response:response:execute → ...

Hypothesis

Click events on anchors with target="_blank" or navigation-triggering attributes may cause iframe communication that echoes responses back to the handler.

Proposed Fix

Add a guard to prevent responding to events that already start with response::

// Before sending response, check if this is already a response event
if (data.event.startsWith('response:')) {
  // Don't respond to response events - this would create infinite loop
  return
}

Key Details

• Issue only occurs when multiple tests run (individual tests pass)
• Tests involve click events on anchor elements
• Anchors may trigger navigation
• Some tests use target="_blank" or rel="external" attributes
• Error count grows exponentially with test count

Environment

• vitest: 4.0.16
• @vitest/browser-playwright: 4.0.16
• playwright: 1.54.1
• macOS

[simshanith]

fixing in patch https://github.com/simshanith/lit-ui-router/pull/68/files#r2659112784

[simshanith]

Summary

Root Cause

The infinite loop occurs because BroadcastChannel broadcasts to ALL listeners, including the sender. When the tester iframe sends a response (e.g., response:execute), it receives its own message back through the same channel.

The Problem

In packages/browser/src/client/tester/tester.ts, when an unknown event arrives:

1. It logs an error via unhandledError()
2. It still sends a response with response:${data.event}

The orchestrator already had a check to ignore response messages, but the tester was missing this guard.

Message Flow (Infinite Loop)

1. Orchestrator sends: { event: execute }
2. Tester receives, processes, sends: { event: response:execute }
3. Tester receives its OWN broadcasted response
4. response:execute does not match any case → default case
5. Logs error, sends: { event: response:response:execute }
6. Loop continues infinitely...

The Fix

Added a guard in packages/browser/src/client/tester/tester.ts (line 54-56):

if (data.event.startsWith('response:')) {
return
}

This prevents the tester from processing its own response messages, breaking the loop.

Why Click Events Trigger This

Click events on anchors with target=_blank or rel=external may cause additional iframe communication/navigation, increasing the likelihood of response messages being in flight when the tester processes them. However, the bug exists fundamentally whenever any response message is processed by the tester.

Files Changed

• packages/browser/src/client/tester/tester.ts - Added response event guard

This mirrors the existing check in the orchestrator (packages/browser/src/client/orchestrator.ts) that was already correctly filtering response events.

[sheremet-va]

The infinite loop occurs because BroadcastChannel broadcasts to ALL listeners, including the sender. When the tester iframe sends a response (e.g., response:execute), it receives its own message back through the same channel.

This is not true, otherwise there would always be an error, not just with your reproduction.

[simshanith]

Thanks for the feedback @sheremet-va you're absolutely correct

I was mistaken about the BroadcastChannel behavior. I'm working to identify the actual root cause and will update PR #9381