{"record":{"id":"8c1211d0c0224f22","repo":"BloopAI/vibe-kanban","slug":"preview-ignoring-dev-server-url-with-same-port-a","errorCode":null,"errorMessage":"[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.","messagePattern":"\\[Preview\\] Ignoring dev server URL with same port as Vibe Kanban \\((.+?)\\)\\. This usually means the dev server failed to start or reported the wrong port\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/web-core/src/pages/workspaces/PreviewBrowserContainer.tsx","lineNumber":292,"sourceCode":"      return undefined;\n    }\n\n    // Non-loopback URLs (e.g. Coder port-forwarded URLs like\n    // https://4000--workspace--user.coder.example.com) can be loaded\n    // directly — subdomain proxy routing only works for localhost.\n    if (!isLoopbackPreview) {\n      const directUrl = new URL(effectiveParsedUrl.toString());\n      directUrl.searchParams.set('_refresh', String(previewRefreshKey));\n      return directUrl.toString();\n    }\n\n    // Loopback URLs need the preview proxy for origin isolation\n    if (!previewProxyPort) return undefined;\n\n    // Don't proxy to Vibe Kanban's own ports (would create infinite loop)\n    const vibeKanbanPort = window.location.port || '80';\n    if (devServerPort === vibeKanbanPort) {\n      console.warn(\n        `[Preview] Ignoring dev server URL with same port as Vibe Kanban (${devServerPort}). ` +\n          'This usually means the dev server failed to start or reported the wrong port.'\n      );\n      return undefined;\n    }\n\n    // Also check if it's the preview proxy port itself\n    if (devServerPort === String(previewProxyPort)) {\n      console.warn(\n        `[Preview] Ignoring dev server URL with same port as preview proxy (${devServerPort}).`\n      );\n      return undefined;\n    }\n\n    const path = effectiveParsedUrl.pathname + effectiveParsedUrl.search;\n\n    // Subdomain-based routing: the proxy extracts the port from the Host header\n    const hostToken =","sourceCodeStart":274,"sourceCodeEnd":310,"githubUrl":"https://github.com/BloopAI/vibe-kanban/blob/4deb7eca8f381f7cbc1f9d15515a9ab8f8009053/packages/web-core/src/pages/workspaces/PreviewBrowserContainer.tsx#L274-L310","documentation":"This warning is logged by the PreviewBrowserContainer when the detected/overridden dev server port equals the port Vibe Kanban's own web UI is served on. Proxying the preview iframe to the app's own port would create an infinite loop (the preview would load Vibe Kanban itself), so the URL is discarded and iframeUrl becomes undefined, leaving the preview blank. It usually indicates the dev server failed to start and a fallback/incorrect port was reported.","triggerScenarios":"Computed in the iframeUrl useMemo when isLoopbackPreview is true, previewProxyPort is set, and devServerPort === (window.location.port || '80') — i.e. the dev-server URL's port matches the port the Vibe Kanban UI itself is loaded from.","commonSituations":"The workspace dev server crashed or never bound its port and auto-detection picked up the app's port; the user manually typed the Vibe Kanban URL into the preview URL override bar; running the dev server with a port equal to FRONTEND_PORT; a dev tool (e.g. vite) defaulting to a port that collides with the app's port.","solutions":["Start/fix the workspace dev server so it binds a real port distinct from the Vibe Kanban frontend port, then refresh the preview.","Check the dev server logs in the task attempt output for a startup crash (port already in use, missing dependency) and fix the underlying failure.","Set the dev server to a different port (e.g. change its config or FRONTEND_PORT via .env) so the ports no longer collide.","Correct or clear the URL entered in the preview address bar if a wrong URL was manually entered."],"exampleFix":"// before (vite.config.ts)\nserver: { port: 3000 } // same port as Vibe Kanban frontend\n// after\nserver: { port: 5173, strictPort: true }","handlingStrategy":"validation","validationCode":"const vibeKanbanPort = window.location.port || '80';\nconst port = new URL(devServerUrl).port;\nif (port === vibeKanbanPort) {\n  console.warn('Dev server URL points at the Vibe Kanban app itself; fix the dev server.');\n  return;\n}","typeGuard":"function isSafePreviewPort(devServerPort: string | undefined): boolean {\n  const appPort = window.location.port || '80';\n  return !!devServerPort && devServerPort !== appPort;\n}","tryCatchPattern":null,"preventionTips":["Always run the workspace dev server on a port distinct from FRONTEND_PORT.","Use strictPort in dev server config so startup fails loudly instead of silently shifting ports.","Watch the dev server startup logs in the attempt output before relying on the preview.","Avoid manually pasting the app's own URL into the preview address bar."],"tags":["preview","port-conflict","dev-server","iframe"],"backgroundTag":"port-conflict-self-proxy","analyzedSha":"4deb7eca8f381f7cbc1f9d15515a9ab8f8009053","analyzedAt":"2026-08-29T09:24:13.446Z","schemaVersion":2},"datasetVersion":"2026-08-29T12:17:43.993Z"}