Output missing from console (Maximum call stack size exceeded)

[gohai]

p5.js version

1.11.5

What is your operating system?

Mac OS

Web browser and version

Chrome 135.0.7049.96

Actual Behavior

Calling print() or console.log() on a range of objects is silently failing, in that they aren't printed onto the p5 web editor's console, but still show up in the browser's native console (together with the "Maximum call stack size exceeded" message).

This is my number #1 issue in using the web editor in an educational setting presently. I am not sure if my reproducer sketch below has a circular data structure or not, which is why I am opening this separate issue.

Expected Behavior

print() or console.log() should always output to the console, so that the program flow can be observed using it.

Steps to reproduce

Steps:

1. Run the below snippet in the p5.js web editor.

Snippet:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

function mousePressed() {
  console.log(select("canvas"));
}

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[Jatin24062005]

Hey @gohai, thank you so much for opening this issue!

This behavior is indeed caused by how the p5.js Web Editor handles console output internally:

In the browser's native DevTools console, console.log() can gracefully handle circular references.
However, in the p5.js Web Editor's console, it likely uses JSON.stringify() or a similar serializer that fails when it encounters circular structures—resulting in a "Maximum call stack size exceeded" error and no visible output.

That said, a similar issue has already been reported in #3178 , and I’ve submitted a fix via [pull request #3424 ] It’s currently pending review.

Thanks again for bringing attention to this—it's a critical issue, especially in educational settings.

[dipamsen]

I am not sure if my reproducer sketch below has a circular data structure or not, which is why I am opening this separate issue.

Just for information, here's why the error occurs in this case:

console.log(select("canvas"))

The p5.js select function returns a p5.Element object. Indeed, a p5.Element object contains circular references, which is why the error occurs.

Where is the circular reference? It is actually in the (private) _pInst field of the object. All p5 custom class instances (eg. p5.Image, p5.Element, p5.Graphics, etc). have a _pInst field which holds a reference to the current p5.js instance, so that it can access normal p5 functions on the current p5 instance. The p5 instance itself contains a number of fields, one of them is _renderer which holds the p5.Renderer2D instance which renders stuff onto the canvas. However, it again contains a reference to the p5 instance, thus the circular reference.

elt._pInst._renderer._pInst._render...

[gohai]

Thank you for kindly explaining this to me, @dipamsen.

Since even common objects that users may encounter in p5, such as p5.Element, contain circular references, I hope this issue can be addressed soon. Users will routinely attempt to use console.log() to learn about the properties inside those objects - and when there is no output to the web editor's console at all, one mistakenly believes that the code that should generate the log output isn't being called...

[dipamsen]

Completely agree. There's a temporary fix in #3424 which will show a reasonable output.

[Jatin24062005]

@raclim You may consider closing this issue, as it is similar to Issue #3178, which has already been addressed. Since my Pull Request #3424 has been merged, this issue should now be resolved.