p5.js icon indicating copy to clipboard operation
p5.js copied to clipboard

Incorrect link to reference in FES in p5.[Class] errors

Open reejuBhattacharya opened this issue 3 years ago • 2 comments
trafficstars

Most appropriate sub-area of p5.js?

  • [ ] Accessibility (Web Accessibility)
  • [ ] Build tools and processes
  • [ ] Color
  • [ ] Core/Environment/Rendering
  • [ ] Data
  • [ ] DOM
  • [ ] Events
  • [X] Friendly error system
  • [ ] Image
  • [ ] IO (Input/Output)
  • [ ] Localization
  • [ ] Math
  • [ ] Unit Testing
  • [ ] Typography
  • [ ] Utilities
  • [ ] WebGL
  • [ ] Other (specify if possible)

p5.js version

1.4.0

Web browser and version

No response

Operating System

No response

Steps to reproduce this

In the event of an error in any method in any p5.[class] object, the reference link provided by the FES is wrong.

p5.[class] refers to classes like p5.File, p5.Graphics, p5.Font, etc.

Examples:

image

For the above, the reference link should be https://p5js.org/reference/#/p5.File/file rather than https://p5js.org/reference/#/p5/File

image

For the above, the reference link should be https://p5js.org/reference/#/p5.Graphics rather than https://p5js.org/reference/#/p5/Graphics

This issue is also present in p5.Font as mentioned in issue #5346.

I am working on this issue. However, I am not too familiar with the Friendly-Error System, so any pointers and help will be highly appreciated.

reejuBhattacharya avatar Jan 22 '22 13:01 reejuBhattacharya

I have been digging through the FES files and I think I have come close to the cause of the bug. In this case, a TypeError is thrown of type Undefined, and the _friendlyError function is called and translator(...) is passed as argument. _friendlyError takes takes 3 arguments,

  • message for the message to be printed
  • func for the name of the function causing error (This is important here)
  • color for the color of the friendly error (CSS)

Since only one argument is passed here, i.e, translator (which returns a string), message is assigned that string value, and func is undefined. Now, _friendlyError calls _report, which in turn contains a call to mapToReference which is responsible for generating the link to the reference.

This is where I am stuck, as I am failing to understand how mapToReference maps to the reference link in the case where func is undefined. image

Thoughts?

reejuBhattacharya avatar Jan 22 '22 15:01 reejuBhattacharya

Hi, I may not be the right person to answer this question, but I'll share my thoughts on this just in case it helps!

In the case where func is undefined, the condition func == null will actually be true and you will have a message without the link to a reference. That said, if the condition was func === null this code would not work.

This code makes sense, in a scenario where the FES didn't detect any func. You don't have information on func (so it will most likely be null or undefined) so you just display the message that you received.

I confirmed that the FES generates incorrect reference links for p5.[Class] object methods. Currently, FES generates these links from the browser-generated Javascript stack trace logs (as seen in /core/friendly_errors/stacktrace.js). I'm not sure if we can get the fully-qualified (?) class name (i.e. p5.Graphics) by using the current method.

almchung avatar Jan 25 '22 16:01 almchung