🐛 Fix Unexpected token '<' console spam on Netlify#4332
Conversation
On Netlify (no Go backend), unhandled API requests fall through MSW's 'bypass' mode to Netlify's SPA catch-all, which returns index.html as 200 OK. Every hook calling .json() on this HTML response throws SyntaxError: Unexpected token '<' — flooding the console with errors. Fix: Replace MSW's onUnhandledRequest 'bypass' with a custom handler that silently drops unhandled /api/* requests (letting them fail as network errors, which hooks already handle) while still bypassing non-API requests (fonts, images, external scripts). Signed-off-by: Andrew Anderson <andy@clubanderson.com>
|
/lgtm |
kubestellar-prow
bot
added
the
dco-signoff: yes
|
@clubanderson: you cannot LGTM your own PR. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. |
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: clubanderson The full list of commands accepted by this bot can be found here. The pull request process is described here DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |
✅ Deploy Preview for kubestellarconsole ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
kubestellar-prow
bot
added
approved
|
👋 Hey @clubanderson — thanks for opening this PR!
This is an automated message. |
There was a problem hiding this comment.
Pull request overview
This PR aims to stop repeated SyntaxError: Unexpected token '<' console errors on Netlify deployments by changing how MSW handles unhandled requests, specifically preventing unhandled /api/* calls from falling through to Netlify’s SPA catch-all and returning index.html.
Changes:
- Replaces
onUnhandledRequest: 'bypass'with a customonUnhandledRequestcallback. - Attempts to suppress unhandled
/api/*requests while continuing to passthrough non-API requests.
| onUnhandledRequest(request, print) { | ||
| const url = new URL(request.url) | ||
| // API calls that MSW doesn't handle should NOT fall through to Netlify's | ||
| // SPA catch-all (which returns index.html as 200 OK). That causes | ||
| // `SyntaxError: Unexpected token '<'` when code tries `.json()`. | ||
| // Silently ignore unhandled /api/* requests — they'll fail with a network | ||
| // error which hooks already handle, instead of a misleading HTML 200. | ||
| if (url.pathname.startsWith('/api/')) { | ||
| return | ||
| } |
There was a problem hiding this comment.
The early return for /api/* only skips calling print.*(); it doesn’t actually provide a response or force a network error. As a result, unhandled /api/* requests may still be performed against the origin and can still receive Netlify’s index.html 200 OK (so the .json() Unexpected token '<' issue may persist). If the intent is to make unhandled /api/* fail as a network error, add an explicit MSW catch-all handler for /api/* that returns a network error (or a non-HTML error status) instead of relying on onUnhandledRequest.
| // Non-API requests (fonts, images, external scripts) pass through normally | ||
| print.warning() |
There was a problem hiding this comment.
This changes behavior for non-API unhandled requests: previously onUnhandledRequest: 'bypass' would pass through silently, but now print.warning() will log a warning for every unhandled non-API request. If “pass through normally” is meant to be quiet, consider not calling print.warning() for these (or otherwise restoring silent bypass behavior).
| export async function startMocking(): Promise<void> { | ||
| await worker.start({ | ||
| onUnhandledRequest: 'bypass', | ||
| onUnhandledRequest(request, print) { | ||
| const url = new URL(request.url) |
There was a problem hiding this comment.
This logic only runs when MSW is actually started. The PR description targets console.kubestellar.io, but MSW startup is gated elsewhere (in main.tsx) and currently only checks VITE_DEMO_MODE / netlify.app. Unless MSW is enabled on console.kubestellar.io too, this change won’t affect the reported environment; either widen the gate to include that hostname or adjust the PR description/test plan accordingly.
🔄 Auto-Applying Copilot Code ReviewCopilot code review found 0 code suggestion(s) and 3 general comment(s). Also address these general comments:
Push all fixes in a single commit. Run Auto-generated by copilot-review-apply workflow. |
|
Thank you for your contribution! Your PR has been merged. Check out what's new:
Stay connected: Slack #kubestellar-dev | Multi-Cluster Survey |
Summary
On
console.kubestellar.io, unhandled/api/*requests fall through MSW'sbypassmode to Netlify's SPA catch-all → returnsindex.htmlas 200 OK →.json()throwsSyntaxError: Unexpected token '<'→ floods the console with errors every minute.Fix
Replace MSW's
onUnhandledRequest: 'bypass'with a custom handler that silently drops unhandled/api/*requests. They fail as network errors (which hooks already handle gracefully) instead of returning misleading HTML 200s.Non-API requests (fonts, images, external scripts) still pass through normally.
Test plan
Unexpected token '<'errors in console