Recursion error logging React children (with hooks)

[koenbok]

Thanks for the great library!

I seem to have ran into an eccentric recursion issue.

• Open https://codesandbox.io/s/qq1z439rjq
• Open web inspector and record timeline
• Enter some new items in high succession

You can quickly notice the page slowing down. When you inspect the log you get a result like this:

cc @CompuIves CodeSandbox has this too!

[samdenty]

Serializing logs with the current method is expensive, so when you call console.log, instead of sync blocking until the log has been dispatched, it delays it using setTimeout. Adding multiple todos, makes it block for longer.

Internally, replicator is currently used to serialize objects (so they can be transferred between DOM's), those stack frames are from within it.

The alternative way to handle recursion to use a two-way COM, which serializes objects as you expand them (the way chrome devtools does).

I haven't done this, as I've previously managed to get chrome devtools working embedded on a website using a mocked version of the devtools websocket API - giving you the real devtools, but I haven't put much time into that.

I don't currently have time to work on either, but pull requests are open

[samdenty]

You should be able to avoid the serializing / deserializing step, if the iframe is same-origin.

[koenbok]

In our own app (Framer) we get this error too, but there console-feed just lives in the same page (so no iframe like CodeSandbox). Any hints how we could avoid this error in that setup?

[samdenty]

console-feed/src/Hook/index.ts

Line 47 in 8cca0ef

const encoded = Encode(parsed) as Message

Encode function should be removed

[koenbok]

Would you be interested in a PR to make this an option? Or should we fork the library for our use case?

[samdenty]

@koenbok PR would be ideal, something like Hook(console, cb, encode = true)

[nvh]

@samdenty I just created a PR for this ^

[samdenty]

Available in 2.8.8

[koenbok]

Thanks!