Multiple http requests return syntax errors

Ionic Framework ionic-v3
1

Hello there, I am trying to get Ionic to work with our REST API and it gives me a “syntax error” in the Android chrome://inspect console.

ERROR 
SyntaxError
message: "Unexpected token h"
stack: "SyntaxError: Unexpected token h↵    at Object.parse (native)↵    at Response.Body.json (file:///android_asset/www/build/main.js:40717:25)↵    at MapSubscriber.project (file:///android_asset/www/build/main.js:141236:110)↵    at MapSubscriber._next (file:///android_asset/www/build/main.js:51262:35)↵    at MapSubscriber.Subscriber.next (file:///android_asset/www/build/main.js:15799:18)↵    at XMLHttpRequest.onLoad (file:///android_asset/www/build/main.js:41126:38)↵    at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:15213)↵    at Object.inner.inner.fork.onInvokeTask (file:///android_asset/www/build/main.js:4415:37)↵    at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:15134)↵    at n.runTask (file:///android_asset/www/build/polyfills.js:3:10390)↵    at XMLHttpRequest.invoke (file:///android_asset/www/build/polyfills.js:3:16170)"
get stack: function () { [native code] }
set stack: function () { [native code] }
__proto__: Error

Here is the relevant code:

// after importing Http, Headers, RequestOptions, rxjs/add/operator/map, etc
// headerOptions has my API key
this.http.get(`${url}/my-page`, headerOptions).map(res=>res.json()).subscribe(data => {
    // do stuff with data
    console.log(data);
});

// someplace else anywhere in app afterwards
this.http.get(`${url}/my-page-2`, headerOptions).map(res=>res.json()).subscribe(data => {
    // do stuff with data
    console.log(data);
});

What happens is that the first call returns the correct data from the server and the second gives the aforementioned “syntax error.”

If I reverse the order in which the two calls are made, my-page-2 then works and my-page-1 gives the syntax error.

What am I doing wrong? I am not terribly familiar with Observables.

https://github.com/driftyco/ionic/issues/11302 - here I posted logs, ionic info, etc. Not mentioned there, this error also occurs when I build it with Windows 10 instead of Mac OSX Sierra.

Thank you,
Luke Baird

2

Nothing is immediately popping out to me as being wrong in your code, so my initial reaction is to be suspect of what your server is doing/returning.

What kind of data is your server returning?

3

The server is returning JSON data back to the app.

ps. Luke and I are working on this together

4

Could you post a sample of the JSON returned or even provide the URI being called so we can have a look ourselves? Quite strange…

5

Oh wait, are you using ` around the URL intentionally instead of ’ or "?

Also: Is it always “Unexpected token h” or sometimes different characters?

6

{ "currentDeals": [ { "id": "xxx", "image": "xxx", "name": "Oil change special!", "time": "14" }, { "id": "yyy", "image": "yyy", "name": "$2.00 Off Hot Wax Express", "time": "14" }, { "id": "zzz", "image": "zzz", "name": "$3 Off Full Service Carwash!", "time": "14" }, { "id": "aaa", "image": "aaa", "name": "$6 Off select services!", "time": "14" }, { "id": "bbb", "image": "bbb", "name": "$10 Off Detail!", "time": "14" } ] }

7

As I said in your GitHub issue, don’t call json(). Log the actual response body instead, instead of poking the bear and triggering that parse error. That will show you what the server is actually returning.

8

In the actual code ` is being used. All of the get's work properly though with that character, it’s just that any get after the first, return that error.

@rapropos could you give us an example of what the change would look like?

9

this.http.get('url').subscribe((rsp) => console.log(rsp));

Although come to think of it, if you have Chrome’s developer tools open, you can get this same information out of the Network tab.

2 Likes
10

The information is from the Chrome inspect developer tools.

I did try outputting res instead of res.json() to the console–it gave the same output.

Does for some reason typescript string interpolation break urls?

I will give that a shot tonight.

11

The error in the initial post is derived from you calling json(). The Network tab in the Chrome developer tools should show you the actual response body, beyond the “h”, that I suspect will guide you to what is actually going on. I can’t believe that logging res and logging res.json() logs the exact same thing: that can’t be true.

12

after running the first request returning without .json:

