FES: Global Error Catching

[akshay-99]

Resolves #4662

Changes:

• Detect internal library errors and log accordingly
• A simpler stack trace by filtering out the internal call details

Pending

• Explanation for various kinds of errors and suggestions to address them
  • SyntaxErrors
  • ReferenceErrors
  • TypeErrors

There may be unintentional errors that happen inside the p5js library. Often these are due to wrong arguments but may sometimes be due to other reasons. There are also a bunch of intentional errors that the library can throw. These are often confusing as they point to a line inside the library and the stacktrace is filled with internal calls. These can be simplified by focusing on the lines in the sketch that led to it. As seen above, the error from the browser can be confusing and the FES can quickly inform about the relevant details.

It may be good to consider using some styling ( colours, font, etc ) to pull the focus away from the raw error of the browser and towards the simpler FES message.

From what I could gather, styling of log messages used to be a part of the FES until it was removed three years ago in #2141, to integrate with the web editor, which was new back then. I assume that the console on editor did not support styling of messages back then. But I tried it now, and it seems to work. https://editor.p5js.org/akshay.padte/sketches/8VFX4Fq2v

It would great if someone could give some insight as to exactly why styling was removed in the FES and the current status with the web editor.

PR Checklist

• npm run lint passes
• Inline documentation is included / updated
• Unit tests are included / updated

[akshay-99]

So I think this is now ready for review. There are a few problems when running this on the web editor.

1. The line numbers are incorrect. The web-editor concatenates all source files into about:srcdoc while running the code. So the line numbers in the error messages are relative to the top of about:srcdoc. From what I can tell, this problem has existed from as far back as p5.js 0.6.0, as seen in this sketch
   https://editor.p5js.org/akshay.padte/sketches/6fam0ePVY
   

2. Errors sometimes don't appear on the editor console. But they do appear on the browser console.
   This also doesn't seem to be a problem introduced in this PR. I could see this problem with p5js 1.0.0 on the web editor as well
   With 0.10.2: https://editor.p5js.org/akshay.padte/sketches/aTScY4lww
   With 1.0.0: https://editor.p5js.org/akshay.padte/sketches/11jsOhiQM
   With this PR: https://editor.p5js.org/akshay.padte/sketches/pWKI8QYZ8

Colours and styling for FES messages does seem to work on the web editor as of now. However, I decided not to enable it yet as it would be nice if someone else could explain why it was disabled in the first place. Styling can be enabled later just by the flipping this toggle.

Since there are a lot of sketches needed to test all these changes, I am posting links to the editor instead of pasting all the codes here. While reviewing please check them on the editor as well as locally.

1. ReferenceError: "x" is not defined. (Often a mistake in scope or spelling/capitalization)
   The misspelling check runs first. The FES message in the sketch below is displayed if no close match is found in library functions.
   https://editor.p5js.org/akshay.padte/sketches/HuNUNTvvP

2. TypeError: "x" cannot be called as a function
   https://editor.p5js.org/akshay.padte/sketches/DYYCqX77u
   https://editor.p5js.org/akshay.padte/sketches/ey5iJKG9C

3. SyntaxError: invalid token ( often a result of copying code from some other place )
   https://editor.p5js.org/akshay.padte/sketches/KOoLFGWMh

4. SyntaxError: unexpected token ( often a simple typo )
   https://editor.p5js.org/akshay.padte/sketches/w9vtsIRHr

5. An unexpected error inside the p5 library
   https://editor.p5js.org/akshay.padte/sketches/FBZiY5E2s

6. An error inside the p5 library due to a non loadX method used in preload.
   https://editor.p5js.org/akshay.padte/sketches/no9oCLtHB

[stalgiag]

Great! This is really exciting.

This is a big one so I will review over the next few days. If I remember correctly from your schedule, your next goal isn't dependent on this so feel free to jump into that while I find time to review this. If I am incorrect about scheduling, let me know, and I will expedite the review.

[akshay-99]

Yes I can work on the next thing while this gets reviewed

[stalgiag]

Looks great! Few questions and suggestions inline.

[akshay-99]

@stalgiag I have pushed the changes. I also removed a redundant explanatory comment from a test case as the test above it also had the same comment.

[akshay-99]

Errors sometimes don't appear on the editor console. But they do appear on the browser console.
This also doesn't seem to be a problem introduced in this PR. I could see this problem with p5js 1.0.0 on the web editor as well
With 0.10.2: https://editor.p5js.org/akshay.padte/sketches/aTScY4lww
With 1.0.0: https://editor.p5js.org/akshay.padte/sketches/11jsOhiQM
With this PR: https://editor.p5js.org/akshay.padte/sketches/pWKI8QYZ8

So I did a little digging on this. The reason the web editor cannot display errors in the editor-console with p5.js 1.0.0 is because of the fact that in 1.0.0, setup and all other things from it happen inside a Promise. The web editor probably listens for errors on the window and copies them to the editor-console whenever they happen. But this listener cannot listen to errors which happen inside Promises.
In 1.0.0

In 0.10.2

[stalgiag]

Amazing addition @akshay-99 thanks for the hard work! Will you open an issue about the promise-based errors not posting to the editor console? You can open it on this repo and if we decide the change needs to happen on the editor side we can transfer it.

Very excited to have these friendly messages for global errors :-D