Fix: Invalid JSON Response from API

The Error Message

The most common form of this error looks like:

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

The < is the first character of an HTML page. The server returned something like a 404 page, a login redirect, a WAF block page, or a 500 error template — none of which are JSON.

Common Causes

Safe fetch() Pattern

Check res.ok and the Content-Type header before calling res.json():

async function fetchJson<T>(url: string): Promise<T> {
  const res = await fetch(url);

  // Non-2xx status: read body as text to expose the error
  if (!res.ok) {
    const body = await res.text();
    throw new Error(
      `HTTP ${res.status} ${res.statusText}: ${body.slice(0, 200)}`
    );
  }

  // Guard against wrong Content-Type (e.g. accidental HTML response)
  const contentType = res.headers.get("content-type") ?? "";
  if (!contentType.includes("application/json")) {
    const body = await res.text();
    throw new Error(
      `Expected JSON but got ${contentType}: ${body.slice(0, 200)}`
    );
  }

  return res.json() as Promise<T>;
}

Axios Pattern

With Axios, non-2xx responses automatically throw, so you just need to handle the error:

import axios, { AxiosError } from "axios";

try {
  const { data } = await axios.get("/api/users");
  console.log(data);
} catch (err) {
  if (err instanceof AxiosError && err.response) {
    // err.response.data is the parsed body (may be HTML string)
    console.error("Status:", err.response.status);
    console.error("Body:", String(err.response.data).slice(0, 200));
  } else {
    throw err;
  }
}

Debug the Raw Response

If you are not sure what the server is returning, fetch the body as text and paste it below to inspect it:

const res = await fetch("/api/data");
const raw = await res.text();
console.log(raw); // paste this into the formatter below

Or open the browser DevTools → Network tab → click the request → Response tab to see the raw body.