Cannot console.log objects having circular references

[dipamsen]

p5.js version

1.9.4

What is your operating system?

Windows

Web browser and version

Chrome 126.0.6478.127

Actual Behavior

Printing a p5.Image object breaks the console.

Expected Behavior

p5.Image should be printable.

Steps to reproduce

Steps:

1. Copy the following code in a sketch
2. Running the code prints nothing on the console
3. Commenting out the third line prints "Hi".

Snippet:

let img = createImage(20, 20);
console.log("Hi");
console.log(img);

[dipamsen]

More information: The source of this issue seems to be that recursive data structures cannot be logged in the console. (This limitation is not present in the latest version of console-feed)

Example:

let obj = {};
obj.a = obj;
console.log(obj); // breaks console, "maximum call stack exceeded"

Other objects which have a recursive structure and thus break the console:

• All custom p5 class instances, as they have a obj._pInst.renderer._pInst. ... recursive definition
• Window / globalThis
• Any object/class instance which stores one of the above in a field

[raclim]

Thanks for raising this and looking into it!

[geekaryan]

@dipamsen hello there, i just looked into this issue. I am trying to understand it more in depth to came out with a solution. I want to know what expected behavior we want when we encounter this type of circular loop data structure ? What output should be logged out so user know he has done a mistake.

[dipamsen]

@geekaryan I dont think it should be interpreted as a mistake. The library which is being used to render the "console" on the web editor (console-feed) is perfectly capable of logging such objects. (All major browsers also of course support logging of these objects).

The error we are hitting seems to be from immer/redux (?) which is unable to serialise these infinitely recursive objects. (not sure if this is correct).

[geekaryan]

@dipamsen got your point let me try to run this locally on my system and try to regenerate this issue. Thank you

[jht9629-nyu]

Similar failure trying to display image variables in the console entry area from this sketch:
https://editor.p5js.org/jht9629-nyu/sketches/N1xP0mzu-
Enter img1 in the console entry area and you get this error in the browser console:
Uncaught RangeError: Maximum call stack size exceeded
at immer.esm.mjs:1:912
at Array.forEach ()
at ht (immer.esm.mjs:1:904)
at Bt (immer.esm.mjs:1:2716)
at It (immer.esm.mjs:1:3259)
at immer.esm.mjs:1:2742
at immer.esm.mjs:1:948
at Array.forEach ()
at ht (immer.esm.mjs:1:904)
at Bt (immer.esm.mjs:1:2716

[adwaitanand]

Hi @dipamsen I have been working on this issue for the past few days i have attached a screenshot

please let me know is this the expected behavior

[dipamsen]

@adwaitanand Thats pretty good, however I am pretty sure earlier it was possible to actually print circular structures in the p5 console, i.e. you could infinitely click the _pixelsState property which would render the recursive subtree incrementally. This feature is indeed supported by console-feed.

As I understand it, the problem is in serialisation/deserialisation, so if it is not possible to recover the object in its entirity, then perhaps this is the next best option. I'll leave it to the project maintainers to decide.

[adwaitanand]

Thank you @dipamsen . Initially, I attempted to resolve the issue by allowing infinite clicks on the _pixelsState property, but I kept encountering the error: "Immer forbids circular reference." This led me to replace the circular reference object with a string.

However, I’ll explore whether it’s possible to render the circular reference object directly in the console feed.