React-native: JSON Parse error: Unrecognized token (no JSON shown)

[GeoffreyPlitt]

Issue Description

JSON Parse error: Unrecognized token (no JSON shown)

Steps to Reproduce / Code Snippets

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 https://github.com/facebook/react-native/issues/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.

Additional Information

• React Native version: 0.35
• Platform(s) (iOS, Android, or both?): Android, maybe both.
• Operating System (macOS, Linux, or Windows?): macOS

[GeoffreyPlitt]

Here's what the logs show. This is all I can see in the logs that's relevant to this issue.

10-13 15:08:21.354 15890 16060 W ReactNativeJS: Possible Unhandled Promise Rejection (id: 2):
10-13 15:08:21.354 15890 16060 W ReactNativeJS: JSON Parse error: Unrecognized token '?'
10-13 15:08:21.354 15890 16060 W ReactNativeJS: parse@[native code]
10-13 15:08:21.354 15890 16060 W ReactNativeJS: tryCallOne@http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:29314:10
10-13 15:08:21.354 15890 16060 W ReactNativeJS: http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:29400:19
10-13 15:08:21.354 15890 16060 W ReactNativeJS: http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:12756:54
10-13 15:08:21.354 15890 16060 W ReactNativeJS: callTimer@http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:12509:9
10-13 15:08:21.354 15890 16060 W ReactNativeJS: callImmediatesPass@http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:12613:28
10-13 15:08:21.354 15890 16060 W ReactNativeJS: callImmediates@http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:12628:43
10-13 15:08:21.354 15890 16060 W ReactNativeJS: http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:11363:57
10-13 15:08:21.354 15890 16060 W ReactNativeJS: guard@http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:11247:3
10-13 15:08:21.354 15890 16060 W ReactNativeJS: __callImmediates@http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:11363:6
10-13 15:08:21.354 15890 16060 W ReactNativeJS: http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:11308:24
10-13 15:08:21.354 15890 16060 W ReactNativeJS: guard@http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:11247:3
10-13 15:08:21.354 15890 16060 W ReactNativeJS: callFunctionReturnFlushedQueue@http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:11306:6
10-13 15:08:21.354 15890 16060 W ReactNativeJS: callFunctionReturnFlushedQueue@[native code]

[pranavrajs]

@GeoffreyPlitt Got the same issue. Fetch API calls work when remote debugging is live, no trace of issue is available. It seems the issues with response.json(). When i comment response.json, error has gone, but the result is different.

[satya164]

it points to a line number and column number in the bundle. It's painful, but you can open the bundle and go to the place to see the code which is causing it.

[GeoffreyPlitt]

@satya164 It's almost impossible to figure out that way. Should I do something with source maps?

[pranavrajs]

