Missing Console Errors - File Not Found

[shiffman]

Starting over from #444, this github issue is to track error messages that show up in the native JS console, but not in the p5.js web editor console. To be clear, there are likely some error messages that should be hidden in the web editor console so this thread is also for discussion around these questions. This first issue contains a list of all the errors and subsequent comments will include specific code examples to trigger the missing error. Anyone should feel free to jump in and add to the comment thread and I'll keep the list below up to date!

• undefined values
• file not found errors with loadJSON(), loadImage(), etc.
• incorrect renderer, i.e. only available with webgl, etc.

Tagging @almchung as this relates to the Friendly Error System.

[shiffman]

Here's an example related to using an undefined string with text():

let txt;

function setup() { 
  createCanvas(400, 400);
  text(txt,100,100);
} 

JS console error: Cannot read property 'toString' of undefined

Another:

function setup() {
  let v;
  print(v);
}

Console should display: undefined

[shiffman]

Here's an example related to "file not found":

let img;

function preload() {
  img = loadImage('missingfile.png');	
}

function setup() {}

JS console error: GET http://alpha.editor.p5js.org//missingfile.png 404 (Not Found)

[shiffman]

Incorrect renderer:

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

function draw() { 
  background(220);
  rotateZ(100);
}

Error should read: Uncaught not supported in p2d. Please use webgl mode

[catarak]

this has mostly been fixed, except for the file not found error. not sure why that's not getting to the console!

[GaurangTandon]

Is #868 a duplicate of this issue?

[catarak]

yep! they are the same issue.

[shakeabi]

@catarak I was looking through how errors are captured and thought this might help.

[catarak]

@shakeabi maybe! we're using the console-feed library, so i'm not sure if that error handler needs to be added in addition to console-feed.

[w3cj]

Hey! I'm going to take a stab at the file not found issue. This is what I see happening in the editor:

Just want to clarify, would the fix be, instead of showing the Event object log, show the actual error message Failed to load resource: the server responded with a status of 404 ()?

[w3cj]

After a bit of debugging and research, I have determined that the Failed to load resource: or GET http://localhost:8000//missingfile.png 404 (Not Found) error might not be interceptable as it is occurring at the network level.

One option, is to detect the failed to load image error provided by p5, and inject / emulate an error to match the network error. We might do that here

Thoughts?

[tayadev]

Addition to @w3cj, currently we are using window.onerror to catch the error events. The 404 gets thrown from the image inside the iframe, then gets bubbled up to the window. In @w3cj's screenshot we also see the 404 message by the browsers network layer which, as far as i know is not interceptable and the other error with the Event object is the bubbled error event from the image. We could beautify this message or just remove it, because we already have the friendly error.

[catarak]

i think it would make sense to beautify the error, rather than remove it. if a user switches their sketch to not use friendly errors (for example, they switch to using the minified p5.js), it would be cool if some error still appeared.

[kjhollen]

I think this one is working now, so it should be ok to close? Let me know if you've seen otherwise @shiffman !

[shiffman]

Yes, the error does appear! The "Event" error referenced by @tayadev does also appear below the friendly one (or as @catarak mentioned if friendly errors are disabled). This I also see confuse students quite a bit b/c they assume something else is wrong with their sketch! Is this more of a p5 issue to throw a different error rather than a web editor one?

I'll also mention that I often use a very large font size with the editor while teaching but would prefer to have a smaller console font size. Would it make sense for me to open a "feature request" issue about separate font size settings for code and console? I will search to see if this has been discussed before!

[catarak]

Yes, the error does appear! The "Event" error referenced by @tayadev does also appear below the friendly one (or as @catarak mentioned if friendly errors are disabled). This I also see confuse students quite a bit b/c they assume something else is wrong with their sketch! Is this more of a p5 issue to throw a different error rather than a web editor one?

This is technically a p5.js Editor issue but I'm not sure how to fix it. Basically the issue is that a Promise is being rejected and not being caught, but there's not a way to globally catch all rejected Promises. Somehow browsers are able to do this with some magic that I can't figure out. I recently made a bunch of updates to the way that Console catches errors and I could not figure out how to fix this one 😞

I'll also mention that I often use a very large font size with the editor while teaching but would prefer to have a smaller console font size. Would it make sense for me to open a "feature request" issue about separate font size settings for code and console? I will search to see if this has been discussed before!

Definitely open a feature request about this!

[kjhollen]

Thanks folks! I am thinking through what we should do with this issue: the error now appears (original issue is fixed!) but I agree it would be helpful suppress the additional error if possible, though the difficulty of the issue means it probably won't be prioritized for a bit.

Is changing the bug title the right thing to do? Or close this one & open a new issue? If the error stopped showing again, I would want someone to let us know and either re-open or file a new issue (and not to think this one already covered what they wanted).

[shiffman]

Hi @kjhollen! I think b/c of all the twists and turns in this discussion it would be more clear for maintainers (when there is time to revisit) to close this issue and have a new one just about the specific suppression of the Event promise related error thingie! What do you think? I'm happy to do so if that is helpful!