P5.js-web-editor: 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!

• [x] undefined values
• [ ] file not found errors with loadJSON(), loadImage(), etc.
• [x] 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.