CODEWITHSUNDEEP
angularrxjsangular2-http
manugupt1
manugupt1

Reputation: 2437

Debugging http.get and observables in angular 2

I have been trying to get the REST API from Ensemble running on Angular2 using observables. I am not sure what the problem is with it. This is how my code looks like (and the error is attached here http://pastebin.com/mSHEq43H)

Notice that I have added proper headers. To verify, we can change the header value and see that we receive a 415 if I change the header name.

    let header = new Headers();
    header.append('Content-type', 'application/json');
    this.http.get('http://rest.ensembl.org/lookup/id/ENSG00000157764?expand=0',
{
      headers: header
    })
      .map((res: Response) => res.json())
      .subscribe(
      data => {
        console.log('data');
        this.data = data;
      },
      error => {
        this.errorMessage = <any>error;
      },
      () => console.log('random look complete'));

I have also tried my API with only the Content-type header set as application/json on Postman it works without any issue using the same ID and header.

In order to debug further, I used an alternate API which works fine

   this.http.get('http://jsonplaceholder.typicode.com/photos/1')
    .map((res: Response) => res.json())
        .subscribe(res => {
            this.data = res;
            this.errorMessage = false;
        });

Am I missing out on anything?

Other questions that I have is if there is an easy way to debug observabless as well? Any resource will be helpful.

Update

I have figured out what the problem is Angular 2 on RC5 ( I have not checked with the final release yet). http.get API has two parameters (url, RequestOptionsArg).

If I am using RequestOptionsArg, then I have to pass in ALL the parameters even the body if it was empty.

The documentation says if the body is empty it will be assigned null or undefined. However, the API calls toString() and I am assuming there are no checks for null and hence the problem.

Upvotes: 2

Views: 4605

Answers (1)

martin
martin

Reputation: 96959

Well it looks like the error is:

ORIGINAL EXCEPTION: TypeError: Cannot read property 'toString' of null
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'toString' of null
    at Request.Body.text (http://172.17.110.205:3000/vendor.bundle.js:47211:26)
    at Request.getBody (http://172.17.110.205:3000/vendor.bundle.js:49014:29)
    at Observable._subscribe (http://172.17.110.205:3000/vendor.bundle.js:46832:37)
    at Observable.subscribe (http://172.17.110.205:3000/vendor.bundle.js:87952:62)
    at Observable._subscribe (http://172.17.110.205:3000/vendor.bundle.js:88009:28)
    at MapOperator.call (http://172.17.110.205:3000/vendor.bundle.js:90202:23)
    at Observable.subscribe (http://172.17.110.205:3000/vendor.bundle.js:87952:38)
    at SearchComponent.onSubmit (http://172.17.110.205:3000/0.chunk.js:37:14)
    at DebugAppView._View_SearchComponent2._handle_click_14_0 (SearchComponent.ngfactory.js:730:35)

So does the request return any body? Your code looks fine, so the problem is probably somewhere else. Is the above code coming from SearchComponent?

Regarding debugging rxjs code, you can definitely Google some interesting articles, however usually the only options is using do() operator to see what data's going through the operator chain.

Notable pages:

Upvotes: 1

Related Questions