ERROR SyntaxError {} main.js:1364
defaultErrorLogger main.js:1364
ErrorHandler.handleError main.js:1424
IonicErrorHandler.handleError main.js:152687
ngZone.onError.subscribe.next main.js:5053
schedulerFn main.js:4127
SafeSubscriber.__tryOrUnsub main.js:15944
SafeSubscriber.next main.js:15893
Subscriber._next main.js:15835
Subscriber.next main.js:15799
Subject.next main.js:25257
EventEmitter.emit main.js:4113
NgZone.triggerError main.js:4484
inner.inner.fork.onHandleError main.js:4445
t.handleError polyfills.js:3
n.runTask polyfills.js:3
invoke

Response {_body: "{↵    "specials": [↵         {↵            "id": "…ar? Try one of our details!"↵        }        ]↵}", status: 200, ok: true, statusText: "OK", headers: Headers…}
_body: "{↵    "specials": [↵         {↵            "id": "8fab1fc0-aad6-4200-8397-378b8a1c02b5",↵            "image":"http://bit.ly/2****InL",↵            "link_id":"oil-change",↵            "title":"Need a tune up? Check out our Oil and Lube shop."↵        },     {↵            "id": "525ad0a2-8476-424e-917a-0d2151f0619e",↵            "image":"http://bit.ly/****HjA",↵            "link_id":"full-service-carwash",↵            "title":"Have a look at our featured car wash services!"↵        },     {↵            "id": "f4878ae3-8c52-4f09-b737-b85377b254da",↵            "image":"http://bit.ly/2o***7",↵            "link_id":"exterior-detail",↵            "title":"Dirty car? Try one of our details!"↵        }        ]↵}"
headers: Headers
_headers: Object
_normalizedNames: Object
__proto__: Headers
ok: true
status: 200
statusText: "OK"
type: 2
url: "https://**********.execute-api.us-west-1.amazonaws.com/prod/specials"
__proto__: __

running after the second request (without .json):

ERROR SyntaxError {} main.js:1364
defaultErrorLogger main.js:1364
ErrorHandler.handleError main.js:1424
IonicErrorHandler.handleError main.js:152687
ngZone.onError.subscribe.next main.js:5053
schedulerFn main.js:4127
SafeSubscriber.__tryOrUnsub main.js:15944
SafeSubscriber.next main.js:15893
Subscriber._next main.js:15835
Subscriber.next main.js:15799
Subject.next main.js:25257
EventEmitter.emit main.js:4113
NgZone.triggerError main.js:4484
inner.inner.fork.onHandleError main.js:4445
t.handleError polyfills.js:3
n.runTask polyfills.js:3
invoke

Edit: split the first console apart

13

OK I tried it without using string interpolation and it gave me the same issue, but the code gave both syntax errors after the response

14

You seem to be ignoring errors:

this.http.get(`${url}/my-page-2`, headerOptions)
  .subscribe((rsp) => {
    console.log('win ' + JSON.stringify(rsp));
  }, (err) => {
    console.log('lose ' + JSON.stringify(err));
  });
15 
successResponse with status: 200 OK for URL: https://0p*******23.execute-api.us-west-1.amazonaws.com/prod/specials

ERROR TypeError {} main.js:1364
defaultErrorLogger main.js:1364
ErrorHandler.handleError main.js:1424
IonicErrorHandler.handleError main.js:152689
ngZone.onError.subscribe.next main.js:5053
schedulerFn main.js:4127
SafeSubscriber.__tryOrUnsub main.js:15944
SafeSubscriber.next main.js:15893
Subscriber._next main.js:15835
Subscriber.next main.js:15799
Subject.next main.js:25257
EventEmitter.emit main.js:4113
NgZone.triggerError main.js:4484
inner.inner.fork.onHandleError main.js:4445
t.handleError polyfills.js:3
n.runTask polyfills.js:3
invoke

services successResponse with status: 200 OK for URL: https://0p*****m23.execute-api.us-west-1.amazonaws.com/prod/services

^ Without JSON.stringify

With gives the correct json data from both server resources, still with the TypeError. All as you can see are success messages. Maybe for some reason the map function is breaking everything?

16

I’m not seeing the response bodies, or anything that looks like it would be triggering a JSON parse error. What is actually going over the wire?

