fix(cookie-picker): jsonResponse references undefined url — all API routes return HTML error #32
Description
Bug
The cookie picker UI fails with:
Unexpected token '<', "<!doctype "... is not valid JSON
Root Cause
In browse/src/cookie-picker-routes.ts, the jsonResponse() helper (line 34) references url to build the CORS header, but url is not in scope — it only exists as a parameter inside handleCookiePickerRoute().
// line 29-37 — `url` is undefined here
function jsonResponse(data: any, status = 200): Response {
return new Response(JSON.stringify(data), {
status,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': `http://127.0.0.1:${parseInt(url.port, 10) || 9400}`,
// ^^^ ReferenceError
},
});
}Every API call (/cookie-picker/browsers, /domains, etc.) throws ReferenceError: url is not defined. Bun catches this and returns its default HTML error page (<!doctype html>...). The frontend's api() function calls res.json() on that HTML → parse error.
errorResponse() has the same issue since it delegates to jsonResponse(), so error handling also fails.
Suggested Fix
Extract port once at the top of handleCookiePickerRoute() and pass it explicitly:
function jsonResponse(data: any, port: number, status = 200): Response {
return new Response(JSON.stringify(data), {
status,
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': `http://127.0.0.1:${port}`,
},
});
}
function errorResponse(message: string, code: string, port: number, status = 400, action?: string): Response {
return jsonResponse({ error: message, code, ...(action ? { action } : {}) }, port, status);
}
export async function handleCookiePickerRoute(url, req, bm) {
const port = parseInt(url.port, 10) || 9400; // extracted once
// ... pass `port` to all jsonResponse() and errorResponse() calls
}Full diff: main...fix/cookie-picker-json-response-scope
Environment
- macOS, Chrome browser
- Introduced in commit
f7b9532(Phase 3.5)