samdenty / console-feed

Captures console.log's into a React Component 🔥
https://stackblitz.com/~/github.com/samdenty/console-feed
MIT License
649 stars 106 forks source link

Add option to limit arrays and objects #105

Closed MikeAlOwe-CodeSignal closed 2 years ago

MikeAlOwe-CodeSignal commented 2 years ago

@samdenty There have been issues reported regarding the browser hanging when logging certain objects/arrays #87 #91. After some investigation it seems the size of the objects/arrays is the problem since console-feed had to iterate through everything to serialize it and the browser faced trouble when rendering them. I added an option to limit the size of the objects and arrays so that we only serialize the data to a certain point. I had to also make it transparent that the logged data was truncated and include in the serialized data how many remaining items there are and display the logged data correctly (like the array length). The implementation is a bit hacky since react-inspector doesn't support limiting and I had to do a few workarounds to render everything.

Example of setting the limit to 10:

Screen Shot 2022-06-17 at 16 42 52
MikeAlOwe-CodeSignal commented 2 years ago

Thank you for merging the PR @samdenty 🙌 Could you also please publish the package with this feature? Would love to move back from my fork!

samdenty commented 2 years ago

Published in 3.4.0 🚀