17

Here’s the json.stringify stuff:

success{"_body":"{\n    \"specials\": [\n         {\n            \"id\": \"8fab1fc0-aad6-4200-8397-378b8a1c02b5\",\n            \"image\":\"http://bit.ly/2o*****\",\n            \"link_id\":\"oil-change\",\n            \"title\":\"Need a tune up? Check out our Oil and Lube shop.\"\n        },     {\n            \"id\": \"525ad0a2-8476-424e-917a-0d2151f0619e\",\n            \"image\":\"http://bit.ly/***VHjA\",\n            \"link_id\":\"full-service-carwash\",\n            \"title\":\"Have a look at our featured car wash services!\"\n        },     {\n            \"id\": \"f4878ae3-8c52-4f09-b737-b85377b254da\",\n            \"image\":\"http://bit.ly/2o***P7\",\n            \"link_id\":\"exterior-detail\",\n            \"title\":\"Dirty car? Try one of our details!\"\n        }        ]\n}","status":200,"ok":true,"statusText":"OK","headers":{"Date":["Mon"," 24 Apr 2017 16:11:50 GMT"],"Via":["1.1 ea961b1c949*****effbb14a32ffee07.cloudfront.net (CloudFront)"],"x-amzn-RequestId":["b989ea6a-2908-11e7-9a3b-e**880cc0a11"],"X-Amzn-Trace-Id":["Root=1-58fe23c6-12185***9a1b0e33a3ab390f"],"X-Cache":["Miss from cloudfront"],"Content-Type":["application/json"],"Access-Control-Allow-Origin":["*"],"Connection":["keep-alive"],"Content-Length":["714"],"X-Amz-Cf-Id":["sb5AdXHnLrfYJr***4T4FF86Q2-W7m2d5O8kLm1195jYdjZv***EJw=="]},"type":2,"url":"https://**********.execute-api.us-west-1.amazonaws.com/prod/specials"}


