TypeError: Cannot read property 'error' of null

[omonkulov]

I was trying to show off my web app to a friend only to later realize that my API in spotify dashboard was still in "Development mode." This caused an error when trying to send request to the API. However my app would crash with error message: TypeError: Cannot read property 'error' of null #401

var _toError = function (response) {
//Error Here
 -> if (typeof response.body === 'object' && response.body.error && typeof response.body.error === 'object' && response.body.error.reason) {
    return new WebapiPlayerError(response.body, response.headers, response.statusCode);
  }

  if (typeof response.body === 'object' && response.body.error && typeof response.body.error === 'object') {
    return new WebapiRegularError(response.body, response.headers, response.statusCode);
  }

  if (typeof response.body === 'object' && response.body.error && typeof response.body.error === 'string') {
    return new WebapiAuthenticationError(response.body, response.headers, response.statusCode);
  }

  /* Other type of error, or unhandled Web API error format */
  return new WebapiError(response.body, response.headers, response.statusCode, response.body);
};

I guess response.body.error is not valid, thus it is throwing an error.

---

The reason this was happening was because the response.body is null.

[synerjay]

I am also getting this error for some reason

[LuukOriginal]

Yea, same here: http-manager.js:34 Uncaught TypeError: Cannot read property 'error' of null at _toError (http-manager.js:34) at http-manager.js:71 at Request.push../node_modules/superagent/lib/client.js.Request.callback (client.js:663) at Request.<anonymous> (client.js:481) at Request.push../node_modules/component-emitter/index.js.Emitter.emit (index.js:145) at XMLHttpRequest.xhr.onreadystatechange (client.js:802)

I asume the response body is undefined, so "error" is not a valid property

Ok, I think I found a fix:

var _toError = function(response) {
  if (response.body && typeof response.body === 'object' && response.body.error && typeof response.body.error === 'object' && response.body.error.reason) {
    return new WebapiPlayerError(response.body, response.headers, response.statusCode);
  }

  if (response.body && typeof response.body === 'object' && response.body.error && typeof response.body.error === 'object') {
    return new WebapiRegularError(response.body, response.headers, response.statusCode);
  }

  if (response.body && typeof response.body === 'object' && response.body.error && typeof response.body.error === 'string') {
    return new WebapiAuthenticationError(response.body, response.headers, response.statusCode);
  }
  
  /* Other type of error, or unhandled Web API error format */
  return new WebapiError(response.body, response.headers, response.statusCode, response.body);
};

Now it checks if response.body is defined, it will prevent the error

Edit: That results into some new errors tho

[synerjay]

Edit: That results into some new errors tho

What kind of new errors are u getting?

[synerjay]

Yea, same here: http-manager.js:34 Uncaught TypeError: Cannot read property 'error' of null at _toError (http-manager.js:34) at http-manager.js:71 at Request.push../node_modules/superagent/lib/client.js.Request.callback (client.js:663) at Request.<anonymous> (client.js:481) at Request.push../node_modules/component-emitter/index.js.Emitter.emit (index.js:145) at XMLHttpRequest.xhr.onreadystatechange (client.js:802)

I asume the response body is undefined, so "error" is not a valid property

Ok, I think I found a fix:

var _toError = function(response) {
  if (response.body && typeof response.body === 'object' && response.body.error && typeof response.body.error === 'object' && response.body.error.reason) {
    return new WebapiPlayerError(response.body, response.headers, response.statusCode);
  }

  if (response.body && typeof response.body === 'object' && response.body.error && typeof response.body.error === 'object') {
    return new WebapiRegularError(response.body, response.headers, response.statusCode);
  }

  if (response.body && typeof response.body === 'object' && response.body.error && typeof response.body.error === 'string') {
    return new WebapiAuthenticationError(response.body, response.headers, response.statusCode);
  }
  
  /* Other type of error, or unhandled Web API error format */
  return new WebapiError(response.body, response.headers, response.statusCode, response.body);
};

Now it checks if response.body is defined, it will prevent the error

Edit: That results into some new errors tho

What if you surround the multiple if statements in a big if statement that checks if response.body exists? I know it's similar to 'response.body &&' but what if it behaves differently?

[anthonyjro]

Yea, same here: http-manager.js:34 Uncaught TypeError: Cannot read property 'error' of null at _toError (http-manager.js:34) at http-manager.js:71 at Request.push../node_modules/superagent/lib/client.js.Request.callback (client.js:663) at Request.<anonymous> (client.js:481) at Request.push../node_modules/component-emitter/index.js.Emitter.emit (index.js:145) at XMLHttpRequest.xhr.onreadystatechange (client.js:802)

I asume the response body is undefined, so "error" is not a valid property

Ok, I think I found a fix:

var _toError = function(response) {
  if (response.body && typeof response.body === 'object' && response.body.error && typeof response.body.error === 'object' && response.body.error.reason) {
    return new WebapiPlayerError(response.body, response.headers, response.statusCode);
  }

  if (response.body && typeof response.body === 'object' && response.body.error && typeof response.body.error === 'object') {
    return new WebapiRegularError(response.body, response.headers, response.statusCode);
  }

  if (response.body && typeof response.body === 'object' && response.body.error && typeof response.body.error === 'string') {
    return new WebapiAuthenticationError(response.body, response.headers, response.statusCode);
  }
  
  /* Other type of error, or unhandled Web API error format */
  return new WebapiError(response.body, response.headers, response.statusCode, response.body);
};

Now it checks if response.body is defined, it will prevent the error

Edit: That results into some new errors tho

Tried this earlier too, can confirm it just creates more bugs.

I may have found a fix for it, though. Made sure to search first to see that no one had suggested it first:

var _toError = function(response) {
  
  if(!response.body){
    response.body = {
      error : {
        message : response.statusCode
      }
    };
  }

Basically I noticed that for whatever reason, there are some responses the Spotify API doesn't return a body for. So I just made it so that in the case that response.body is null, a body object is added with an error object that contains a message attribute, which I set to be the status code returned by the response.

Then essentially, it would default to returning a WebapiARegularError, which properly displays an error message in the browser (it should say "Details: [status code here]."). It hasn't brought up any additional problems for me so far, but you all are welcome to try it and confirm it works.

[faustoct1]

I think this issue is about this error when running

curl --request GET \
  --url 'https://api.spotify.com/v1/search?q=hariel&type=track' \
  --header 'Authorization: Bearer BQDFUj1QFNp6mtnpLkA0yYttbfJ_9oJ9RSWJ_gTW_UCU3qJHuO4970GbjCyUHqN-...kkQa4qFqlwGagVUFggjITEWOJ02A'

I found there's no up to 25 users on my users dashboard in my spotify profile. Add users like yourself and it might work fully.

References: https://community.spotify.com/t5/Spotify-for-Developers/User-not-registered-in-the-Developer-Dashboard-on-get-profile/td-p/5260021

I think that a cause of this problem is in App Status on our Spotify API Dashboard. Newly-created apps begin in development mode, so as default, your application can authorize you and users who are added by you from Dashboard to access.

Therefore I think that you need to apply REQUEST EXTENTION for publishing to external users if your application's status is that.

Hope it helps.