React Native fetch sometimes catch a JSON parse error

Question

I'm working on a React Native application, which fetches an API response from a server. Sometimes, it returns success, but sometimes it catches an error.

The following code is my fetch function:

export default async (url, body = null, method = 'GET') => {
    let config = {
        method,
    };
    return await fetch(url, config).then((response) => {
        if (!response.ok) {
            throw Error(response.statusText);
        }
        return response.json();
    }).catch(error => {
        console.warn(error); // sometimes it was catched in here
    });
};

It was returning various error messages, e.g:

[SyntaxError: JSON Parse error: "\u302\" is not a valid unicode escape]
[SyntaxError: JSON Parse error: Invalid escape character 4]
[SyntaxError: JSON Parse error: "\u740\" is not a valid unicode escape]

I'm already checked my API response through the browser and it didn't find anything wrong with the response. I thought there was something wrong with my ES code maybe.

What is going wrong here...?

Chris Geirman Chris Geirman · Accepted Answer · 2017-10-19T03:17:22

The \u302\ character appears to be something similar to the ^ symbol called a "COMBINING CIRCUMFLEX ACCENT" http://www.fileformat.info/info/unicode/char/0302/index.htm

And \u740\ is a "SYRIAC FEMININE DOT http://www.fileformat.info/info/unicode/char/0740/index.htm

The JSON parser just isn't able to handle these characters I guess, or at least not in the way they're presented. It looks like they're being used as an escape character, but it's hard to know since you didn't provide samples of the output that generated each error.

React Native fetch sometimes catch a JSON parse error

1 Answers