How to fix SyntaxError: Unexpected token < in JSON at position 0 : Stripe: Help & Support

How to fix SyntaxError: Unexpected token < in JSON at position 0

`SyntaxError: Unexpected token < in JSON at position 0` errors indicate that an HTTP request expected a JSON response, but received non-JSON data instead.

Assuming you have access to the code sending the request, investigate and debug further by adding error handling logic that logs the error and response data to the console. The logging approach depends on whether the JavaScript code uses fetch() or JSON.parse().

This article covers troubleshooting guidance for SyntaxError: Unexpected token < in JSON at position 0 errors, and these common variants:

SyntaxError: The string did not match the expected pattern
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
JSON Parse error: Unrecognized token '<'

What causes this error?

This error occurs when a request expects a JSON response, but the actual response is in a different format. The JSON parser throws an error when it detects an invalid response.

Possible root causes for this error include:

Incorrect request URL
Content-Type header is not set to application/json
Variable assignment or character encoding problems
Server-side errors
Malformed JSON

In many cases, the unexpected response is HTML or XML containing details of a server-side error.

How do I fix it?

Add error handling code and log the error and response data to the console to investigate why valid JSON wasn’t received. How the data is logged depends on if the code uses fetch() or JSON.parse().

Common root causes and their solutions include:

Response was HTML with a 500 status code: Examine the server’s error logs for server-side errors.
Response was HTML with a 404 status code: Check that the URL passed to fetch() is correct.
Response was blank or an unusual string of characters: Check variable assignments and character encodings.

Log response data from `fetch()`

A JavaScript fetch() function may look similar to this:

Javascript code block showing a Fetch API request to a sample URL, a promise that returns the response's JSON, and a promise that does something with the data. fetch('https://example.com/some/path/to/json') .then(response => response.json()) .then(data => console.log(data))

The error occurs when response.json() is called and the data can’t be parsed into JSON. For example, the response might be HTML or XML.

Print the data to the console by creating a clone of the response and adding a function to handle the error:

A response object can only be read once. Therefore, we want to make a clone of it to print to the console before the original response is read on Line 5.

On Line 8, we added an error handling function. If response.json() fails, this function is called and logs the error and responseClone data to the console for further examination.

Log response data from `JSON.parse()`

If the code uses JSON.parse(data), log the response data to the console by adding a try…catch statement to handle the error:

Javascript code block showing a try-catch statement. The try block invokes JSON.parse(data) and the catch block logs errors to the console. try { JSON.parse(data); } catch (error) { console.log('Error parsing JSON:', error, data); }