Better error messages for bad property access in p5.strands

[davepagurek]

Increasing access

Strands errors, being in a weird runtime, are harder to debug than other errors. It would be good to provide better guidance when common mistakes like typos occur, since current errors are fairly cryptic.

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

Feature enhancement details

In this sketch: https://editor.p5js.org/davepagurek/sketches/YSaoYlQLT

let distort;
async function setup() {
  createCanvas(400, 400, WEBGL);
  distort = buildFilterShader(distortFn)
}

function distortFn() {
  filterColor.begin()
  let offset = floor(frameCount / 30)
  let coord = filterColor.texCoord
  // Should be:
  // coord.x += (noise([filterColor.texCoord*30, offset]) - 0.5) * 0.01
  coord.x += (noise([filterColor*30, offset]) - 0.5) * 0.01
  coord.y += (noise([filterColor.texCoord*10, 100 + offset]) - 0.5) * 0.01
  filterColor.set(getTexture(filterColor.canvasContent, coord))
  filterColor.end()
}


function draw() {
  background(255)
  sphere(150)
  filter(distort)
}

The error I get is:

🌸 p5.js says: [p5.js line 135658 > Function, line 9] An error with message "[p5.strands type error]: You've tried to construct a scalar or vector type with a non-numeric value: function(hookUserCallback) {
        const args = setupHook();
        hook._result = hookUserCallback(...args) ?? hook._result;
        finishHook();
      }" occurred inside the p5js library when strandsNode was called. If not stated otherwise, it might be an issue with the arguments passed to strandsNode. (https://p5js.org/reference/p5/strandsNode) 
┌[https://cdn.jsdelivr.net/npm/p5@2.3.2/lib/p5.js line 135658 > Function:9:14] 
	 Error at line 9 in anonymous()
└[blob:https://preview.p5js.org/cc16e867-a8a5-4607-baef-caa11be5e328:4:13] 
	 Called from line 4 in setup()

A few things to note:

• The call stack, being in a strands-evaluated function, is not useful.
  • Is there a way to get a source mapping from original code lines to transpiled code lines + the location of the function in the original sketch to recreate an actual line for the code?
  • Can we filter out some of these lines and produce a friendlier stack trace for strands?
• The actual error we get seems to be downstream from the actual cause here, which is that we're calling filterColor*30.
  • If you put a debugger line above there, you see it gets transpiled into __p5.strandsNode(filterColor).mult(30), which actually throws the error
  • The error doesn't actually say anything about this though, and shows some internal p5 code instead

[LalitNarayanYadav]

I'd like to take this on. Found the throw site - mapPrimitiveDepsToIDs in src/strands/ir_builders.js, the else branch that currently does:

FES.userError(
  'type error',
  `You've tried to construct a scalar or vector type with a non-numeric value: ${dep}`
);

That ${dep} is what dumps the raw internal callback source into the message in the repro above - filterColor (used bare instead of filterColor.texCoord) is a hook object/function, and stringifying it just prints its source.

Planned scope for a first PR (leaving stack-trace trimming and source-mapping as follow-up, per your #1/#2/#3 breakdown):

• Detect when dep is a function or object rather than stringifying it directly
• When it looks like a strands hook/node used without a property access, add a hint pointing at the likely fix (e.g. "did you forget .texCoord?")
• Add a regression test based on this issue's repro sketch, in the existing p5.strands error messages suite in test/unit/webgl/p5.Shader.js

Will open a draft PR shortly.