Arrays and objects are shown as string

🐛 Bug Report

Hi, I’m starting to use Flipper in my React Native project. When I log an object like:

{
    "glossary": {
        "title": "example glossary",
		"GlossDiv": {
            "title": "S",
			"GlossList": {
                "GlossEntry": {
                    "ID": "SGML",
					"SortAs": "SGML",
					"GlossTerm": "Standard Generalized Markup Language",
					"Acronym": "SGML",
					"Abbrev": "ISO 8879:1986",
					"GlossDef": {
                        "para": "A meta-markup language, used to create markup languages such as DocBook.",
						"GlossSeeAlso": ["GML", "XML"]
                    },
					"GlossSee": "markup"
                }
            }
        }
    }
}

It’s shown as a string.

I don’t want to use debugger in my browser but browser shows it as which is very usefull for nested objects. Will you planning this feature ?

Environment

[mweststrate]

Yes, we intend to support better object representations like that partially in the future, although it will probably not give the same experience, because the browser connects to the living objects, and can evaluate them lazily when they are being expanded and show the underlying part, while the Flipper integration has to serialize them (the log connection is unidirectional at this moment), but an serialized can grow unbounded large.

A simple solution might be to use console.log(JSON.stringify(object, null, 2)). Whether that works depends on the serializability of your object.

[mweststrate]

JSON is now formatted in the logs plugin, but beyond that no improvements like lazily expanding objects and such are planned.