[BUG] Critical rendering crash in Sketch.astro when OpenProcessing API fails

[priyaa-j]

Most appropriate sections of the p5.js website?

Home

What is your operating system?

Windows

Web browser and version

No response

Actual Behavior

Currently, the src/components/GridItem/Sketch.astro component assumes that the item prop passed from the OpenProcessing API will always be valid. However, if the API returns an error (such as the recent 403 Forbidden or 500 Internal Server Error), the item variable becomes undefined.
When the component attempts to execute the following line:
const imgSrc = await getSketchThumbnailSource(item.visualID)
It throws an Uncaught TypeError: Cannot read properties of undefined (reading 'visualID'). In the Astro rendering engine, this results in a critical failure that can prevent the entire page (or the sketch grid section) from rendering.

Expected Behavior

The website should be resilient to external API failures. If a specific sketch's data is missing, the component should exit gracefully (render nothing) instead of crashing the entire application.

Proposed Fix (Guard Clause):
Implement a defensive guard clause at the top of the src/components/GridItem/Sketch.astro frontmatter.

Steps to reproduce

1. Run the server locally.
2. Bypass API Error: Manually bypass/ignore the getCurationSketches 403/500 error (Build fails with getCurationSketches when OP API inaccessible #1187) to allow the build to proceed.
3. Observe Error: Even with the API error bypassed, the page fails to render with:
   TypeError: Cannot read properties of undefined (reading 'visualID') at src/components/GridItem/Sketch.astro.

Would you like to work on the issue?

Yes

[priyaa-j]

Hi @ksen0! While investigating the local build failures, I discovered a secondary rendering crash that occurs even if the getCurationSketches API error (#1187) is bypassed.
In src/components/GridItem/Sketch.astro, the code attempts to access item.visualID without verifying if item exists. When the API fails or returns empty data, this triggers an uncaught TypeError: Cannot read properties of undefined (reading 'visualID'), causing a total page failure.
I have a local fix ready using a defensive guard clause to make the component resilient to missing data, regardless of the API's status. Would love to work on a fix for this issue. Please look into this and let me know if any improvement is needed or I'm missing on something. Thanks!

[ksen0]

Thanks for the initiative and work @priyaa-j ! Assigned

[ksen0]

Hi @priyaa-j ! If you have a specific proposal that still applies (given the other fix) do you want to make a PR? No rush.
If the previous fix actually solves this, also feel free to close this one.
Thanks again for the investigation.

[priyaa-j]

Hi @ksen0! Sorry for taking too long, Yes, This fix is still valid and necessary even though the other fix resolved the current API error, the guard clause adds an extra layer of protection for any future API failures. So I think it's still worth adding.

Also, just to add — earlier when I tried bypassing the API error to test locally (when issue was not fixed) the page was still crashing because of the undefined item. So this fix addresses that separate issue.

Sorry for the delay in following up, college keeps me busy. I'm in IST[Indian Standard Time] so replies might come at odd hours. I'll update properly later today or tomorrow. Should I go ahead with the fix? Thanks for checking in!