android expo + react-native:发送日志消息时出现问题

af7jpaap  于 2023-05-12  发布在  Android
关注(0)|答案(8)|浏览(147)

我正在构建一个react-native应用程序,最近我将其转移到了expo。应用程序似乎显示预期的屏幕,但在完成之前,我收到以下错误消息:console.error:向开发环境发送日志消息时出现问题,{“name”:“错误”}"。当我查看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语句,并删除了我拥有的语句,但这并没有帮助。

9q78igpj

9q78igpj1#

这是由于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));
}
des4xlb0

des4xlb02#

TL;DR

只有当您记录的对象太大,console.log函数无法显示时,才会发生此问题。因此,当记录来自API或服务器的响应时,请确保正确地解构它,只保留您需要的数据。

对于任何想要更详细回答这个问题的人,请继续阅读

今天早上我也遇到了这个奇怪的错误。我正在使用Expo Client开发React Native,用于我使用流行的MERN堆栈(mongoDB、Express、React Native和Node.js)构建的应用程序。我提到的是,因为我使用了很多,我的意思是在后端很多控制台日志,这并没有给我造成任何问题,迄今为止。所以在我的例子中,我不确定这个错误是否源于我使用的任何console.log
我在控制台(端口19001)中检查了expo调试器的堆栈跟踪,因为红色屏幕没有提供关于错误来源的太多信息(大量的<unknown>代替了函数),我看到它与我的动作函数和我在执行与后端通信的特定动作时发送到reducer的有效负载有关。后端的响应格式如下:

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

..other stuff from the response..

上面没有太多要注意的,但是这个:
我感兴趣的实际paylaod是在 prop 键data下,是我从响应中唯一需要的东西。但是,在我的无知,我把一切都发送到我的减速器。所以我要说的是,我发送了一个非常大的object作为payload,我只需要它的一部分。因此,当我做了一些解构并保留了上面提到的data时,错误就消失了。
总之,对于其他可能偶然发现这个“错误”实际上不是错误的人,因为应用程序不会崩溃或任何东西,因为你可以关闭窗口,应用程序继续运行,当你从服务器上做一些抓取时,确保你只保留data而不是整个response对象,沿着调用的 meta。似乎redux-logger抛出它是因为它不喜欢它的结构。

dfddblmv

dfddblmv3#

为了简化上面的所有答案,只有当您记录的对象太大以至于控制台无法显示时才会发生此问题。因此,当记录来自API或服务器的响应时,一定要添加JSON.stringify(result)。这为我解决了这个问题。

bwitn5fc

bwitn5fc4#

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

背景:

项目堆栈(只是什么是重要的错误):
expo: ^34.0.1react-native: SDK 34react-navigation: 4.0.5react-navigation-drawer: ^2.2.1
在这个项目中,我没有使用react-reduxaxios,我实际上使用graphql@apollo/react-hooksapollo-boost来处理网络请求和本地状态管理。

回答:

正如您在背景中看到的,我使用的是react-navigation。我正在根据React Navigation API使用createDrawerNavigator创建抽屉导航器
我想使用DrawerNavigatorConfigcontentComponent属性创建自定义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
b91juud3

b91juud35#

我在将fetch调用的结果转储到console时一直得到这个错误,如下所示:console.log(result) .
我曾经使用过:

console.log(JSON.stringify(result))

问题就解决了。

ewm0tg9j

ewm0tg9j6#

我今天遇到了同样的问题,修复方法是添加response.json()

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

3pvhb19x7#

这就是console.log的问题(在VSCode中,Ctrl + Shift + Fsearch all 然后键入console.log查找它的位置)。
转换自

console.log(error.config);

console.log(JSON.stringify(error.config, null, 2));
  • null, 2是为了保持打印美观)*

zte4gxcn

zte4gxcn8#

发送到console.log的对象导致了红色屏幕。正如其他人指出,你需要字符串化所有对象。
对于那些没有时间更新应用中的每个console.log的用户,只需用一个新的函数名(我们使用global.ourLog)全局替换console.log,然后使用这段代码查看每个param和stringify对象。这个函数被放在我们的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)

希望这能帮助到别人,它节省了我们大量的时间。

相关问题