services success{"_body":"{\n    \"services\": [\n         {\n            \"id\": \"7ea9661d-b4e1-4dd9-8698-6333ba6658ab\",\n            \"category\": \"fs-unlimited\",\n            \"order\":\"2\",\n            \"html\":\"<p> - Unlimited Supreme car washes for one low monthly price!</p><p> - <a href=\"http://www.cobblestone.com/services/car-wash/full-service/\">Link</a></p>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/unlimited-wash-plans/******/Supreme+Unlimited+Plan.jpg\"\n        },     {\n            \"id\": \"03b61e84-4582-422c-aa16-bab932389cf5\",\n            \"category\": \"fs-plans\",\n            \"order\":\"2\",\n            \"html\":\"<p> - Wash as much as you like for a one-time fee for the duration of your plan</p><p> - <a href=\"http://www.cobblestone.com/services/car-wash/full-service/\">Link</a></p><table width=\"100%\"><tr><td>3 Mo</td><td>$89.97</td></tr><tr><td>6 Mo</td><td>$179.94</td></tr><tr><td>12 Mo</td><td>$359.88</td></tr></table>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/club-plans/******/supreme+club+plan.jpg\"\n        },     {\n            \"id\": \"9d530792-fc10-4753-ba55-46b0f31743f1\",\n            \"category\": \"fs-unlimited\",\n            \"order\":\"1\",\n            \"html\":\"<p> - Unlimited Works car washes for one low monthly price!</p><p> - <a href=\"http://www.cobblestone.com/services/car-wash/full-service/\">Link</a></p>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/unlimited-wash-plans/******/Works+unlimited+plan.jpg\"\n        },     {\n            \"id\": \"b4ab589f-8838-4872-bf39-0842f7e15b01\",\n            \"category\": \"full-service-carwash\",\n            \"order\":\"4\",\n            \"html\":\"<p> - Wheel Cleaner</p><p> - Tire Dressing</p><p> - Free Air Freshener</p>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/full-service-carwash/******/08+supreme+wash.jpg\"\n        },     {\n            \"id\": \"3b674106-7855-4c56-b92c-6a0e78a5b031\",\n            \"category\": \"ex-unlimited\",\n            \"order\":\"2\",\n            \"html\":\"<p> - Unlimited Basic+ Express car washes for one low monthly price!</p><p> - No Tire Shine Option Available</p><p> - <a href=\"http://www.cobblestone.com/services/car-wash/express-exterior/\">Link</a></p>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/******/07+basic+express+unlimited+plan.jpg\"\n        },     {\n            \"id\": \"6832ecce-1fe8-4b1b-85a7-fd3068a69b81\",\n            \"category\": \"exterior-detail\",\n            \"order\":\"2\",\n            \"html\":\"<p> - Protects up to 6 months</p><p> - Uses natural Carnauba wax to create a durable layer of protection with a glossy finish.</p>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/******/carnuaba+wax.jpg\"\n        },     {\n            \"id\": \"8e31311f-84ad-4a19-b4b6-29162210a612\",\n            \"category\": \"ex-plans\",\n            \"order\":\"1\",\n            \"html\":\"<p> - Unlimited Quicky's Special car washes for one low monthly price!</p><p> - <a href=\"http://www.cobblestone.com/services/car-wash/express-exterior/\">Link</a></p><table width=\"100%\"><tr><td>12 Mo</td><td>$239.88</td></tr><tr><td>6 Mo</td><td>$119.94</td></tr><tr><td>3 Mo</td><td>$59.97</td></tr></table>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/club-plans/******/quickys+special+unlimited+plan.jpg\"\n        },     {\n            \"id\": \"500a352a-68a8-4a07-a4d3-a525f118dadd\",\n            \"category\": \"exterior-detail\",\n            \"order\":\"1\",\n            \"html\":\"<p> - Protects up to 6 months</p><p> - A multi-step process that removes light to medium contamination, blemishes & oxidation.</p><p> - Provides a glossy paint finish protection</p>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/exterior-detail/wax+and+polish.jpg\"\n        },     {\n            \"id\": \"9639a7e8-f984-4f73-bfd3-4106299f21a1\",\n            \"category\": \"interior-detail\",\n            \"order\":\"2\",\n            \"html\":\"<p> - Cleans and conditions vinyl &amp; leather components on door panels, dashboard and console areas.</p>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/interior-detail/dash+door+console.jpg\"\n        },     {\n            \"id\": \"1690ced6-d935-4cce-a93e-3859893616de\",\n            \"category\": \"fs-plans\",\n            \"order\":\"1\",\n            \"html\":\"<p> - Wash as much as you like for a one-time fee for the duration of your plan</p><p> - <a href=\"http://www.cobblestone.com/services/car-wash/full-service/\">Link</a></p><table width=\"100%\"><tr><td>3 Mo</td><td>$119.97</td></tr><tr><td>6 Mo</td><td>$239.94</td></tr><tr><td>12 Mo</td><td>$479.88</td></tr></table>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/club-plans/3_30_17/works+club+plan.jpg\"\n        },     {\n            \"id\": \"0fb6c098-8d7c-48f0-936c-2d099af7ab76\",\n            \"category\": \"oil-change\",\n            \"order\":\"2\",\n            \"html\":\"<p> - Superior engine performance and fuel efficiency with unsurpassed protection against engine wear.</p>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/oil-change/3_30_17/premium+synthetic+oil+change.jpg\"\n        },     {\n            \"id\": \"e759eb38-5ab3-431e-b9dd-26c2eded202b\",\n            \"category\": \"ex-plans\",\n            \"order\":\"2\",\n            \"html\":\"<p> - Unlimited Basic+ Express car washes for one low monthly price!</p><p> - <a href=\"http://www.cobblestone.com/services/car-wash/express-exterior/\">Link</a></p><table width=\"100%\"><tr><td>12 Mo</td><td>$191.88</td></tr><tr><td>6 Mo</td><td>$95.94</td></tr><tr><td>3 Mo</td><td>$47.97</td></tr></table>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/club-plans/3_30_17/07+basic+express+unlimited+plan.jpg\"\n        },     {\n            \"id\": \"42321d5f-65d7-44c3-bc5f-60be2c41fc46\",\n            \"category\": \"interior-detail\",\n            \"order\":\"4\",\n            \"html\":\"<p> - Cleans and conditions leather seats using premier conditioner, leaves a professional finish. No oily look.</p>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/interior-detail/leather+treatment.jpg\"\n        },     {\n            \"id\": \"02632ae9-a893-4328-82f9-56f70d704664\",\n            \"category\": \"lube-add-ons\",\n            \"order\":\"1\",\n            \"html\":\"<p> - Change Engine Oil</p><p> - Install New Oil Filter</p><p> - Lubricate Chassis</p><p> - Check & Fill Rear Differential Fluid</p><p> - Check & Fill Transaxle Fluid</p><p> - Check Wiper Blades</p><p> - Check Cabin Air Filter</p><p> - Check Air Filter</p><p> - Check PCV Valve</p><p> - Check Belts</p><p> - Check the Battery</p><p> - Check & Fill Windshield Washer Fluid</p><p> - Inflate Front Tires to Proper Pressure</p><p> - Inflate Rear Tires to Proper Pressure</p><p> - Check & Fill Transfer Case Fluid</p><p> - Check & Fill Front Differential Fluid</p><p> - Check Engine Coolant</p><p> - Check & Fill Power Steering Fluid</p>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/oil-change/11-18point+inspection.jpg\"\n        },     {\n            \"id\": \"98620854-4105-4bf9-b25d-ae0815f56877\",\n            \"category\": \"full-service-carwash\",\n            \"order\":\"2\",\n            \"html\":\"<p> - 30 Day Wax Protection</p><p> - Rain-Away Surface & Glass Protection</p><p> - Triple Foam Conditioner</p><p> - Tire Dressing</p><p> - Free Air Freshener</p><p> - 7 Day Clean Car Guaraantee</p><p> - Includes Works Car Wash Features</p>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/full-service-carwash/3_30_17/01+ultimate+wash.jpg\"\n        },     {\n            \"id\": \"3dae0c98-c53d-40f2-8451-867a7da2d5e4\",\n            \"category\": \"ex-unlimited\",\n            \"order\":\"1\",\n            \"html\":\"<p> - Unlimited Quicky's Special car washes for one low monthly price!</p><p> - No Tire Shine Option Available</p><p> - <a href=\"http://www.cobblestone.com/services/car-wash/express-exterior/\">Link</a></p>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/unlimited-wash-plans/quickys+special+unlimited+plan.jpg\"\n        },     {\n            \"id\": \"315b4e89-cabb-4e66-8cd2-0ea54d63fde7\",\n            \"category\": \"lube-add-ons\",\n            \"order\":\"0\",\n            \"html\":\"<p> - Includes up to 5 qts of refined quality motor oil, oil filter, and our 18 point preventative maintenance inspection.</p>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/oil-change/green+quick+lube.jpg\"\n        },     {\n            \"id\": \"32f2e3cd-0dfa-4cd2-98c1-91e6ffa8e373\",\n            \"category\": \"express-exterior\",\n            \"order\":\"2\",\n            \"html\":\"<p> - Quality Cleaner - Wash, Rinse & Dry</p><p> - Wheel Cleaner & Wheel Brite</p>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/express-exterior/09+basic+express.jpg\"\n        },     {\n            \"id\": \"3ed54ff3-30f9-4001-b4de-d96e2e480a73\",\n            \"category\": \"interior-detail\",\n            \"order\":\"3\",\n            \"html\":\"<p> - Removes most stains</p><p> - Includes floor mats</p><p> - Pre-Spot all stains, thorough shampoo</p>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/interior-detail/carpet+shampoo.jpg\"\n        },     {\n            \"id\": \"afe05d1d-d2f4-45cb-9974-50b7ad95eb3b\",\n            \"category\": \"ex-unlimited\",\n            \"order\":\"0\",\n            \"html\":\"<p> - Unlimited Hot Wax Express car washes for one low monthly price!</p><p> - No Tire Shine Option Available</p><p> - <a href=\"http://www.cobblestone.com/services/car-wash/express-exterior/\">Link</a></p>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/unlimited-wash-plans/hot+wax+express+unlimited+plan.jpg\"\n        },     {\n            \"id\": \"56530dd8-82e7-4b5b-8164-8c39bb614f83\",\n            \"category\": \"full-service-carwash\",\n            \"order\":\"0\",\n            \"html\":\"<p> - Hand Applied, Hand Finished Synthetic Spray Wax</p><p> - Interior Conditioner</p><p> - Clean Car Guarantee</p><p> - Includes Ultimate Plus+ Car Wash</p>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/full-service-carwash/3_30_17/12+diamond+touch+wash.jpg\"\n        },     {\n            \"id\": \"172d8819-2f4a-47b5-8907-7a558cd0b4d3\",\n            \"category\": \"express-exterior\",\n            \"order\":\"0\",\n            \"html\":\"<p> - 30 Day Wax Protection</p><p> - Includes Quicky's Special Car Wash Features</p>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/express-exterior/hot+wax+express.jpg\"\n        },     {\n            \"id\": \"24add067-73f2-4c3d-bc98-36ae4aa4f283\",\n            \"category\": \"full-service-carwash\",\n            \"order\":\"5\",\n            \"html\":\"<p> - Interior Vacuum</p><p> - Clean Windows</p><p> - Dust Dash & Console</p><p> - Soft Cloth Wash</p><p> - Hand Towel Dry</p>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/full-service-carwash/3_30_17/04+basic+wash.jpg\"\n        },     {\n            \"id\": \"06752354-7f8a-4495-9fe0-346740b98944\",\n            \"category\": \"fs-plans\",\n            \"order\":\"0\",\n            \"html\":\"<p> - Wash as much as you like for a one-time fee for the duration of your plan</p><p> - <a href=\"http://www.cobblestone.com/services/car-wash/full-service/\">Link</a></p><table width=\"100%\"><tr><td>3 Mo</td><td>$149.97</td></tr><tr><td>6 Mo</td><td>$299.94</td></tr><tr><td>12 Mo</td><td>$599.88</td></tr></table>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/club-plans/3_30_17/ultimate+club+plan.jpg\"\n        },     {\n            \"id\": \"4347ec02-f86e-402d-b4c9-dcea182e151f\",\n            \"category\": \"interior-detail\",\n            \"order\":\"0\",\n            \"html\":\"<p> - Complete interior cleaning</p><p> - Includes three of the services below</p>\",\n            \"image\":\"https://s3-us-west-1.amazonaws.com/cobblestone-carwash/interior-detail/02+Complete+interior+detail.jpg\"\n        }        ]\n}","status":200,"ok":true,"statusText":"OK","headers":{"Date":["Mon"," 24 Apr 2017 16:11:50 GMT"],"Via":["1.1 9f24b18d030ce2b8185b958a523beb8a.cloudfront.net (CloudFront)"],"x-amzn-RequestId":["b98a8701-2908-11e7-8699-cd7b40baabf1"],"X-Amzn-Trace-Id":["Root=1-58fe23c6-f3a8ca0186c2af590845656d"],"X-Cache":["Miss from cloudfront"],"Content-Type":["application/json"],"Access-Control-Allow-Origin":["*"],"Connection":["keep-alive"],"Content-Length":["12015"],"X-Amz-Cf-Id":["MpI9GiN1KQA4ncC45Rl90uDZmThATgkhHljfHAtVcIbm1L4-lnvCvg=="]},"type":2,"url":"https://**********.execute-api.us-west-1.amazonaws.com/prod/services"}
18

The cloudfront cache line is interesting. I wonder if sometimes the response is hitting the cache, and perhaps cloudfront is sending something unusual in that case. Can you try seeing if you can inspect a problematic response in the Network tab? The URL should show up in red. This SO thread mentions gzipping causing a similar error, but I would expect Angular’s Http to take care of that, so I’m skeptical that that’s your issue, but it does seem to be intermittent.

19

Dingdingding, this triggered a memory in me:
I had a error with randomly inserted characters in API responses with a Node.js API some time ago on some specific hosts. I never figured out what really caused it, but luckily it never showed up on production. Debugging this was obviously a pain until I found this random char in the response by chance.

So yes, getting the response body of a “problematic” response would be best, but note that it doesn’t have to be red in the network tab at all but only parsing fails.

1 Like
20

I did some things to it and now I’m seeing something interesting. With the second call it’s giving me "Response ", and surprise surprise I get a syntax error unexpected token R. Is there a way to overcome the “Response” at the beginning of it?

Edit: for some reason .map(res => res.json();) works just fine for the first call but not for the second. Is it something wonky with rxjs map function?