axios Problem sending console.log - console.error There was a problem sending log messages

[kouraf]

hello
I'm working with Expo React native, I'm trying to send request to an api and console log the response it's working perfectly with fetch but using axios
axios.get('https://rallycoding.herokuapp.com/api/music_albums') .then((response) => console.log(response));
i get this

here is my package.json
{ "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "eject": "expo eject" }, "dependencies": { "axios": "^0.14.0", "expo": "^32.0.0", "react": "16.5.0", "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz" }, "devDependencies": { "babel-preset-expo": "^5.0.0", "eslint-config-rallycoding": "^3.2.0" }, "private": true }

[dereknelson]

@kouraf this isn't an issue with expo - I believe this is either a babel issue or a react native issue, as it began happening with me since upgrading to babel 7. Not sure if you realized, but despite it being a red screen, you can just dismiss it and keep working.

Unfortunately the only way you can avoid this is to avoid console logging complex objects - it's annoying for me too (I use axios) but I haven't found any workarounds besides that :/

[AdamJNavarro]

Hey @kouraf,

As Derek mentioned this doesn't pertain to Expo so I'm going to close this issue. It might be best to explore the babel or react-native issues and see if others have noted the same issue.

Cheers,

Adam

[bwywb00]

@kouraf
Hello, kouraf.
I've been struggling with that problem for a few days, but I've not solved.
If you solved this problem, could you help me to get through this situation?

[ardyfeb]

Any solution ? I got same fucking issue

[Oscarz90]

guys I got the same issue, is there any solution for this problem or should I change axios with other library?? help please!!!

[fantypants]

For everyone having this issue, it's because you're trying to console log too much, as suggested above the only solution I found was to log the specific data you need i.e

response.data.selected_key,

outside of needing to see everything coming in, it kind of makes sense.

[dkperson]

Ok everyone, i just started using react native this year, but I have decided to help everyone out because i also had this stupid problem, and figured it out on my own, and decided to come back to post this.
This is due to the fact that the React native console logger CANNOT parse the JSON object coming from Axios.
I can guarantee that anyone who is having this error is not PARSING the JSON object before logging it to the console.

CODE THAT WILL GIVE THIS ERROR:
Axios.post(URL).then(function (response)
{
console.log("POST RESPONSE: " , response);
}

CODE THAT FIXES THIS ERROR:
Axios.post(URL).then(function (response)
{
console.log("POST RESPONSE: " , JSON.stringify(response));
}

[robbiemu]

@dkperson I'm not contradicting you, but just a note based on the followup code that you wrote: concatenating objects to strings never works.. that's not a react thing thats a javascript thing.

a = {x:1, y:2}
console.log(a)
console.log('a: ' + a)
console.log('a', a)


VM299:2 {x: 1, y: 2}
VM299:3 a: [object Object]
VM299:4 a {x: 1, y: 2}

this last form I believe is also supported in expo. Im not sure why it expects all console.logs to begin with a string

axios parses the JSON string into an object for you .. that's part of the convenience of axios. You might find that typically you just want response.data - as that is the body returned from the server (the rest details the response, with properties such as status).

ie

axios.post(url, payload).then(({data}) => {
  doSomethingWith(data)
  console.log('Post response body', data)
})

[dkperson]

@robbiemu Thanks for the interesting input. I'm aware of what you said, i actually use comma's in my code, i just wrote it like that because i'm so used to Javascript. Anyawy I agree that the Axios should do the JSON parse for you,
However in RARE cases that i have found it DOESN'T, and you will get the error above in those cases, it seems something to do with the JSON object it gets back cannot be converted by Axios sometimes, most of the time it is when you log the full response.

[Bug-Reaper]

I've only encountered this issue upon updating to expo 32, and it originates inside of the node_modules/expo path. Unless I'm missing something this seems to be caused directly by expo and not misuse of the console.log function

[Bug-Reaper]

This problem seems to originate from expo and not other dependencies, as indicated by the stack trace as well as the fact it is only present in expo 32 and not in previous versions @dereknelson

[brentvatne]

@Bug-Reaper - please create an issue with a minimal reproducible example :) https://stackoverflow.com/help/mcve

[anuragbhattacharjee]

Either use response.data or JSON.stringify(response). It's because in response there are other informations like "status", "headers", "config", "request", "responseURL". It makes it a big enough JSON obj to console log i guess. This is what I figured out to solve this problem.

[pgparitosh]

The result itself is huge in size and axios would not be able to send it to logging
Either you can stringify the result or console.log(res.data);

This would solve the issue.

[BillyFigueroa]

I want to add to this.

For me this message was happening because of redux-logger. I noticed when I commented out redux-logger this went away. My guess is whoever wrote redux logger is doing something that violates this "stringify" rule and it is having problems logging long objects

Someone else ran into this issue and fixed it by removing a specific type of logging from the logger
redux-logger-issue

[ananthprasad91]

console logging response.data worked for me.