P5.js-web-editor: Page going blank upon hitting play

[cmorgantywls]

Nature of issue?

• [! ] Found a bug
• [ ] Existing feature enhancement
• [ ] New feature request

Details about the bug:

• Web browser and version: Chrome
• Operating System: Mac OS Sierra
• Steps to reproduce this:
  This has been happening across the board to about half of my students today. They have projects they've been working, that have been saved, and that have been running without errors. When they hit the play button, the entire page (not just the canvas - the entire page) turns white. It does not appear to be loading anything, it just whites out and they have to go back. We have tried clearing their cache, different browsers (Firefox, Safari), restarting, etc. Some students noted that if they logged out, a new program would run fine, but others logged out and had the same error occur.

Please help - they are working on a final project and losing a lot of class time.

Feature enhancement details:

New feature details:

[datramt]

I am having this issue as of today as well.
I can reproduce it every time if I run console.log(); even if I'm not logging anything.

[cmorgantywls]

Yeah, it doesn't seem to be affecting every student (it didn't happen at all in my account), but the ones that were having it said anytime they would change something it would send them to a completely blank page, and when they went back whatever they had changed would be deleted.

[datramt]

I think this should be tagged as high priority if possible.
Debugging from chrome, this is the error I get when the page goes blank:

vendor.0fd65169261efd1571a2.js:77 TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at app.77ab21bdb481ee42be0d.js:18
    at Array.map (<anonymous>)
    at t.value (app.77ab21bdb481ee42be0d.js:18)
    at u (vendor.0fd65169261efd1571a2.js:77)
    at beginWork (vendor.0fd65169261efd1571a2.js:77)
    at i (vendor.0fd65169261efd1571a2.js:77)
    at a (vendor.0fd65169261efd1571a2.js:77)
    at s (vendor.0fd65169261efd1571a2.js:77)
    at b (vendor.0fd65169261efd1571a2.js:77)
u @ vendor.0fd65169261efd1571a2.js:77
s @ vendor.0fd65169261efd1571a2.js:77
b @ vendor.0fd65169261efd1571a2.js:77
k @ vendor.0fd65169261efd1571a2.js:77
p @ vendor.0fd65169261efd1571a2.js:77
h @ vendor.0fd65169261efd1571a2.js:77
enqueueSetState @ vendor.0fd65169261efd1571a2.js:77
i.setState @ vendor.0fd65169261efd1571a2.js:72
c.onStateChange @ vendor.0fd65169261efd1571a2.js:58
notify @ vendor.0fd65169261efd1571a2.js:90
e.notifyNestedSubs @ vendor.0fd65169261efd1571a2.js:90
c.onStateChange @ vendor.0fd65169261efd1571a2.js:58
c @ vendor.0fd65169261efd1571a2.js:58
(anonymous) @ vendor.0fd65169261efd1571a2.js:58
(anonymous) @ vendor.0fd65169261efd1571a2.js:90
(anonymous) @ app.77ab21bdb481ee42be0d.js:1
postMessage (async)
(anonymous) @ VM71 about:srcdoc:45
setInterval (async)
(anonymous) @ VM71 about:srcdoc:43

[awolk]

I've encountered this issue on anything that logs to the console, so any sketch that uses WebGL or any error at all results in a blank page and the currently edited sketch is not saved.

[Pugio]

Same issue! All my students couldn't access their code today. Obviously there are no guarantees on alpha software, but just adding in my hope this can be fixed quickly. Thanks!

[catarak]

thanks for submitting this! i'm going to dig and see if i can reproduce. hopefully i'll have a fix for this soon!

[catarak]

figured out a fix for this & redeploying!

[catarak]

i think this is fixed now so i'm gonna close this. feel free to reopen if this comes up again!

[datramt]

AMAZING! There is no reason for any of us to expect you to fix a problem on a project that is in stage "alpha" in about two hours. Bravo and thank you @catarak We ought to know the risks relying on this editor, but I guess it's been so stable for at least the past 6 months that, for me, I've been using it as though it's already had its official public release. I know for a fact I am not alone either.
thanks! 💯 👍 🥇

[catarak]

i am working on making the editor more stable—and very, very open to help and input.

[inspiredlabs]

This isn't working:

• Web browser and version:
  
  
  
  • Chrome 74.0.3694.0 (Official Build) canary (64-bit)
  
  
  • FF 65.0.1 (64-bit)
  
  
• Operating System: MacOSX 10.13.4

Asynchronous data loading JSON example (https://editor.p5js.org/p5/sketches/BJnQVekQOX), borks on either browser above, displaying a blank page.

Both console read: Failed to load resource: the server responded with a status of 404 () & TypeError: e.data[0].indexOf is not a function.

Explicitly specifying the URL: https://p5js.org/assets/examples/assets/bubbles.json, hangs the Preview window, displaying Loading....

This embedded iframe example works: https://p5js.org/examples/advanced-data-load-saved-json.html

I found the editor after attempting this tutorial (which no longer works, because of CORS): https://www.youtube.com/watch?v=6mT3r8Qn1VY

It'd be great if you could update the Youtube tutorial to reflect that CORS isn't covered.

[catarak]

hi @inspiredlabs! i think the issue you're running into is that any of the examples that use external assets are broken, as reported by #820, #830. i'll get a fix in for this soon!