Estoy creando una aplicación nativa de reacción que recientemente trasladé a la exposición. La aplicación parece mostrar la pantalla esperada, pero antes de que se complete, recibo el siguiente mensaje de error: console.error: “Hubo un problema al enviar mensajes de registro a su entorno de desarrollo, {“nombre”: “Error”}”. Cuando veo la pantalla del navegador de la exposición, veo el siguiente seguimiento de la pila cuando hago clic en el dispositivo:

  node_modules/expo/build/logs/LogSerialization.js:146:14 in _captureConsoleStackTrace
  node_modules/expo/build/logs/LogSerialization.js:41:24 in Object.serializeLogDataAsync$
  node_modules/regenerator-runtime/runtime.js:62:39 in tryCatch
  node_modules/regenerator-runtime/runtime.js:288:21 in Generator.invoke [as _invoke]
  node_modules/regenerator-runtime/runtime.js:114:20 in Generator.prototype.(anonymous
  node_modules/regenerator-runtime/runtime.js:62:39 in tryCatch
  node_modules/regenerator-runtime/runtime.js:152:19 in invoke
  node_modules/regenerator-runtime/runtime.js:187:10 in <unknown>
  node_modules/promise/setimmediate/core.js:45:4 in tryCallTwo
  node_modules/promise/setimmediate/core.js:200:12 in doResolve

Aquí hay una captura de pantalla del error:

¿Qué significa este error? Encontré un documento que se refería a la eliminación de las declaraciones de console.log y eliminé las que tenía, pero eso no ayudó.

Esto se debe al hecho de que el registrador de la consola nativa de React NO PUEDE analizar el objeto JSON proveniente de Axios. Puedo garantizar que cualquiera que tenga este error no está ANALIZANDO el objeto JSON antes de iniciar sesión en la consola.

CÓDIGO QUE DARÁ ESTE ERROR:

Axios.post(URL).then(function (response)
{
console.log("POST RESPONSE: "+response);
}

CÓDIGO QUE SOLUCIONA ESTE ERROR:

Axios.post(URL).then(function (response)
{
console.log("POST RESPONSE: "+JSON.stringify(response));
}

TL;DR

Este problema solo ocurre cuando registra un objeto que es demasiado grande para console.log función a mostrar. Por lo tanto, cuando registre la respuesta de una API o un servidor, asegúrese de desestructurarlo correctamente y solo conserve los datos que necesita.

Para cualquiera que desee una respuesta más detallada a este problema, siga leyendo.

Me encontré con este extraño error también esta mañana. Estoy desarrollando en React Native con Expo Client para una aplicación que estoy creando con la popular pila MERN (mongoDB, Express, React Native y Node.js). Menciono eso porque uso mucho, quiero decir MUCHOS registros de consola en el backend y esto no me causó ningún problema hasta ahora. Entonces, en mi caso, no estaba seguro de si este error se originó en algún console.log estaba usando

Revisé el stacktrace del expo debugger en la consola (en el puerto 19001), porque la pantalla roja no proporciona mucha información sobre el origen del error (mucha <unknown> en lugar de funciones) y vi que tenía algo que ver con las funciones de mis acciones y la carga útil que enviaba a mi reductor cuando realizaba una acción específica que se comunicaba con el backend. La respuesta del backend fue formateada así:

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

..other stuff from the response..

No hay mucho que notar arriba, pero esto:

El paylaod real en el que estaba interesado está debajo de la clave prop data y era lo único que necesitaba de la respuesta. PERO, en mi ignorancia le enviaba todo a mi reductor. Así que lo que estoy diciendo es que estaba enviando un gran object como payload y yo sólo necesitaba una parte de ella. Así que cuando hice un poco de desestructuración y mantuve el data que mencioné anteriormente, el error desapareció.

En conclusión, para otros que pueden tropezar con este “error” que en realidad no es un error, porque la aplicación no se bloquea ni nada, ya que puede cerrar la ventana y la aplicación continúa, cuando busca algo desde el servidor, asegúrese de mantener solo el data y no el todo response objeto, junto con el meta de la llamada. Parece que redux-logger arroja esto porque no le gusta su estructura.

Para simplificar todas las respuestas anteriores, este problema solo ocurre cuando registra un objeto que es demasiado grande para que la consola lo muestre. Entonces, cuando registre la respuesta de una API o servidor, asegúrese de agregar JSON.stringify (resultado). Esto resolvió el problema para mí.

También me he encontrado con este problema, pero debido a otras causas.

FONDO:

Pila de proyecto (solo lo que es importante para el error):

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

En este proyecto no estaba usando react-redux o axios en realidad estoy usando graphql , @apollo/react-hooks y apollo-boost para atender las solicitudes de la red y la gestión del estado local.

RESPUESTA:

Como puede ver en el FONDO, estoy usando react-navigation. Estaba creando un navegador de cajones con createDrawerNavigator de acuerdo con la Reaccionar API de navegación

Quería usar el contentComponent propiedad de la DrawerNavigatorConfig para crear personalizado DrawerNavigatorItems.

Pongo una función de flecha anónima en el contentComponent propiedad con el único argumento de props.

ESTO CAUSÓ EL ERROR:

coloqué un console.log() dentro de la función de flecha anónima que mencioné anteriormente

Recibí el error en mi simulador de iOS que decía: `console.error: “Hubo un problema al enviar mensajes de registro a su entorno de desarrollo”

Ver mi código a continuación:

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

Recibí este error constantemente cuando descargué el resultado de una llamada de búsqueda a la consola como: console.log(result).
Una vez usé:

console.log(JSON.stringify(result)) 

el problema se fue.

Tuve el mismo problema hoy y la solución fue agregar response.json()

              fetch(endpoint, {
                method: 'GET',
                headers: {
                  Accept: 'application/json',
                }
              })
                .then(response => response.json())
                .then(response => {
                  console.log('response', response)
                })

Este es el problema que viene con console.log (En Código VSC, Ctrl + Shift + F a busca todo luego escribe console.log para saber dónde está).

Convertir de

console.log(error.config);

a

console.log(JSON.stringify(error.config, null, 2));

(null, 2 es mantener la impresión bonita)