expo + react-native: There was a problem sending log messages

I have also ran into this issue but due to other causes.

BACKGROUND:

Project stack (Just what is important to the error) :

expo: ^34.0.1 react-native: SDK 34 react-navigation: 4.0.5 react-navigation-drawer: ^2.2.1

In this project I was not using react-redux or axios I'm actually using graphql , @apollo/react-hooks and apollo-boost to take care of network requests and local state management.

ANSWER:

As you can see in the BACKGROUND, I am using react-navigation. I was creating a drawer navigator with createDrawerNavigator according to the React Navigation API

I wanted to use the contentComponent property of the DrawerNavigatorConfig to create custom DrawerNavigatorItems.

I put and anonymous arrow function in the contentComponent property with the only argument of props.

THIS CAUSED THE ERROR:

I placed a console.log() inside the anonymous arrow function I mentioned above

I received the error on my iOS simulator that read: `console.error: "There was a problem sending log messages to your development environment"

See my code below:

import {createDrawerNavigator, DrawerNavigatorItems} from "react-navigation-drawer";
import ProfileNavigator from "../Profile/Profile";
import Colors from "../../constants/colors";
import {AsyncStorage, Button, SafeAreaView, View} from "react-native";
import React from "react";
import {Logout} from "../Common";
import HomeNavigator from "../Home/Home";

const AppDrawerNavigator = createDrawerNavigator(
    {
        Profile: ProfileNavigator
    },
    {
        contentOptions: {
            activeTintColor: Colors.primary
        },
        contentComponent: props => {
            console.log(props) // THIS IS THE ISSUE CAUSING THE ERROR!!!!!!
            return (
                <View style={{ flex: 1, paddingTop: 20 }}>
                    <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
                        <DrawerNavigatorItems {...props} />
                        <Button
                            title="Logout"
                            color={Colors.primary}
                            onPress={Logout}
                        />
                    </SafeAreaView>
                </View>
            )
        },
        drawerType: 'slide',
        unmountInactiveRoutes: true
    }
)

export default AppDrawerNavigator

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));
}

To simplify all the answers above, This issue only happens when you log an object which is too big for console to display. So when ever logging the response from an API or Server be sure to add JSON.stringify(result). This resolved the issue for me.

I ran into this weird error as well this morning. I am developing in react native with Expo Client for an app I'm building with the popular MERN stack (mongoDB, Express, React Native and Node.js). I am mentioning that because I use a lot, I mean A LOT of console logs in the backend and this didn't cause me any problem thus far. So in my case, I was not sure if this error originated from any console.log I was using.

I checked the expo debugger's stacktrace in the console (in port 19001), because the red screen doesn't provide much info on the origin of the error (a lot of <unknown> in place of functions) and I saw that it had something to do with my actions functions and the payload I was sending to my reducer when I performed a specific action that was communicating with the backend. The backend's response was formatted like this:

payload: {
  config: {
     .
     .
     .
 }
 data: { the only part that i needed... }
 headers: {
    .
    .
    .
}

..other stuff from the response..

There's not much to notice above, but this:

The actual paylaod I was interested in is under the prop key data and was the only thing I needed from the response. BUT, in my ignorance I was sending everything to my reducer. So what I am saying is that I was sending a really big object as payload and I only needed a part of it. So when I did some destructuring and kept the data that I mentioned above, the error went away.

In conclusion, for others that may stumble across this "error" which isn't actually an error, because the app doesn't crash or anything, since you can dismiss the window and the app goes on, when you do some fetching from the server, make sure you keep only the data and not the whole response object, along with the meta from the call. It seems that redux-logger throws this because it doesn't like the structure of it.