[Preview] Ignoring dev server URL with same port as preview

Error message

[Preview] Ignoring dev server URL with same port as preview proxy (${devServerPort}).

What it means

This warning is logged when the dev server port equals the preview proxy's own port. The loopback preview loads via a subdomain proxy on previewProxyPort; pointing that proxy back at itself would recurse, so the URL is ignored and the iframe shows nothing. It signals a misdetected or misreported dev server port.

Source

Thrown at packages/web-core/src/pages/workspaces/PreviewBrowserContainer.tsx:301

      return directUrl.toString();
    }

    // Loopback URLs need the preview proxy for origin isolation
    if (!previewProxyPort) return undefined;

    // Don't proxy to Vibe Kanban's own ports (would create infinite loop)
    const vibeKanbanPort = window.location.port || '80';
    if (devServerPort === vibeKanbanPort) {
      console.warn(
        `[Preview] Ignoring dev server URL with same port as Vibe Kanban (${devServerPort}). ` +
          'This usually means the dev server failed to start or reported the wrong port.'
      );
      return undefined;
    }

    // Also check if it's the preview proxy port itself
    if (devServerPort === String(previewProxyPort)) {
      console.warn(
        `[Preview] Ignoring dev server URL with same port as preview proxy (${devServerPort}).`
      );
      return undefined;
    }

    const path = effectiveParsedUrl.pathname + effectiveParsedUrl.search;

    // Subdomain-based routing: the proxy extracts the port from the Host header
    const hostToken =
      hostId != null ? `${devServerPort}--${hostId}` : devServerPort;
    const proxyUrl = new URL(
      `http://${hostToken}.localhost:${previewProxyPort}${path}`
    );
    proxyUrl.searchParams.set('_refresh', String(previewRefreshKey));

    return proxyUrl.toString();
  }, [
    devServerPort,

View on GitHub (pinned to 4deb7eca8f)

Solutions

Restart the workspace dev server so it binds its own port instead of the proxy's port, then refresh the preview.
Change the dev server's configured port so it does not collide with the preview proxy port.
Inspect the dev-server detection/auto-discovery output in the attempt logs to see why the wrong port was reported and fix the startup failure.
Clear or correct the manual preview URL override if it points at the proxy port.

Example fix

// before
"dev": "vite --port 8910" // collides with preview proxy port
// after
"dev": "vite --port 5173 --strictPort"

Defensive patterns

Strategy: validation

Validate before calling

if (!previewProxyPort || devServerPort === String(previewProxyPort)) {
  console.warn('Dev server port collides with the preview proxy port.');
  return;
}

Type guard

function isProxySafePort(devServerPort: string | undefined, previewProxyPort: number | undefined): boolean {
  return !!devServerPort && !!previewProxyPort && devServerPort !== String(previewProxyPort);
}

Prevention

Keep dev server ports outside the range reserved for the preview proxy.
Verify port auto-detection against the dev server's actual listening output.
Fix dev server startup failures promptly — a failed server often reports a fallback port that collides.
Clear stale manual URL overrides after changing port configuration.

When it happens

Trigger: Computed in the iframeUrl useMemo when isLoopbackPreview is true, previewProxyPort is set, and devServerPort === String(previewProxyPort).

Common situations: The dev server failed to start and port detection fell back to the proxy's port; the dev server was configured to listen on the same port the preview proxy occupies; a stale/incorrect override URL pointing at the proxy port was entered.

Related errors

AI-assisted analysis of BloopAI/vibe-kanban@4deb7eca8f (2026-08-29). Data as JSON: /api/errors/f637b71be4f8856a. Report an issue: GitHub.