“Uncaught SyntaxError: Unexpected token T in JSON at position 0” Error in Ranger Web UI when adding new NiFi Repository

I have seen quite a few Ranger users who reported an issue that when trying to add a new NiFi repository within Ranger Web UI, the web page simply keeps Loading forever without returning anything. To re-produce, please see screenshots below:

Firstly click on the + sign in the NIFI section:

You will see that the page just keeps loading forever:

If you check Ranger Admin’s server log in the backend, you won’t notice any errors, as in fact, the Ranger API returned successfully with full JSON data. We can confirm this by using Inspector tool in Chrome:

However, if you check the Console section of the Inspector tool, you will notice that there are some Javascript errors:

Copy and paste the error below, so that Search Engine can see the error message:

Uncaught SyntaxError: Unexpected token T in JSON at position 0
    at JSON.parse ()
    at Object.n.hideIfNull (XAUtils.js:1288)
    at BackboneFormDataType.js:65
    at Array.filter ()
    at Function.T.filter.T.select (underscore.js:172)
    at R.n.getFormElements (BackboneFormDataType.js:64)
    at R.n.schema (ServiceForm.js:81)
    at backbone-forms.js:43
    at R.n.initialize (backbone-forms.js:43)
    at R.n.initialize (ServiceForm.js:56)

To see what the JSON data returned from Ranger API looks like, we can get the response data for the API call under Chrome Inspector Tool’s Network tab, and then copy data to jsonformatter to see the properly formatted version:

{
   "id": 10,
   "guid": "2f513637-b1c8-4983-b58a-62ff5cd2aedf",
   "isEnabled": true,
   "createTime": 1509558080000,
   "updateTime": 1560124371000,
   "version": 3,
   "name": "nifi",
   "implClass": "org.apache.ranger.services.nifi.RangerServiceNiFi",
   "label": "NIFI",
   "description": "NiFi",
   "options": {
      "enableDenyAndExceptionsInPolicies": "false"
   },
   "configs": [
      {
         "itemId": 400,
         "name": "nifi.url",
         "type": "string",
         "mandatory": true,
         "defaultValue": "http://localhost:8080/nifi-api/resources",
         "validationRegEx": "",
         "validationMessage": "",
         "uiHint": "The URL of the NiFi REST API that provides the available resources.",
         "label": "NiFi URL"
      },
.....

The main issues lies with the property called “uiHint“, the correct data should be:

{"TextFieldWithIcon":true, "info": "The URL of the NiFi REST API that provides the available resources."}'

So, to solve the issue, simply update Ranger’s backend database in table x_service_config_def using below query (based on MySQL, change to your choice of SQL server):

UPDATE x_service_config_def 
SET ui_hint='{"TextFieldWithIcon":true, "info": "The URL of the NiFi REST API that provides the available resources."}' 
WHERE name='nifi.url';

After that, simply refresh the page in Ranger UI again and issue should be resolved.

This issue affects both 0.6 and 0.7 version of Ranger, see github code below:

https://github.com/apache/ranger/blob/ranger-0.6/agents-common/src/main/resources/service-defs/ranger-servicedef-nifi.json#L52
https://github.com/apache/ranger/blob/ranger-0.7/agents-common/src/main/resources/service-defs/ranger-servicedef-nifi.json#L52

And it was fixed since 1.0:

https://github.com/apache/ranger/blob/ranger-1/agents-common/src/main/resources/service-defs/ranger-servicedef-nifi.json#L52