JSON Parse error: Unrecognized token (no JSON shown) #10377
Not sure. I get zero information in the stack trace or logs that points to my own code. This appears to be a flaw in JSON parsing error reporting.
Expected Results
Similar to #8726, I have a problem when JSON tries to be parsed somewhere deep in RN, seems to even be in native-land. Unlike that bug, which was resolved by fixing Fetch, I can’t even tell if Fetch or anything else is the issue here— we need the JSON to be printed so we can see what’s wrong.
I searched the entire react-native codebase for both «JSON Parse error» and «Unrecognized token» to try and fix it myself, nothing found. So it must be in a dependency or something.
Hoping someone knows where these errors are coming from, and can print the offending JSON so I can actually fix the root cause, which is impossible to identify since the offending JSON is not shown.
JSON Parse error: Unrecognized token'<' — react-native
«JSON Parse error: Unrecognized token'<‘» Error is showing while hitting the api. Code is attached below Note* : Response is in the JSON format.
Please help. Thanks,
16 Answers 16
This Means you are getting Html response from the server probably a 404 or 500 error. Instead of response.json() use response.text() you will get the html in text.
You can try by adding the headers to your fetch api, as it posts your record to your url.
I am pretty sure all these answers are correct. From what I have seen, if you have properly set the request header with:
The Accept header will tell the server what data type we are sending. Content-Type tells the client of what the response data type will be.
You most likely had to change the format of the body because the server may not be setup to handle application/json data types. In this case if you have access to your server you can add it to a config file or in .htaccess. If you still get the error, then there is an error in the server’s json response.
If you haven’t used POSTMAN for API testing, go and grab it because it has helped me lots with debugging API’s.
What causes “SyntaxError: JSON Parse error: Unrecognized token ‘<'" in React Native?
TL;DR: In React Native, you will get “SyntaxError: JSON Parse error: Unrecognized token ‘<‘” if your URL returns a 404 error, or in general if the content is not a JSON string.
In a recent post, I showed how to display a list of movies that had been fetch ed from a REST API. It worked great, but I wondered what would happen to my app’s user if their device was offline, or if the REST API ever went down. To mimic this behavior, I changed the URL by adding the number 1 at the end of it, like this: “https://facebook.github.io/react-native/movies.json1”.
And here’s what I saw in the emulator:
SyntaxError: JSON Parse error: Unrecognized token ‘
The red screen says “SyntaxError: JSON Parse error: Unrecognized token ‘<‘”. That may be confusing, although if you work with REST APIs for any time, you’ll soon come to recognize what it means. Meantime, how do we investigate this?
It’s a fancy 404 error page. That explains why response.json barfs on this; it’s not JSON. Your app expected a JSON string. It tried to parse the string into a JavaScript object, and couldn’t handle a non-JSON string. As a reminder, here’s that fetch call:
In the longer term, I will want to replace that red screen of death with a nice error page which instructs the user what to do. I’m still developing my application, however, and as a dev, I’d rather see the stack trace for errors like this when they occur.
So to deal with this, I’ll do two things: 1) I’ll add a “TODO FIXME” note in my code. When I’m cleaning up code in the end stages of development, I know to look for these types of comments which indicate work still needs to be done. 2) I’ll open an issue in my issue tracker which will let everyone on my team know that there’s something that still has to be handled in building the application. I’ll bring this to the attention of anyone who needs to know (a project manager, perhaps). The project manager may assign a designer to build a page with some graphics or specific text to display to the user in case of this error.
Json parse error unrecognized token что это
This guide will help you to fix SyntaxError: Unexpected token < in JSON at position 0 . This guide also applies to these other common variants of the same error:
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: Unrecognised token ‘<‘
Summary
These errors indicate that your JavaScript code expected to receive JSON but got something else instead (probably HTML in the form of a server-side error). To fix the issue, you need to examine what you got instead of the expected JSON to determine what the problem is.
Details
Usually, this error is caused when your server returns HTML (which typically begins with <DOCTYPE html> or <html> ) instead of JSON. Valid JSON cannot begin with a < character, so the JSON parser knows immediately that the data isn’t valid JSON and produces one of the error messages mentioned above.
To fix this error, you need to figure out why you’re getting HTML (or something else) instead of the JSON you expected. To do this, you need to log the data that you’re trying to parse to the console.
If you’re using fetch()
Use this approach if your code looks something like this:
In this case, the error is thrown when response.json() tries to run and fails to parse the data from the server as JSON. You can add a function to handle the error, display the raw text of the response body from the server and log it to the console (see notes about commented lines below):
Here’s an explanation of each line with a numbered comment:
A responseClone variable is required to hold a clone of the response object because the body of a response can only be read once. When response.json() is called, the body of the original response is read, which means it cannot be read again while handling the JSON parse error. Cloning the response to responseClone provides two copies of the response body to work with; one in the original response to use with response.json() and another to use with responseClone.text() if response.json() fails.
This line populates the responseClone variable with a clone of the response received from the server.
A second function argument is passed to the then() function that follows the response.json() call. This second function will be called if the promise from response.json() is rejected (i.e. a JSON error is encountered).
This line logs the rejectionReason from the rejected response.json() promise and the responseClone so it can be examined if needed (the HTTP status code is often useful for debugging, for example).
Instead of trying to parse the response body from the server as JSON, it is processed as raw text.
The body text is logged to the console for examination.
If you’re using JSON.parse()
Use this method if the code that’s throwing the error looks like this:
In this case, you can log the data to the console if an error is encountered to see what it contains:
What do I do next?
Once you can see the data that’s causing the JSON parse error, it will hopefully provide a clue as to why you’re not getting the valid JSON you expect. Some of the most common issues that lead to this error are:
If you see HTML indicating a 404 Not Found error instead of the JSON you expect, check the URL you’re passing to fetch() and make sure that it’s correct.
If you see HTML indicating a server error (such as a 500 error code), examine your server’s error logs to determine why your server is encountering an error instead of providing the JSON you expect.
If you cannot see anything or if you have an unusual jumble of characters, check your variable assignments and character encodings.