Unable to see full log of long data

[thisisgit]

🐛 Bug Report

Flipper only logs limited number of lines even after > and n more is pressed.
I tried logging array with length of 200, but it only shows maximum of 161.

(also have no idea why it's saying 618 more)

I'm expecting to see another > and n more button if there're more lines to show.

To Reproduce

Run:

const testArray: number[] = [...Array(200)].map((_, index: number) => index);
console.log(testArray);

Environment

Flipper: 0.137.0
iOS: 15.2
Android: haven't tested

[thisisgit]

Hi @passy, this issue extends #3476

[passy]

Which environment is this in? Is this a React Native app?

Could you please share a full screenshot (blur our potentially confidential areas please)? It's very hard to figure out the context of this.

[thisisgit]

@passy Yeah, in RN app.
And I just realized that there're two Logs tab in Flipper when running RN app:

1. in Device section
2. in React Native section

And I'm seeing the issue "only" in Device section. Sorry for checking this late. I've been playing around with Flipper for months but it's just now that I realized there're two Logs tab.

Here's the screen record as per your request: (tested with array length of 500)

1.mov

[thisisgit]

After posting above comment, I noticed and 618 more button doesn't do anything unlike the first post, where it should show "little more" lines.

So I created fresh RN project, tested there, and was able to reproduce the first issue:

3.mp4

The only difference between this and above record is the version of RN, above is 0.66.4 and this one is 0.67.3.

[passy]

I reached out to a colleague and there are probably two things happen: We have a message limit inherent in our protocol. That dictates the maximum length. We could theoretically do some chunked transfer but someone would need to build this. The other expanding issue you're seeing could likely happen due to the screen virtualisation that we use when you go far beyond the screen viewport.

One workaround for these long messages could be using the Hermes Debugger which uses a lazy, pull-based protocol which should support longer messages.

[thisisgit]

So I tried Hermes Debugger after enabling Hermes in my RN app and I see another issue here.
Array with a length larger than 100 won't expand in the console:

4c.mp4

Where it prints like this in Chrome's console:

It isn't really critical since Logs in React Native section prints the log well. It is just that it is confusing to see two Logs tabs. For people like me coming to see the Logs tab to check the result of console.log() that is hardly readable in terminal, those two tabs look like they are doing the same thing. But in the context of this issue, console.log() behaves differently and adds more confusion.

I actually still don't know the difference/different use case of those two tabs. If there's no specific reason why they should exist at the same time, I think eliminating the one in Device section would remove the confusion and solve the issue.

[mweststrate]

The logs plugin is basically the stdout/stderr or your application, a single direction stream that shows everything you dump into it, nothing more, nothing less, just a bunch of characters. It doesn't know about objects, arrays, or JavaScript at all for that matter.

The hermes debugger is a tool that connects to the JavaScript engine itself, and is hence not technology agnostic. So it won't capture any info coming from the native world for example. But since it is a specialised bidirectional protocol, it can do things as expanding objects as long as they are kept in the JS memory of the client. Note that this is just a boxed chrome developers tool, so we don't really influence its behavior. That your object doesn't further expand might mean that is already garbage collected for example, by the time you expand it. Or it has been shortened in the mean time. Etc.

[arled]

This is so bad lol

[waqarAllshore]

Any update?