Attempting to stringify large variable results in an error log

[ksen0]

p5.js version

dev-2.0 branch

What is your operating system?

None

Web browser and version

Chrome

Actual Behavior

Because of an attempt to stringify a large variable, error is logged in browser.

Expected Behavior

Do not try to stringify objects that are [expected to be] excessively large

Steps to reproduce

Observed in: https://github.com/processing/p5.js/pull/7693

Notes from the above thread:

"that's a p5 web editor bug, it's trying to stringify the whole font including parsed font data, which is too large of an array."

"that would be great thanks! we may want to just add a special case there for p5.Font to ignore some propertiesI feel like we had similar issues in the past with vectors having a reference in them to the p5 instance"

[lirenjie95]

Hi @ksen0 and @dhowe, I'm trying to debug this error, below is what I did to reproduce it:

1. open the demo https://editor.p5js.org/davepagurek/sketches/9MJzIBMBW
2. remove the line debugger, add one line after the let font = await loadFont('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap', { sets: 'latin' }) to print the font console.log(font)
3. click the ▶️ button
4. wait......
5. the issue shows as above

In addition, I checked the repo and plan to add check for p5.Font at those two files, please correct me if I missed any other place:

1. https://github.com/processing/p5.js-web-editor/blob/develop/client/utils/previewEntry.js
2. https://github.com/processing/p5.js-web-editor/blob/develop/client/modules/IDE/hooks/useHandleMessageEvent.js

[dipamsen]

Expected Behavior

Do not try to stringify objects that are [expected to be] excessively large

If I understand this issue correctly, this issue is occurs only when logging the font object and not otherwise? In which case, I believe using local state to store the logs fixes this issue, since the 'stringify'ing takes place due to it being stored in a Redux state value (which uses Immer). Please correct me if I am wrong.

Relevant discussion: https://github.com/processing/p5.js-web-editor/issues/3178#issuecomment-2783194934

[lirenjie95]

Thank you all for providing new thoughts for this issue. I was a bit busy some time ago and didn't have time to update my previous PR and this issue. After my verification yesterday, the fix of #3424 has eliminated the error when the p5.Font type is printed by console.log(). This is because the problem in this issue is basically the same as #3178, and there is a circular reference in the object to be printed. @dipamsen As you mentioned in previous comment, I submitted a new PR #3499 to utilize the React context. @raclim I hope we can make that PR as a start point and then refactor all related code pieces.