【问题标题】：expo + react-native: There was a problem sending log messagesexpo + react-native：发送日志消息时出现问题
【发布时间】：2019-02-04 04:12:58
【问题描述】：

我正在构建一个我最近搬到 expo 的 react-native 应用程序。该应用程序似乎显示了预期的屏幕，但在它完成之前，我收到以下错误消息：console.error：“将日志消息发送到您的开发环境时出现问题，{“name”：“Error”}”。当我查看 expo 浏览器屏幕时，单击设备时会看到以下堆栈跟踪：

  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

这是错误的截图：

这个错误是什么意思？我找到了一些涉及删除 console.log 语句的文档，并删除了我拥有的那些但没有帮助。

【问题讨论】：

我今天也遇到了这个。您正在运行什么博览会版本？
“世博会”：“^32.0.0”
这里有同样的问题。我使用了 expo iOS 客户端并从 Metro bundler 扫描了二维码。在我想发送一个 console.log() 之后，我收到了这个错误。

标签： android node.js react-native expo

【解决方案1】：

这是因为 React 本地控制台记录器无法解析来自 Axios 的 JSON 对象。我可以保证任何遇到此错误的人都不会在将 JSON 对象记录到控制台之前对其进行解析。

会出现此错误的代码：

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

修复此错误的代码：

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

【讨论】：

即使我用 JSON.stringify 包装它，我仍然收到以下错误 JSON.stringify 无法序列化循环结构... signOut = async () => { console.log(JSON.字符串化（this.props））； NavigationService.navigate("Auth");等待 AsyncStorage.clear();等待 this.props.client.resetStore(); };如果不包装 JSON.stringify，我会收到警告“发送日志消息时出现问题......”有人有解决方案吗？急切地等待 Expo 解决这个控制台日志错误！！！
绝对的救星
谢谢！！！相反，在控制台中记录结果时出现 value.hasOwnProperty 错误。
谢谢，我从服务器获得了状态 500 并且正在显示！
谢谢，您的解决方案解决了我的问题

【解决方案2】：

我今天早上也遇到了这个奇怪的错误。我正在使用 Expo Client 为我正在使用流行的 MERN 堆栈（mongoDB、Express、React Native 和 Node.js）构建的应用程序开发 react native。我提到的是因为我使用了很多，我的意思是后端有很多控制台日志，到目前为止这并没有给我带来任何问题。因此，就我而言，我不确定此错误是否源自我使用的任何 console.log。

我在控制台（端口 19001）中检查了 expo 调试器的堆栈跟踪，因为红色屏幕没有提供关于错误来源的太多信息（很多 <unknown> 代替函数），我看到了当我执行与后端通信的特定操作时，它与我的操作函数和发送到减速器的有效负载有关。后端的响应格式如下：

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

..other stuff from the response..

上面没有太多需要注意的地方，但是这个：

我感兴趣的实际paylaod在prop键data下，这是我唯一需要的响应。但是，在我的无知中，我将所有东西都发送到了减速器。所以我要说的是，我发送了一个非常大的object 作为payload，而我只需要其中的一部分。因此，当我进行一些解构并保留上面提到的data 时，错误就消失了。

总之，对于可能偶然发现这个“错误”的其他人，这实际上并不是一个错误，因为应用程序不会崩溃或任何事情，因为当你执行一些操作时，你可以关闭窗口并继续应用程序从服务器获取，确保只保留 data 而不是整个 response 对象，以及来自调用的元数据。似乎redux-logger 抛出这个是因为它不喜欢它的结构。

【讨论】：

请不要use images for code, errors or textual data。将它们发布为 text，以便我们可以重复使用数据而无需重新输入所有内容，并且屏幕阅读器可以正确索引或阅读您的答案。
谢谢！只是确认这不是一个实际的错误是非常有帮助的！
有帮助，我试图记录整个响应对象，所以我只保留了数据并且它可以工作！

【解决方案3】：

我也遇到过这个问题，但由于其他原因。

背景：

项目堆栈（对错误最重要的部分）：

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

在这个项目中，我没有使用 react-redux 或 axios 我实际上使用 graphql 、 @apollo/react-hooks 和 apollo-boost 来处理网络请求和本地状态管理。

回答：

正如您在背景中看到的，我使用的是react-navigation。根据React Navigation API，我正在使用createDrawerNavigator 创建一个抽屉导航器

我想使用DrawerNavigatorConfig 的contentComponent 属性来创建自定义DrawerNavigatorItems。

我将匿名箭头函数放在contentComponent 属性中，唯一的参数是props。

这导致了错误：

我在上面提到的匿名箭头函数中放置了一个console.log()

我在 iOS 模拟器上收到错误消息： `console.error: "向您的开发环境发送日志消息时出现问题"

请参阅下面的代码：

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

【讨论】：

【解决方案4】：

为了简化上述所有答案，仅当您记录的对象太大而控制台无法显示时，才会出现此问题。因此，当记录来自 API 或服务器的响应时，请务必添加 JSON.stringify(result)。这为我解决了这个问题。

【讨论】：

【解决方案5】：

将 fetch 调用的结果转储到控制台时，我一直收到此错误，例如：console.log(result)。
我用过一次：

console.log(JSON.stringify(result))

问题消失了。

【讨论】：

【解决方案6】：

我今天遇到了同样的问题，解决方法是添加response.json()

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

【讨论】：

【解决方案7】：

这是console.log 带来的问题（在VSCode 中，Ctrl + Shift + F 搜索所有，然后键入console.log 以查找它的位置）。

转换自

console.log(error.config);

到

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

（null, 2 是为了保持打印效果）

【讨论】：

【解决方案8】：

发送到 console.log 的对象导致红屏。正如其他人指出的那样，您需要对所有对象进行字符串化。

对于那些没有时间在他们的应用程序中更新每个 console.log 的人，只需将 console.log 全局替换为一个新的函数名称（我们使用 global.ourLog），然后使用此代码查看每个如果是对象，则参数和字符串化。这个函数放在我们的 expo 应用的 App.js 的第一行。

// this routine corrects the red screen
// of death with expo logging
// by taking objects that are logged and ensuring
// they are converted to strings
global.ourLog = function() {
     let s = ''
     for ( let a of arguments ) {
        if ( typeof a === 'string') {
           s += a
        } else if ( typeof a === 'number') {
           s += a
        } else {
           s += JSON.stringify(a,null,2)
        }
        s += '\t'
     }
     console.log(s)
}

然后像任何其他 console.log 一样使用（或将每个 console.log 替换为该新函数名称）。

 global.ourLog( "a string", anObject, err)

希望这对某人有所帮助，它为我们节省了大量时间。

【讨论】：