This is what i get as logs
Error occurs at response.json() call. Interesting thing is, this call works fine if i set chrome remote debug on. It works fine in iOS 10.0 (didn't test in earlier version)

11-01 08:53:27.036 32587  4288 I ReactNativeJS: { type: 'default',
11-01 08:53:27.036 32587  4288 I ReactNativeJS:   status: 200,
11-01 08:53:27.036 32587  4288 I ReactNativeJS:   ok: true,
11-01 08:53:27.036 32587  4288 I ReactNativeJS:   statusText: undefined,
11-01 08:53:27.036 32587  4288 I ReactNativeJS:   headers: 
11-01 08:53:27.036 32587  4288 I ReactNativeJS:    { map: 
11-01 08:53:27.036 32587  4288 I ReactNativeJS:       { date: [ 'Tue, 01 Nov 2016 03:23:21 GMT' ],
11-01 08:53:27.036 32587  4288 I ReactNativeJS:         server: [ 'Microsoft-HTTPAPI/2.0' ],
11-01 08:53:27.036 32587  4288 I ReactNativeJS:         'content-type': [ 'application/json' ],
11-01 08:53:27.036 32587  4288 I ReactNativeJS:         'content-length': [ '187' ] } },
11-01 08:53:27.036 32587  4288 I ReactNativeJS:   url: 'http://xx.xx.xx.xx/Service/json/xxxx',
11-01 08:53:27.036 32587  4288 I ReactNativeJS:   _bodyInit: '{\r\n  "Command": 20020,\r\n  "Id": 216,\r\n  "Name": "Tester",\r\n  "Email": "[email protected]",\r\n  "Tel": "[phone]",\r\n  "Pass": null,\r\n  "IsActive": true,\r\n  "HasAccount": false\r\n}',
11-01 08:53:27.036 32587  4288 I ReactNativeJS:   _bodyText: '{\r\n  "Command": 20020,\r\n  "Id": 216,\r\n  "Name": "Tester",\r\n  "Email": "[email protected]",\r\n  "Tel": "[phone]",\r\n  "Pass": null,\r\n  "IsActive": true,\r\n  "HasAccount": false\r\n}' }

Above is the response which i get from the API call

11-01 08:53:27.042 32587  4288 I ReactNativeJS: { [SyntaxError: JSON Parse error: Unrecognized token '?']
11-01 08:53:27.042 32587  4288 I ReactNativeJS:   line: 30380,
11-01 08:53:27.042 32587  4288 I ReactNativeJS:   column: 10,
11-01 08:53:27.042 32587  4288 I ReactNativeJS:   sourceURL: 'http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false' }

[satya164]

@GeoffreyPlitt It's difficult, but not impossible. If you wrote the code you'll be able to recognise it. The variable names are usually shortened to their first character.

Also if you can reproduce it in dev, it's even easier since it's not minified.

There might be a tool which uses source maps to make it easier, but I don't know.

[GeoffreyPlitt]

Well anyway that's a distraction; this bug is about no JSON content being shown when a JSON parse error happens, which is fixed in 0.36. Closing.

[pranavrajs]

For all those who have the same issue, please check with the encoding in your APIs. Most probably that can be the issue.

Otherwise, you may try the following code.

https://gist.github.com/pranavrajs/66bccee3f8ba100742a1273db6f587af

[outaTiME]

Hi guys,
I'm here with react-native 0.45 and I'm still having problems (on android only) with JSON, here my code:

fetchData = async () => {
  const start_time = Date.now();
  try {
    let uri = 'https://www.dropbox.com/s/dmrfa9b2043fa2t/catalog.json?raw=1';
    let response = await fetch(uri);
    console.log(
      'Download remote data took: ' + (Date.now() - start_time) + 'ms.'
    );
    const data = await response.json();
    console.log('Items in catalog: ' + data.length);
    this.setState({
      appIsReady: true,
      data: data,
    });
  } catch (error) {
    console.error(error);
  }
};

Here the exception:

[SyntaxError: JSON Parse error: Unrecognized token '?']

But with @pranavrajs it works as expected:

fetchData = async () => {
  const start_time = Date.now();
  try {
    let uri = 'https://www.dropbox.com/s/dmrfa9b2043fa2t/catalog.json?raw=1';
    let response = await fetch(uri);
    console.log(
      'Download remote data took: ' + (Date.now() - start_time) + 'ms.'
    );
    // const data = await response.json();
    let data = await response.text();
    if (Platform.OS === 'android') {
      data = data.replace(/\r?\n/g, '').replace(/[\u0080-\uFFFF]/g, '');
    }
    data = JSON.parse(data);
    console.log('Items in catalog: ' + data.length);
    this.setState({
      appIsReady: true,
      data: data,
    });
  } catch (error) {
    console.error(error);
  }
};

Thanks !!!

[jstheoriginal]

@outaTiME did you ever figure out the native root cause of this issue on Android?

[Inn0vat0r]

{"top_menu":[{"id":1,"name":"Menu 1"},{"id":2,"name":"Menu 2"}],"left_menu":[{"id":1,"name":"Menu 1"},{"id":2,"name":"Menu 2"},{"id":3,"name":"Menu 3"}]} I have above json array, parsed and set state using this.setState({ tabScreen: responseJson.top_menu });

I unable to access array elements like {this.state.tabScreen[1].name} while rendering text.
Please help on this.

[jstheoriginal]

@Inn0vat0r when you console log what this.state.tabScreen looks like, what does it show?